Keeping checked radio button in a form after submit but jquery function doesn't work

Question

I have a simple form with some input, 2 radio buttons and two different hidden divs. The divs are shown depending on which button the user clicks. Lets assume that the user chooses one of the radio button but that there is an error in one of the input of the form. When i click the submit button and the form loads again showing the error I want that the previous choosen radio button is already checked. I achieved this with the php code in the input code. Now my problem is that when the form loads again the radio button is checked but the hidden div that needs to be shown stays hidden. How can I solve this issue? Thank you very much for your answers.

HTML CODE:

<form method="post"> 
    <input type="radio" name="button" id="button1" value="1" <?php if($_SERVER['REQUEST_METHOD'] == 'POST'){if(empty($error) && $button=="1"){ echo 'checked="checked"'; }} ?> /> 
    <label>Button 1</label><br />
    <input type="radio" name="button" id="button2" value="2" <?php if($_SERVER['REQUEST_METHOD'] == 'POST'){if(empty($error) && $button=="2"){ echo 'checked="checked"'; }} ?> /> 
    <label>Button 1</label><br />
    <div id="one">Div one</div>
    <div id="two">Div two</div>
    <input type="submit" value="submit" />
</form>

JQUERY CODE:

   $('#button1').click(function(){
       if($(this).is(':checked')){
           $('#one').show();
           $('#two').hide(); 
       }
   });
   $('#button2').click(function(){
       if($(this).is(':checked')){
           $('#one').hide();
           $('#two').show(); 
       }
   });

PHP CODE:

$error = array();

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

    if (!empty($_POST["button"])){  
        $button = $_POST["button"];
    }

    if (empty($_POST["button"])){   
        $error []= "Choose one option";       
    }   
}

Schleis · Accepted Answer · 2014-12-04 16:21:35Z

1

When you reload the page, the functions for checking the divs aren't being run because you have tied them to a click event. Move the click event functions into their own function and have them run on document.ready.

var showHide = function(){
    if($('#button1').is(':checked')){
         $('#one').show();
         $('#two').hide(); 
    }

    if($('#button2').is(':checked')){
         $('#one').hide();
         $('#two').show(); 
    }
   };

$(document).ready(showHide);
$('input[name="button"]').click(showHide);

edited Dec 4, 2014 at 16:21

answered Dec 4, 2014 at 16:06

Schleis

44.2k8 gold badges73 silver badges90 bronze badges

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

2 Comments

valemax Over a year ago

Unfortunately when the page with the form reloads the hidden div that was previously shown is hidden again.

Schleis Over a year ago

Sorry, I just quickly cut and pasted the javascript. The edits should now perform as you intend.

user3334871 · Accepted Answer · 2014-12-04 16:07:26Z

I'm not sure if this is the answer you are seeking, but it is a better approach to what you are trying to achieve. In JQuery, write a function called myForm_validate() and use it to validate your input. So, based on your example, you would write:

function myForm_validate() {
   //check for your two inputs to have values, in this case radio buttons

   var foundErrors = false;

   $("#myForm input").each(function() {
     if($(this).is(":checked") == false) { //no choice was selected
        foundErrors = true;
        return false;
     }
   });

   return foundErrors;
 }

Then, write a function on a form submit.

$("#myForm").submit(function(event) {
   var checkForErrors = myForm_validate();

   if(checkForErrors == true) { //there were errors in the form
      event.preventDefault(); //prevent the form from actually submitting
   }
 });

So this code, on a form submit, will check for errors based on the criteria in the validate function. If no errors were found, it continues with the submit. If an error was found, it prevents the submission.

Collectives™ on Stack Overflow

Keeping checked radio button in a form after submit but jquery function doesn't work

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related