為每個MySQL創建使用JavaScript提交

Question

當前，該表為每個mysql行顯示一個不同的按鈕，但是只有第一個mysql row按鈕可以正常工作。 當其正常工作時，“提交”按鈕會將位置行另存為javascript AJAX帖子的值。 如果無法正常工作，則提交按鈕將刷新頁面。

這是html和mysql形式：

   while($row = mysqli_fetch_array($result)) {

echo '<form class="form-signin" action="" method="POST" id="register-form"><tr>';
echo "<td><b>" . $row['product'] . "</b><br>";
echo "<td><b>" . $row['location'] . "</b><br>";
echo "" . $row['notes'] . "";
  echo '  
  <input type="hidden" name="user_name" value="'.   $row['product'].'" />
   <input type="hidden" name="location" value="'.   $row['location'].'" />
  <input type="text" class="form-control" placeholder="Table Number" name="user_email" id="user_email" />
  <input type="text" class="form-control" placeholder="Quantity" name="password" id="user_email" />
   <button type="submit" class="btn btn-default" value="Submit form" name="btn-save" id="btn-submit">
                <span class="glyphicon glyphicon-log-in"></span> &nbsp;'. $row['location'] .'
            </button></td>';

echo "</tr></form>";

} 

這是發布以下內容的“注冊表格”的javascript：

{
    var data = $("#register-form").serialize();

    $.ajax({

        type: 'POST',
        url: 'register.php',
        data: data,
        beforeSend: function() {
            $("#error").fadeOut();
            $("#btn-submit").html('<span class="glyphicon glyphicon-transfer"></span> &nbsp; sending ...');
        },
        success: function(data) {}
    })
}

基本上，如果單擊了提交按鈕，則需要將其保存到所單擊的相應行中，而不是執行其他操作。

$('document').ready(function()
{
    /* validation */
    $("#register-form").validate({
        rules:
        {

        },
        messages:
        {
            user_name: "Enter a Valid Username",
            password:{
                required: "Provide a Password",
                minlength: "Password Needs To Be Minimum of 8 Characters"
            },
            user_email: "Enter a Valid Email",
            cpassword:{
                required: "Retype Your Password",
                equalTo: "Password Mismatch! Retype"
            }
        },
        submitHandler: submitForm
    });
    /* validation */

    /* form submit */
    function submitForm()
    {
        var data = $("#register-form").serialize();

        $.ajax({

            type : 'POST',
            url  : 'register.php',
            data : data,
            beforeSend: function()
            {
                $("#error").fadeOut();
                $("#btn-submit").html('<span class="glyphicon glyphicon-transfer"></span> &nbsp; sending ...');
            },
            success :  function(data)
            {
                if(data==1){

                    $("#error").fadeIn(1000, function(){


                        $("#error").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> &nbsp; Sorry email already taken !</div>');

                        $("#btn-submit").html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; Create Account');

                    });

                }
                else if(data=="registered")
                {

                    $("#btn-submit").html('Ordered');
                   // setTimeout('$(".form-signin").fadeOut(500, function(){ $(".signin-form").load(""); }); ',5000);

                }
                else{

                    $("#error").fadeIn(1000, function(){

                        $("#error").html('<div class="alert alert-danger"><span class="glyphicon glyphicon-info-sign"></span> &nbsp; '+data+' !</div>');

                        $("#btn-submit").html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; Create Account');

                    });

                }
            }
        });
        return false;
    }
    /* form submit */

});

Answer 1

我很確定這僅僅是因為您擁有具有相同id的所有按鈕，我認為這意味着除第一個按鈕之外的所有按鈕都是無效的。 嘗試將行ID添加到id =“ btn-submit”的末尾，看看是否可行。

編輯：：

javascript不會執行任何操作，因為您可能會使用類似以下的內容來啟動點擊處理程序：

 $('#submit-btn')... 

對？ （在上面復制的內容中，我看不到javascript的那部分。）如果是這種情況，那小段代碼說明的是

找到一個id = submit-btn的元素，然后在單擊該元素時運行此代碼。

您需要的是： $('.row-submit-btn')....代替。 這就是說，找到具有row-submit-btn的css類的元素，然后在單擊其中一個元素時運行此代碼。

我之所以說使用CSS類而不是id是因為id必須是唯一的或html無效（因此，此問題在這里的原因！），但是CSS類沒有此限制。 這里的主要警告是，您需要確保此css類對於此頁面上的元素是唯一的（意味着沒有其他任何將row-submit-btn作為css類的東西。）否則，您將得到意想不到的副作用。