使用復選框提交表單而不刷新頁面

Question

我想通過選中的復選框提交表單，而無需重定向/重新加載/刷新到另一個頁面，但仍在同一頁面上。

和我的目標：

復選框選中后，以靜音形式提交表單，然后隱藏

<div id="question1"><!--the form here--></div>

並顯示

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