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

Question

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

我读this tutorial，但使用角提交并不仅仅是语义UI。

我失去了很简单的东西在这里？

Answer 1

您可以使用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 ... 
    } 

编辑：另外，您可以使用窗体的方法的onSuccess运行submitForm功能，即当你初始化形式：

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

onSucce只有在点击“提交”按钮并且表单有效时，才会调用ss。

编辑：如果你想正规的HTML表单的行为，则需要语义CSS类添加到form标签。

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

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

Answer 2

语义UI是基于jQuery和CSS所以如果你想提交表单数据，你有办法做到这一点：

1. 与AJAX发送的表单数据

2. 使用一些jqQuery插件，像this

3. 招！

   将一个提交按钮，并设置其显示为无。当用户点击div按钮抛出事件提交按钮，以这样的方式

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

Answer 3

利用原有的提交按钮，但添加语义按钮样式：

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

Answer 4

最简单的方法是加装一个标准的HTML表单使用下面的代码。

开始与一个提交按钮，这将花费你的价值观，并将它们发布到你的目的地的形式，返回下面的输出形式提交按钮一个基本的工作标准的HTML表单。

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

}); 

基本形式：

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

如果你想将错误消息在一个盒子里，而不是形式本身包括这在你的表单中显示，并删除词“内联：真”和语义UI没有休息：

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

注：使用带有语义UI表单标签是不是严格必要的，因为你只有真正需要用的类“UI形式”一个div，然而，这改装的代码确实需要一个表格 标签。

Answer 5

如果你不使用ajax怎么办？

使用这一个：

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

}); 

在这种情况下，u可以使用 <button>标签

...有没有必要使用经典的标签，而不是

Answer 6

看帖子Adding errors to form validation doesn't work?的形式和错误验证。由于语义UI是用户界面的客户端工具，因此这是用于“自动提交/相同代码页”联系人电子邮件的php。由于语义用户界面的目的不是逻辑处理，你想用什么语言和方法来提交表单？ JS/jQuery的客户端或服务器端的PHP，铁轨等？请记住语义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: /"); 
    } 
} 

Answer 7

如果你有这样的

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

一种形式，你可以使用foolowing脚本发送形式

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

Answer 8

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

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