使用php ajax在同一页面上多次提交

Question

<div id="home">
<div class="container">
    <form action="" method="post">      
        <b><font color = "000099"><select name="category" id="category">
        <option>Name </option>
        <option>Email</option>
        <option>Employee</option>
        <option>Customer</option>
        </select></font></b>
        <b><font color = "000099"><select name="read" id="read">
        <option>New</option>
        <option>Archive</option>                                    
        </select></b>
        <font color = "339933"><b><input name="value" type="text" placeholder="Value" /> </b>                                   
        <input type="submit" value="GO"/></font><br>
    </form>
<font color = "339933"><b>
</b></font>
<p><div id="body">
<table width="98%" border="1">
<tr></tr>
<tr>
    <td><font color = "339933"><b>Name</td>
    <td><font color = "339933"><b>E-Mail </td>
    <td><font color = "339933"><b>Access</td>
    <td><font color = "339933"><b>Update </td>
</tr>
<?php
$read = $_POST['read'];

If($read == 'New'){
    $read = '0';
}

If($read == 'Archive'){
    $read = '1';
    $arc = 'AND date < CURDATE() - INTERVAL 90 DAY';
}

$category = $_POST['category'];
$value = $_POST['value'];
if($category == 'Name'){
    $where = " where name like '%$value%' ";
}else if($category == 'E-mail'){
    $where = " where Email like '%$value%' ";
}else if($category == 'Employee'){
    $where = " where Email like '%$value%' ";
}else if($category == 'Customer'){
    $where = " where Email not like '%$value%' ";
}

$select = 'SELECT *';
$from = ' FROM users';
if($where == ''){
    $where = ' WHERE TRUE ';
}

$order = " order by id desc limit 100";

if($read == '0'){
    $sql = $select . $from . $where . $order ;
}else{
    $sql = $select . $from . $where . $arc . $order ;
}

$result_set=mysql_query($sql);
    while($row=mysql_fetch_array($result_set)) {
?>
<tr>
    <form  method="post" name="forms" action=""> 
        <td><font color = Black><?php echo $row['name']; ?></td>
        <td><div id= "remail" name="remail"><font color = Black><?php echo $row['Email']; ?></div></td> 
        <td><input type="text" name="access_rights" class="form-control" value="<?php echo $row['access']; ?>" required="required" ></td>
        <td><input type="submit" class="submit_button" id="submit_button" name="submit_button" value="Update"/></td>
    </form>
<?php } ?>
</table>
</div>
</body>

<script type="text/javascript">
    $(function() {
        $(".submit_button").click(function() {
        alert('asfsfsds');
        var ID = $(this).attr("id");
        var dataString1 = 'msg_id='+ ID;
        var mail =  $("#remail").val();
        var mailid = 'remail='+ mail;
        var textcontent = $("#access_rights").val();
        var dataString = 'access_rights='+ textcontent;
        if(textcontent==''){
            alert("Enter some Value..");
            $("#access_rights").focus();
        } else {
        $.ajax({
            type: "POST",
            url: "action.php",
            data: dataString,mailid,dataString1,
            cache: true,
            success: function(html){
                document.getElementById('access_rights').value='';
                $("#access_rights").focus();
            }  
        });
        }
    return false;
    });
});
</script>
</html>

Above is my php ajax code. I want to one field in mysql database by ajax.

There are multiple submit button on the page. Let me explain you properly.

Below code is used for sorting the value on the page. This value retrieve from database. This is working fine. I can get the data from database and it is showing in the same page.

<form action="" method="post">      
<b><font color = "000099">
    <select name="category" id="category">
        <option>Name </option>
        <option>Email</option>
        <option>Employee</option>
        <option>Customer</option>
    </select>
</font></b>
<b><font color = "000099">
        <select name="read" id="read">
        <option>New</option>
        <option>Archive</option>                                    
    </select>
</b>
<font color = "339933"><b><input name="value" type="text" placeholder="Value" /></b>                                    
<input type="submit" value="GO"/></font><br>
</form>

In below code data is showing from database and one text box and submit button will display in table.

<form method="post" name="forms" action=""> 
    <tr>
        <td><font color = Black><?php echo $row['name']; ?></td>
        <td><div id= "remail" name="remail"><font color = Black><?php echo $row['Email']; ?></div></td> 
        <td><input type="text" name="access_rights" class="form-control" value="<?php echo $row['access'];?>" required="required" ></td>
        <td><input type="submit" class="submit_button" id="submit_button" name="submit_button" value="Update"/></td>
    </tr>
</form>

I want user with special permission can update the value by ajax because there could be multiple rows and it is not good to page get refreshed each time.

At the moment after clicking on update button ajax event not firing.

Can anybody advise me on this. I am not good in ajax.

Answer 1

There may be other issues, but the following line is syntactically incorrect:

data: dataString,mailid,dataString1,

That is not how you concatenate a string in Javascript. Plus, you would need to separate the name=value pairs with ampersands.

Instead of concatenating a string, you can use an object and let JQuery do the concatenating:

data: {
    'access_rights': $("#access_rights").val(),
    'remail': $("#remail").val(),
    'msg_id': $(this).attr("id")
},

---

UPDATE:

You don't have an element with id="access_rights. You do have an element with id="remail", but you create that element in a loop, so you will have multiple elements with that id.

You need to get the values of the elements that are in the same row as the clicked submit button. You can't do that using id values. Instead, you use .closest('tr') on the button element to get the surrounding row. You can then use .find() on the row element to get the values in that row.

Change:

<td><div id= "remail" name="remail"><font color = Black><?php echo $row['Email']; ?></div></td> 

To:

<td><font color="Black" class="remail"><?php echo $row['Email']; ?></td> 

Then you can have:

$(".submit_button").click(function() {
    var $submitBtn = $(this),
        $row = $(this).closest('tr'),
        $accessRights = $row.find("input[name=access_rights]"),
        accessRights = $accessRights.val();
    if (accessRights == ''){
        alert("Enter some Value..");
        $accessRights.focus();
    } else {
        $.ajax({
            type: "POST",
            url: "action.php",
            data: {
                'access_rights': accessRights,
                'remail': $row.find(".remail").text(),
                'msg_id': $submitBtn.attr("id")
            },
            cache: true,
            success: function(html){
                $accessRights.val('').focus();
            }  
        });
    }
    return false;
});

---

You are also missing the closing </tr> tag.