Question

我想通过选中复选框提交表单，而不会重定向/重新加载/刷新到另一个页面，但仍然在同一页面上。

和我的目标：

选中复选框后，使用静音提交表单，然后隐藏

<div id="question1"></div>

并显示

部分

<div id="question2" style="<?php echo ($agree) ? 'display:block;' : 'display:none;' ?>"></div>

现有案例： 我有以下表格似乎不起作用，

<div id="question1">
<form action="<?php echo $submit); ?>" method="post" id="question"  onsubmit="processForm();return false;">
<!--some rows here -->



            <?php if ($quote['id'] == $color || !$color) { ?>
            <?php $color = $quote['id']; ?>
            <input type="radio" name="prefer_color" value="<?php echo $quote['id']; ?>" id="<?php echo $quote['id']; ?>" checked="checked" style="margin: 0px;" />
            <?php } else { ?>
            <input type="radio" name="prefer_color" value="<?php echo $quote['id']; ?>" id="<?php echo $quote['id']; ?>" style="margin: 0px;" />
            <?php } ?>

      <?php foreach ($prefer_places as $prefer_place) { ?>
      <tr>
        <td width="1">
          <?php if ($prefer_place['id'] == $place || !$place) { ?>
          <?php $place= $prefer_place['id']; ?>
          <input type="radio" name="prefer_place" value="<?php echo $prefer_place['id']; ?>" id="<?php echo $prefer_place['id']; ?>" checked="checked" style="margin: 0px;" />
          <?php } else { ?>
          <input type="radio" name="prefer_place" value="<?php echo $prefer_place['id']; ?>" id="<?php echo $prefer_place['id']; ?>" style="margin: 0px;" />
          <?php } ?></td>
      </tr>
      <?php } ?>

<?php if ($agree) { ?>
<input type="checkbox" name="agree" value="1" checked="checked" onchange="if(this.checked)  this.form.processForm() ? $('#question2').css('display','block') : $('#question2').css('display','none');" id="agree" /><label for="agree">Agree</label>
<?php } else { ?>
<input type="checkbox" name="agree" value="1" onclick="if(this.checked) this.form.processForm() ? $('#question2').css('display','block') : $('#question2').css('display','none');" id="agree" /><label for="agree">Agree</label>
<?php } ?>
</form>
</div>

<div id="question2" style="<?php echo ($agree) ? 'display:block;' : 'display:none;' ?>">
<!--some fields here-->
</div>

使用该代码，在复选框选中提交的表单后，然后重定向到另一个页面。

我需要一些帮助和指示，我将不胜感激。

非常感谢。

更新

按照你的说明使用Ajax来处理这个，所以我尝试使用Ajax看起来：

<script type="text/javascript">
function processForm() { 
        $.ajax( {
            type: 'POST',
            url: 'index.php?p=form/questions_steps',
           data: 'prefer_color=' + encodeURIComponent(document.getElementById('input[name=\'<?php echo $quote['id']; ?>\']:checked').value) ? document.getElementById('input[name=\'<?php echo $quote['id']; ?>\']:checked').value : '') + '&prefer_color=' + encodeURIComponent(document.getElementById('input[name=\'<?php echo $prefer_color['id']; ?>\']:checked').value) ? document.getElementById('input[name=\'<?php echo $prefer_color['id']; ?>\']:checked').value : '') + '&comment=' + encodeURIComponent(document.getElementById('textarea=[name=\'comment\']').value) + '&agree=' + encodeURIComponent(document.getElementById('input[name=\'agree\']:checked').value) ? document.getElementById('input[name=\'agree\']:checked').value : ''),
            success: function(data) {
                $('#message').html(data);
            }
        } );
}
</script>

Answer 1

根据您的要求，您必须使用AJAX提交表单而不刷新页面。这是以静默模式提交表单的最简单方法。

感谢。

Answer 2

您可以使用ajax JQuery函数，例如：

$.ajax({
   url: "page.php",       
   type: "GET",
   data: (id : "123")
 });

您可以将数据发送到服务器，无需在页面上发生任何事情。

Answer 3

使用Jquery。它快速而简单。

如果不需要数据库交互，那么只需使用javascrit。

使用复选框提交表单而不刷新页面

3 个答案: