如何在语义UI中提交表单？ [英] How to submit a form in Semantic UI?

问题描述

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

我读过本教程，但是它使用Angular进行提交，而不仅仅是语义用户界面。

我错过了什么真的很简单吗？

解决方案

您可以使用jQuery的ajax：

 //从输入字段获取值
函数getFieldValue（fieldId）{
 //'get field'是语义形式行为的一部分API 
 return $ （'.ui.form'）。form（'get field'，fieldId）.val（）; 
 
 
 function submitForm（）{
 var formData = {
 field1：getFieldValue（'someId'）
}; 
 $ b $ .ajax（{type：'POST'，url：'/ api / someRestEndpoint'，data：formData，success：onFormSubmitted}）; 
} 
 
 //处理过帐响应
函数onFormSubmitted（响应）{
 //做一些响应... 
} 
  

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

  $（'。ui.form'）。form（validationRules，{onSuccess：submitForm}）; 
  

只有点击提交按钮并且表单有效时，才会调用onSuccess如果你想要常规的HTML表单行为，你需要将语义CSS类添加到表单中。 code $>标记。



 < form class =ui formmethod =POSTaction =/ signup > ...< /形式> 
  

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

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?

解决方案

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.

这篇关于如何在语义UI中提交表单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！