How to submit a form in Semantic UI?

Question

I know how to validate a form using Semantic UI, and can even read in console the message "Form has no validation errors, submitting." However, where is this submitting to? I want to actually submit the form, but the way Semantic UI is laid out I don't seem to be able to specify where to submit to or anything.

I read this tutorial, but that uses Angular for submission and not just Semantic UI.

Am I missing something really simple here?

Does your form not have an "action" attribute where the related php function/file is called? — Sebsemillia, Oct 20 '13 at 20:15
@AfzaalAhmadZeeshan I have read their documentation, but as far as I can see there is no documentation on the submitting. There is documentation on validating the data, but nothing specific on the submitting. [link](http://semantic-ui.com/modules/form.html) says "submit" submits a selected form, but there is no actual explanation of where it submits to. — joncarl, Oct 20 '13 at 20:30
@Sebsemillia I wish. The way Semantic UI is built, they do not use HTML form elements. — joncarl, Oct 20 '13 at 20:30

score 23 · Accepted Answer · edited Mar 22 '14 at 01:41

You can use jQuery's ajax:

   //Get value from an input field
   function getFieldValue(fieldId) { 
      // 'get field' is part of Semantics form behavior API
      return $('.ui.form').form('get field', fieldId).val();
   }

   function submitForm() {
      var formData = {
          field1: getFieldValue('someId')
      };

      $.ajax({ type: 'POST', url: '/api/someRestEndpoint', data: formData, success: onFormSubmitted });
   }

   // Handle post response
   function onFormSubmitted(response) {
        // Do something with response ...
   }

EDIT: also, you can use the onSuccess method of the form to run the submitForm function, ie when you initialize the form:

$('.ui.form').form(validationRules, { onSuccess: submitForm });

onSuccess will only be called when the 'Submit' button is clicked and the form is valid based on the rules you specify.

EDIT: If you want the regular HTML form behavior, you will need to add the semantic css classes to the form tag.

<form class="ui form" method="POST" action="/signup">...</form>

And then you set up the validation rules using jQuery. This will give you the default HTML form behavior, ie when you hit the submit button, it will make a POST request to /signup in the case above. If any of your rules trigger, the submit is prevented until there is no validation errors.

Good work for being the only place on the web where I could find an example of using the onSuccess callback. — JonRed, Nov 22 '14 at 10:03
"onSuccess will only be called when the 'Submit' button is clicked and the form is valid based on the rules you specify" - that would be perfect but the onSuccess is called when the page loads rather than when the button is clicked. Any clues? — silverdr, May 14 '15 at 12:09
@silverdr I also see this, it doesn't seem to wait for the verification! — Andy Hayden, Jul 12 '17 at 22:13

score 10 · Answer 2 · answered Feb 05 '14 at 02:47

10

use the original submit button but add semantic button style:

<input type="submit" value="Submit" class="ui button" />
<input type="submit" value="Submit" class="ui teal button big"/>

answered Feb 05 '14 at 02:47

Bofeng

101
1
2

1

do you know how to add an icon to that input? Something like: ` – Niklas Jul 03 '14 at 14:29
1

their tutorial never mentions this in the form examples !! – Vivek Jha Jul 22 '14 at 20:18
If your using the document ready validationRules() implementation, this doesn't work because it automatically submits the page. – Nick N Oct 24 '14 at 16:41
2

@Niklas - you cannot put HTML inside an ``, however you can use ``. This will also submit the form, but I think it might not work on older browsers. – Richard de Wit Aug 06 '15 at 11:35

score 10 · Answer 3 · answered May 20 '15 at 04:22

10

Semantic UI has it's own API to submit form. for example:

$('.ui.form .submit.button')
.api({
    url: 'server.php',
    method : 'POST',
    serializeForm: true,
    beforeSend: function(settings) {
    },
    onSuccess: function(data) {
    }
});

answered May 20 '15 at 04:22

cuixiping

24,167
8
82
93

1

What if you want to run the form validation module first? – Billybobbonnet May 18 '17 at 12:33
@Billybobbonnet which is surely all the time! – Andy Hayden Jul 12 '17 at 22:14
@Billybobbonnet, in that case you should add the validations on the .form section. – Jamo Mar 16 '19 at 03:03
For me that is the best approach, we would be using the built-in functions. – Jamo Mar 16 '19 at 03:04

Digital Visual · Answer 4 · 2014-08-05T11:55:45.480

The easiest way is to retrofit a standard HTML form use the code below.

Start with a basic working standard HTML form with a submit button and this will take your values and post them to your form destination, returning the output below your form submit button.

Its a good time to double check you are successfully linking to jquery, semantic javascript and semantic css at this point.
Add class="ui form" to your form tag .
Add the javascript below.

.

$(document).ready(function() {

// validation 
 $('.ui.form').form({
    email: {
      identifier : 'email',
      rules: [
        {
          type   : 'email',
          prompt : 'Please enter an email'
        }
      ]
    }
},
{
    inline: true,
    on: 'blur',
    transition: 'fade down', 
    onSuccess: validationpassed
});

// called if correct data added to form 
function validationpassed() {

    // Multiple instances may have been bound to the form, only submit one.
    // This is a workaround and not ideal. 
    // Improvements welcomed. 

    if (window.lock != "locked") { 
        var myform = $('.ui.form');
        $.ajax({
            type: myform.attr('method'),
            url: myform.attr('action'),
            data: myform.serialize(),
            success: function (data) {
                //if successful at posting the form via ajax.
                myformposted(data);
                window.lock = "";
            }
        });
    } 
    window.lock = "locked";
}

// stop the form from submitting normally 
$('.ui.form').submit(function(e){ 
    //e.preventDefault(); usually use this, but below works best here.
    return false;
});




function myformposted(data) { 
    // clear your form and do whatever you want here 
    $('.ui.form').find("input[type=text], textarea").val("");
    //$('.ui.submit.button').after("<div>Message sent. Thank you.</div>");
    $('.ui.submit.button').after(data);
} 

});

Basic form:

    <form action="process.php" method="post" class="ui form">
    <div class="field">
    <label>title</label>
        <input name="email" type="text">
    </div> 
    <input type="submit" class="ui button"/>
    </form>

If you want the error message to show in a box rather than within the form itself include this in your form, and remove the words "inline: true," and Semantic UI does the rest:

<div class="ui info message"></div>

NOTE: Using form tags with Semantic UI isn't strictly necessary as you only really need a div with the classes "ui form", however this retrofit code does require a form tag.

score 4 · Answer 5 · answered Jul 22 '14 at 09:51

4

What if you don't wana use ajax?!

Use this one:

$( "#reg_btn" ).click(function(event){
    event.preventDefault();
    $('#register_form').submit();

});

in this case u can use <button> tag... there is no need to use classic tag instead

answered Jul 22 '14 at 09:51

Baya

310
1
2
8

Those submitting without ajax can simply remove the onSuccess part including the function – Moxet Khan Aug 26 '15 at 16:35

score 0 · Answer 6 · edited Feb 04 '14 at 05:21

0

Semantic UI is based on jQuery and CSS so if you want to submit your form data you have some way to do that:

Send your form data with AJAX
Use some jqQuery plugins like this
Trick!

Put a submit button and set its display to none. When a user clicks on the div button throw that event to the submit button, in this way:
```
$("div_button_selector").on("click", function(){
   $("input[type='submit']").trigger('click');
});
```

edited Feb 04 '14 at 05:21

answered Nov 05 '13 at 21:04

Majid Golshadi

2,686
2
20
29

1

I had thought of that, but I still want to use the Semantic UI validation. – joncarl Nov 07 '13 at 20:29

score 0 · Answer 7 · edited May 23 '17 at 12:10

See post Adding errors to form validation doesn't work? for form and error validation. Since Semantic UI is a client side tool for user interface, this is the php for "self submitting / same code page" contact email. Since the purpose of Semantic UI is not logic processing, what language and or method do you want to use for form submission? JS/jquery client side or serverside php, rails, etc.? Keep in mind Semantic UI is dependent on jquery.

<?php    
if (isset($_POST["email"]))
{
    if ($_POST["email"] != "")
    {
        $from = htmlentities($_POST["email"]); 
        $subject = htmlentities($_POST["subject"]);
        $message = htmlentities($_POST["message"]);
        $message = wordwrap($message, 70);
        mail("valid-server-email-username@valid-server-address", $subject, $message, "From: $from\n");
        $_POST["email"] = "";
        $_POST["subject"] = "";
        $_POST["message"] = "";
        unset($GLOBALS['email']);
        header("location: /");
    }
}

score -1 · Answer 8 · answered Dec 26 '14 at 07:13

If you have a form like this

<div class="ui form segment">
  <p>Tell Us About Yourself</p>
  <div class="field">
    <label>Name</label>
    <input placeholder="First Name" name="name" type="text">
  </div>
  <div class="field">
    <label>Username</label>
    <input placeholder="Username" name="username" type="text">
  </div>
  <div class="field">
    <label>Password</label>
    <input type="password" name="password">
  </div>
  <div class="ui blue submit button">Submit</div>
</div>

you can use the foolowing script to send the form

$('.ui.blue.submit.button').on('click', function() {
  submitForm();
});

function submitForm() {
  var formData = $('.ui.form.segment input').serializeArray(); //or .serialize();
  $.ajax({
    type: 'POST',
    url: '/handler',
    data: formData
  });
}

How to submit a form in Semantic UI?

8 Answers8

Linked