I want to submit form by checkbox checked without redirecting/reloading/refreshing to another page but still on the same page.

and my targets:

after checkbox checked submit form with silent and then hiding

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

and show sections of

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

existing cases: I have the form as following that seem won't work,

<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>

with that code, after checkbox checked the form submitted but and redirecting to another page.

I need some help and pointers that I would be appreciated.

Thank a lot.

Updated,

By following your Instructions with use Ajax to handling this, so i try it as Ajax looks:

<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 : '') + '&ment=' + encodeURIComponent(document.getElementById('textarea=[name=\'ment\']').value) + '&agree=' + encodeURIComponent(document.getElementById('input[name=\'agree\']:checked').value) ? document.getElementById('input[name=\'agree\']:checked').value : ''),
            success: function(data) {
                $('#message').html(data);
            }
        } );
}
</script>

I want to submit form by checkbox checked without redirecting/reloading/refreshing to another page but still on the same page.

and my targets:

after checkbox checked submit form with silent and then hiding

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

and show sections of

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

existing cases: I have the form as following that seem won't work,

<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>

with that code, after checkbox checked the form submitted but and redirecting to another page.

I need some help and pointers that I would be appreciated.

Thank a lot.

Updated,

By following your Instructions with use Ajax to handling this, so i try it as Ajax looks:

<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 : '') + '&ment=' + encodeURIComponent(document.getElementById('textarea=[name=\'ment\']').value) + '&agree=' + encodeURIComponent(document.getElementById('input[name=\'agree\']:checked').value) ? document.getElementById('input[name=\'agree\']:checked').value : ''),
            success: function(data) {
                $('#message').html(data);
            }
        } );
}
</script>

• php
• javascript
• ajax
• forms

Share Improve this question Follow edited Nov 29, 2010 at 7:11 jones asked Nov 29, 2010 at 5:43 jonesjones 66133 gold badges99 silver badges2121 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

As your requirement you have to use AJAX for submitting form without refreshing page. this is very easiest way for submit form in silent mode.

Thanks.

You can use the ajax JQuery function, for example:

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

You can send data to the server w/o anything happening on the page.

Use Jquery. It's fast and easy.

IF no database interaction required then simply use javascrit.