为每个mysql使用javascript创建提交

Question

Currently the table shows a different button for each mysql row, but only the first mysql row button works properly. When it works properly, the submit button saves the location row as a value for a javascript AJAX post. When it doesn't work properly the submit button refreshes the page.

This is the html and mysql form:

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

} 

This is the javascript for "register-form" that posts:

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

Basically if the submit button is clicked need it to save for the respective row that is clicked, instead of taking a different action.

$('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

I am pretty sure it is simply because you have all of the buttons with the same id which I think means all but the first will not be valid. Try adding the row id to the end of the id="btn-submit" and see if that works.

EDIT::

The javascript doesn't do anything because you are probably starting your click handler with something like:

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

right? (I cant see that part of the javascript in what you copied above.) If that is the case, what that little piece of codes says is

find an element with the id=submit-btn and then run this code when that element is clicked.

What you need to have is: $('.row-submit-btn').... instead. This is saying find an element with the css class of row-submit-btn and then run this code when one of them is clicked.

The reason I say to use a CSS class instead of the id is because id's have to be unique or the html is invalid (thus the reason this question is here!) but CSS Classes do not have this restriction. The major caveat here is that you need to make sure that this css class is unique to elements on this page (meaning there aren't any other things with row-submit-btn as a css class.) otherwise you will get unintended side effects.