Question

我有以下代码，列表中的表单应该通过Ajax提交元素。表单中的值通过do ... while循环重复，以便列表成为动态列表，如下图所示：

SS of the GUI

但是，当我单击一个按钮时，通过Ajax代码发送的唯一元素是最后一个按钮的值，即使我单击Oranges也是如此。

代码如下：

<script>
function submitForm() {
    $.ajax({type:'POST', url: 'jQuery-ajax-demo.php', data:$('#MyJobsForm').serialize(), success: function(response) {
    $('#myJobs_Right').find('.form_result').html(response);
    }});

    return false;
}
</script>

</head>

<body>

<ul id="btn_MyJobs" data-role="listview" data-inset="true">
<li id="MyJobs_List" class="push">
  <form id="MyJobsForm"  onsubmit="return submitForm();">
    <?php do { ?>
      <input type="hidden" name="name" value="<?php echo $row_Recordset1['cargo']; ?>">
      <input type="submit" name="submit" value="<?php echo $row_Recordset1['cargo']; ?>">
      <br/>
      <br/>
      <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
  </form>
</li>
</ul>

<div id="myJobs_Right">
 <div class="form_result"> </div>
</div>

</body>

jQuery-ajax-demo.php页面如下所示：

<?php
if(isset($_POST['name'])) {
    $name = $_POST['name'];

    ?>
    Your Name Is: <?php echo $name; ?><br />
    <?php
    die();
}
?>

Answer 1

如果您必须这样做，那么您可以尝试为每个按钮创建一个新表单：

<?php do { ?>
  <form onsubmit="return submitForm(this);"> <!--Note I added "this" -->
      <input type="hidden" name="name" value="<?php echo $row_Recordset1['cargo']; ?>">
      <input type="submit" name="submit" value="<?php echo $row_Recordset1['cargo']; ?>">
      <br/>
      <br/>
  </form>
<?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>

然后，唯一会发布的值将是您单击其按钮的表单中的隐藏值。我更新了上面的onsubmit调用，在调用中包含this。所以你可以在你的函数中执行以下操作：

function submitForm(form) {
    var $form = $(form);
    $.ajax({
        type:'POST', 
        url: 'jQuery-ajax-demo.php', 
        data:$form.serialize(), 
        success: function(response) {
            $('#myJobs_Right').find('.form_result').html(response);
        }
    });

    return false;
}

如何从提交的do ... while表单中获取值

1 个答案: