Html 如何在语义 UI 中提交表单？

How to submit a form in Semantic UI?

提问by Jon Carl

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.

我知道如何使用Semantic UI验证表单，甚至可以在控制台中读取消息“表单没有验证错误，正在提交”。然而，这是提交到哪里呢？我想实际提交表单，但语义 UI 的布局方式我似乎无法指定提交到何处或任何内容。

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

我阅读了本教程，但它使用 Angular 进行提交，而不仅仅是语义 UI。

Am I missing something really simple here?

我在这里错过了一些非常简单的东西吗？

回答by Agon Bina

You can use jQuery's ajax:

您可以使用 jQuery 的 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:

编辑：另外，您可以使用表单的 onSuccess 方法来运行 submitForm 函数，即当您初始化表单时：

$('.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.

只有在单击“提交”按钮并且表单根据您指定的规则有效时才会调用 onSuccess。

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

编辑：如果您想要常规的 HTML 表单行为，则需要将语义 css 类添加到form标记中。

<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.

然后使用 jQuery 设置验证规则。这将为您提供默认的 HTML 表单行为，即当您点击提交按钮时，它会在上述情况下向 /signup 发出 POST 请求。如果您的任何规则触发，提交将被阻止，直到没有验证错误。

回答by Bofeng

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"/>

回答by cuixiping

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

语义 UI 有自己的 API 来提交表单。例如：

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

回答by Digital Visual

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

最简单的方法是使用以下代码改造标准 HTML 表单。

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.

从带有提交按钮的基本工作标准 HTML 表单开始，这将获取您的值并将它们发布到您的表单目的地，返回表单提交按钮下方的输出。

1. Its a good time to double check you are successfully linking to jquery, semantic javascript and semantic css at this point.

2. Add class="ui form" to your form tag .

3. Add the javascript below.

1. 现在是仔细检查您是否成功链接到 jquery、语义 javascript 和语义 css 的好时机。

2. 将 class="ui form" 添加到您的表单标签中。

3. 添加下面的javascript。

.

.

$(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:

如果您希望错误消息显示在一个框中而不是表单本身中，请将其包含在您的表单中，并删除单词“inline: true”，然后语义 UI 会完成剩下的工作：

<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.

注意：在语义 UI 中使用表单标签并不是绝对必要的，因为您只需要一个带有“ui 表单”类的 div，但是这个改造代码确实需要一个表单标签。

回答by Baya

What if you don't wana use ajax?!

如果你不想使用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

在这种情况下，您可以使用<button>标签...无需使用经典标签

回答by wriver4

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.

请参阅帖子向表单验证添加错误不起作用？用于表单和错误验证。由于语义 UI 是用于用户界面的客户端工具，因此这是用于“自我提交/相同代码页”联系电子邮件的 php。既然Semantic UI的目的不是逻辑处理，那么你想用什么语言或方法来提交表单？JS/jquery 客户端还是服务器端 php、rails 等？请记住，语义 UI 依赖于 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: /");
    }
}

回答by Majid Golshadi

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

语义 UI 基于 jQuery 和 CSS，因此如果您想提交表单数据，您可以通过某种方式做到这一点：

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 divbutton throw that event to the submit button, in this way:

   $("div_button_selector").on("click", function(){
      $("input[type='submit']").trigger('click');
   });
   

1. 使用 AJAX 发送表单数据

2. 像这样使用一些 jqQuery 插件

3. 诡计！

   放置一个提交按钮并将其显示设置为无。当用户点击div按钮时，将事件抛出到提交按钮，通过这种方式：

   $("div_button_selector").on("click", function(){
      $("input[type='submit']").trigger('click');
   });
   

回答by Bikram

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