CODEWITHSUNDEEP
javascriptphpjqueryforms
Jim Sundqvist
Jim Sundqvist

Reputation: 160

Submitting radio button values without page refresh


I'm currently having radio buttons to choose which payment the user want on the website, they can choose between (invoice, card, part payment(?)).

I'm using scripting to submit the radio buttons so no button is needed, however the page reloads every time they choose a different payment option, which is bad for the customer since they have to scroll down again to input the values of the form (phone number etc.) that appear when the radio button is selected.

So after a few complaints I've been trying to fix this issue to make the form appear without the page getting refreshed.

Is it possible to make a few changes in the scripting to make this possible?

Thanks in advance.

Here's the scripting i use:

function autoSubmit(){
    var formObject = document.forms['choice_form'];
    formObject.submit();
}

Here's the PHP: //I use the post values to show the form where you enter phone number and email

<?php 
 $value = '';
  if(isset($_POST['choice'])) {
   $value = $_POST['choice'];
  }
?>

Here's the "radio" form:

<form name="choice_form" id="choice_form" method="post">
   <table>
     <tr>
      <td>
        <input type="radio" name="choice" <?php if ($value == 'faktura') { ?>checked='checked' <?php } ?> onChange="autoSubmit();" value="faktura"> Faktura
      </td>
    </tr>
    <tr>
      <td>
        <input type="radio" name="choice" <?php if ($value == 'kort-direkt') { ?>checked='checked' <?php } ?> onChange="autoSubmit();" value="kort-direkt"> Kort / Direktbetalning
      </td>
    <tr>
      <td>
        <input type="radio" name="choice" <?php if ($value == 'delbet') { ?>checked='checked' <?php } ?> onChange="autoSubmit();" value="delbet"> Delbetalning
      </td>
    </tr>
  </table>
</form>

Upvotes: 1

Views: 3183

Answers (1)

Mate Solymosi
Mate Solymosi

Reputation: 5967

If every time a payment option is selected a different form needs to appear underneath the radio buttons, you could render all forms in hidden state in individual <div>s, and then display the corresponding <div> every time an option is selected.

If you need to do something more complex than that, you will probably need to use AJAX.

Upvotes: 2

Related Questions