How To Submit A Form In Semantic Ui?

January 31, 2024 Post a Comment

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

Solution 1:

You can use jQuery's ajax:

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

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

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

   // Handle post responsefunctiononFormSubmitted(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.

<formclass="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.

Solution 2:

use the original submit button but add semantic button style:

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

Solution 3:

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) {
    }
});

Solution 4:

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 functionvalidationpassed() {

    // 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.returnfalse;
});




functionmyformposted(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">
    <divclass="field"><label>title</label><inputname="email"type="text"></div><inputtype="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:

<divclass="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.

Solution 5:

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

Html5 Lite