web-dev-qa-db-ja.com

セマンティックUIでフォームを送信する方法は？

Semantic UI を使用してフォームを検証する方法を知っており、コンソールで「フォームに検証エラーがありません。送信しています」というメッセージを読むこともできます。しかし、これはどこに提出するのですか？実際にフォームを送信したいのですが、セマンティックUIのレイアウト方法で、送信先などを指定できません。

私は このチュートリアル を読みましたが、それは送信にAngularを使用し、セマンティックUIだけではありません）。

ここに本当に簡単なものがありませんか？

javascripthtmlformssemantic-ui
14
Jon Carl

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リクエストが/ signupに上記のケースで要求されます。ルールのいずれかがトリガーされると、送信検証エラーがなくなるまで防止されます。

22
Agon Bina

元の送信ボタンを使用しますが、セマンティックボタンのスタイルを追加します。

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

セマンティックUIには、フォームを送信するための独自のAPIがあります。例えば：

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

最も簡単な方法は、以下のコードを使用して標準の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が本当に必要なだけなので、この改造コードにはフォームタグが必要です。

5
Digital Visual

Ajaxを使用しない場合はどうなりますか？！

これを使用してください：

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

});

この場合、uは<button>タグ...代わりにクラシックタグを使用する必要はありません

4
Baya

セマンティックUIはjQueryとCSSに基づいているので、フォームデータを送信したい場合は、それを行う方法がいくつかあります。

  1. AJAXでフォームデータを送信する

  2. this のようないくつかのjqQueryプラグインを使用します

  3. 騙す！

    送信ボタンを配置し、その表示をなしに設定します。ユーザーがdivボタンをクリックすると、次のようにそのイベントが送信ボタンにスローされます。

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

フォームとエラーの検証については、投稿 フォーム検証にエラーを追加しても機能しない を参照してください。セマンティック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: /");
    }
}
0
wriver4