简体   繁体   中英

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>

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM