模态框内的 Ajax 表单提交答案

【问题标题】：Ajax form submission inside modal box模态框内的 Ajax 表单提交
【发布时间】：2015-07-04 03:09:22
【问题描述】：

好的，这是一个奇怪的小问题：

这是一个测试页面，用户点击打开：

当用户点击查看结果时，模式框内有 3 个选择框。

box1 => 填充 =>Box 2 => 填充 Box 3

我的问题

当用户单击提交时，不是基于选择框选择从查询中显示结果，而是在模态框内再次打开测试页面...如下图所示

提交时

知道为什么提交表单时当前页面在模态框内打开？

提交表格

  <script type="text/javascript">
    jQuery(document).click(function(e){
        var self = jQuery(e.target);
        if(self.is("#resultForm input[type=submit], #form-id input[type=button], #form-id button")){
            e.preventDefault();
            var form = self.closest('form'), formdata = form.serialize();
            //add the clicked button to the form data
            if(self.attr('name')){
                formdata += (formdata!=='')? '&':'';
                formdata += self.attr('name') + '=' + ((self.is('button'))? self.html(): self.val());
            }
            jQuery.ajax({
                type: "POST",
                url: form.attr("action"), 
                data: formdata, 
                 success: function(data) { $('#resultForm').append(data); }
            });
        }
    });
    </script>

填充文本框

 <script type="text/javascript">
    $(document).ready(function()
    {
     $(".sport").change(function()
     {
      var id=$(this).val();
      var dataString = 'id='+ id;

      $.ajax
      ({
       type: "POST",
       url: "get_sport.php",
       dataType : 'html',
       data: dataString,
       cache: false,
       success: function(html)
       {
          $(".tournament").html(html);
       } 
       });
      });


     $(".tournament").change(function()
     {
      var id=$(this).val();
      var dataString = 'id='+ id;

      $.ajax
      ({
       type: "POST",
       url: "get_round.php",
       data: dataString,
       cache: false,
       success: function(html)
       {
        $(".round").html(html);
       } 
       });
      });

    });
    </script>


<label>Sport :</label> 
<form method="post" id="resultForm" name="resultForm" action="result.php">
<select name="sport" class="sport">
<option selected="selected">--Select Sport--</option>
<?php
 $sql="SELECT distinct sport_type FROM events";
 $result=mysql_query($sql);
 while($row=mysql_fetch_array($result))
 {
  ?>
        <option value="<?php echo $row['sport_type']; ?>"><?php echo $row['sport_type']; ?></option>
        <?php
 } 
?>
</select>

<label>Tournamet :</label> <select name="tournament" class="tournament">
<option selected="selected">--Select Tournament--</option>
</select>

<label>Round :</label> <select name="round" class="round">
<option selected="selected">--Select Round--</option>
</select>
<input type="submit" value="View Picks" name="submit" />
</form>

<?php

显示结果

  if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {

       echo $sport=$_POST['sport'];
        echo $tour=$_POST['tournament'];
        echo $round=$_POST['round'];

        $sql="Select * FROM Multiple_Picks WHERE tournament ='$tour' AND round='$round' GROUP BY member_nr";
        $result = mysql_query($sql);
        ?>
        <?php
        while($row=mysql_fetch_array($result)){
            $memNr = $row['member_nr']; 
            $pick = $row['pick'];
            $score = $row['score'];
            ?>

            echo $memNr;
            echo $pick;
            echo $score;
        }

    }

    ?>

【问题讨论】：

注释掉$('#resultForm').append(data);会得到什么？

标签： javascript php jquery ajax

【解决方案1】：

看来：

success: function(data) { $('#resultForm').append(data); } 你告诉它把 ajax 响应放在 resultForm 中，它似乎在你的模式中。这不是正在发生的事情吗？很难从您的问题和代码中分辨出应该发生的事情与现在发生的事情。

【讨论】：