jQueryを使用してフォーム内の送信ボタンの名前を取得します。

Question

PHPとjQueryを使用しています。私は2つのファイル

test.php

<script> 
 
    $(document).ready(function(){ 
 
     $(".form-register").submit(function (e) { 
 

 
      var form_data = $(this).serialize(); 
 

 
      e.preventDefault(); 
 

 
      $.ajax({ 
 
       type: "POST", 
 
       url: "test2.php", 
 
       data: form_data, 
 
       dataType: 'json', 
 
       success: function(){ 
 
        alert(form_data); 
 
       } 
 

 
      }); 
 
     }); 
 

 

 
    }); 
 
</script> 
 

 
<form class="form-register"> 
 
    <input name="email" type="text"/> 
 
    <input name="name" type="text"/> 
 
    <input type="submit" name="register"/> 
 
</form>

を持っており、2番目のファイルがtest2.phpです：

<?php 
if(isset($_POST['register'])){ 
    echo json_encode('Message from test2.php'); 
}else{ 
    echo json_encode('post no received'); 
} 

私は$_POST['register']を取得することができません好きなのでとき、私に思えチェックalert(form_data);emailとnameのみが表示されます。

とにかく私には$_POST['register']を取得してもらえますか？

Answer 1

.serialize()も.serializeArray()どちらも、送信ボタンの値をシリアル化します。

.serialize()

... no形式は、ボタンを使用して提出していなかったので、ボタンの値がシリアライズされる提出します。

.serializeArray()

... no形式は、ボタンを使用して提出していなかったので、ボタンの値がシリアライズされる提出します。

successful controlsのみがシリアル化されています。

入力サブミット要素は実際には成功したコントロールですが、フォームがサブミットボタンを使用してサブミットされないため、上記のように、入力サブミット値属性はjqueryシリアル化には含まれません。

.serializeArray()を使用する場合は、入力サブミット要素nameとvalue属性の値をオブジェクトとしてシリアライズされた配列に追加するだけです。

$(document).ready(function(){ 
 
    $(".form-register").submit(function (e) { 
 

 
    var form_data = $(this).serializeArray(); 
 
    var $submit = $(this).find('input[type="submit"]'); 
 
    form_data.push({name: $submit.prop("name"), value: $submit.val()}); 
 
    console.log(form_data); 
 
    
 
    // do your ajax request here... 
 
    
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="form-register"> 
 
    <input name="email" type="text"/> 
 
    <input name="name" type="text"/> 
 
    <input type="submit" name="submit" value="register"/> 
 
</form>

あなただけ.serialize()の方法で作成したテキスト文字列に提出する要素の値と名前の属性の値を追加.serialize()を使用したい場合。注意してください。文字列をURLエンコードする必要があります。

$(document).ready(function(){ 
 
    $(".form-register").submit(function (e) { 
 

 
    var form_data = $(this).serialize(); 
 
    var $submit = $(this).find('input[type="submit"]'); 
 
    form_data = form_data + "&" + $submit.prop("name") + "=" + $submit.val(); 
 
    console.log(form_data); 
 

 
    // do your ajax request here... 
 

 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="form-register"> 
 
    <input name="email" type="text"/> 
 
    <input name="name" type="text"/> 
 
    <input type="submit" name="submit" value="register"/> 
 
</form>

Answer 2

[送信]ボタンにvalue属性を追加し、$('form').serializeArray()を使用します。試してみてください：

$(".form-register").submit(function (e) { 
    var formData = $(this).serializeArray(); 
    var name = $(this).find("input[type=submit]").attr("name"); 
    var value = $(this).find("input[type=submit]").val(); 
    formData.push({ name: name, value: value }); 
    //now use formData, it includes the submit button 
    $.ajax({ 
    type: "POST", 
    url: "test2.php", 
    data: formData, 
    dataType: 'json', 
    success: function(){ 
     alert(form_data); 
    } 
    }); 
});