如何在語義UI中提交表單？

Question

我知道如何使用語義UI驗證表單，甚至可以在控制台中讀取消息“表單沒有驗證錯誤，提交”。 但是，這個提交到哪里了？ 我想實際提交表單，但是語義UI的布局方式我似乎無法指定提交的位置或任何內容。

我閱讀了本教程 ，但是使用Angular進行提交而不僅僅是Semantic 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 });

只有在單擊“提交”按鈕並且表單根據您指定的規則有效時，才會調用onSuccess。

編輯：如果您想要常規的HTML表單行為，則需要將語義css類添加到form標記中。

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

然后使用jQuery設置驗證規則。 這將為您提供默認的HTML表單行為，即當您點擊提交按鈕時，它將在上面的案例中向/注冊發出POST請求。 如果觸發了任何規則，則會阻止提交，直到沒有驗證錯誤為止。

Answer 2

使用原始提交按鈕但添加語義按鈕樣式：

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

Answer 3

語義UI擁有自己的API來提交表單。 例如：

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

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>

如果您希望錯誤消息顯示在框中而不是在表單中顯示，請在表單中包含此消息，並刪除單詞“inline：true”，語義UI執行其余操作：

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

注意：使用帶有語義UI的表單標簽並不是絕對必要的，因為您只需要一個帶有“ui form”類的div，但是這個改進代碼確實需要一個表單標簽。

Answer 5

如果你不使用ajax怎么辦？！

使用這個：

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

});

在這種情況下，你可以使用<button>標簽...而不需要使用經典標簽

Answer 6

語義UI基於jQuery和CSS，因此如果您想提交表單數據，您可以通過以下方式進行操作：

1. 使用AJAX發送表單數據

2. 使用像這樣的一些jqQuery插件

3. 特技！

   放置提交按鈕並將其顯示設置為無。 當用戶單擊div按鈕時，將該事件拋出到提交按鈕，這樣：

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

Answer 7

請參閱添加錯誤以進行表單驗證不起作用？ 用於表單和錯誤驗證。 由於Semantic UI是用戶界面的客戶端工具，因此這是用於“自提交/相同代碼頁”聯系電子郵件的php。 由於語義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: /");
    }
}

Answer 8

如果您有這樣的表格

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