1

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>
Improve this question

3 Answers 3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Hi Chandres maheshwari, I updated my first post with Ajax for submitting, please have look, and thanks
2

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.

Improve this answer

5 Comments

Hi Greg McNulty, I appreciated your example, I update my post, please have a look and assist me the correct one. thanks
@jones you should use firebug for this. Without firebug, it is like closing the eyes and crossing the road. I did not say it is like a blind man crossing the road because a blind man known how to cross the road without seeing.
sandeepan, that is very deep! haha
@Jones, what exactly is the question? Did you properly include the JQuery library in your project?
(Jones FYI - you can vote answers up if they give you any added benefit and also select as answer if it is helpful.)
1

Use Jquery. It's fast and easy.

IF no database interaction required then simply use javascrit.

Improve this answer

7 Comments

Yes I did, I Updated my questions, some pointers needed, could You please help me?.
I did't see any arror on the page, just no happen, and no data stored/saved. Thanks
Do have fire bug installed ? On which browser u r trying ?
This is my first time to use Fire bug, I need to learn it first about how to find the errors on it. but i re-edit my post. Thanks
Using fire bug is easy. as a developer u can be easily compatible with that. Try to check Ajax requests and responses step by step in fire bug their can any syntax error. your way of calling ajax is ok. I have checked.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.