CODEWITHSUNDEEP
phpjavascriptajaxforms
jones
jones

Reputation: 661

submit form with checkbox without refreshing page

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 : '') + '&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>

Upvotes: 1

Views: 3730

Answers (3)

Greg McNulty
Greg McNulty

Reputation: 1466

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.

Upvotes: 2

user319198
user319198

Reputation:

Use Jquery. It's fast and easy.

IF no database interaction required then simply use javascrit.

Upvotes: 1

Chandresh M
Chandresh M

Reputation: 3828

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.

Upvotes: 3

Related Questions