How to submit a form in Semantic UI?

后端 未结 8 1461
南旧
南旧 2021-02-04 07:57

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

相关标签:
8条回答
  • 2021-02-04 08:22

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

    0 讨论(0)
  • 2021-02-04 08:27

    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"/>
    
    0 讨论(0)
  • 2021-02-04 08:31

    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.

    0 讨论(0)
  • 2021-02-04 08:31

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

    1. Send your form data with AJAX

    2. Use some jqQuery plugins like this

    3. 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');
      });
      
    0 讨论(0)
  • 2021-02-04 08:41

    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) {
        }
    });
    
    0 讨论(0)
  • 2021-02-04 08:42

    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: /");
        }
    }
    
    0 讨论(0)
提交回复
热议问题