How to capture onchange or onclick event in radio button group in PHP code?

#1

I can’t quite get this figured out and maybe I am going about it the wrong way?? (more than likely!) I have searched and tried dozens of example to no avail Here is what I would like to do: I have a php webpage with 2 radio buttons for the user to select if they live in the US or other country. There are 2 text boxes for input but the label for them have to change based on the selection. If they select US the labels will be city and state, if they select Other, then the labels will be Latitude and Longitude. I think I might have to use JS or Ajax to accomplish this? My thought was to capture an onclick or onchange event and then capture the variable value and store it, then reload the page? (I have the logic to load the page correctly based on the variable value. Here is the code for the buttons and textboxes.

Select your country 
<input type="radio" id="us" name="country" value="US" onclick="displayRadioValue()" <? if ($COUNTRY=="US") echo "checked"; ?>>
<label for="us">US</label>	
<input type="radio" id="other" name="country" value="Other" onclick="displayRadioValue()"<? if ($COUNTRY=="Other") echo "checked"; ?>>
<label for="other">Other</label><p/>
<? if ($COUNTRY=="US"){
echo "City:";
} else {
echo "Latitude";
}
?>	
<input type="text" name="CITY" size="16" value="<? echo $CITY; ?>"> <p>
<? if ($COUNTRY=="US"){
echo "State:";
} else {
echo "Longitude";
}
?>	
<input type="text" name="STATE" size="12" value="<? echo $STATE; ?>"> <p>

What would be the best way to do this?

#2

I first would separate the php code from the HTML form and put it at the top. Second, you are defeating the purpose of an onclick event if you are going to reload the page. I personally don’t like onclick events as it makes changing the code a pain in the buttocks especially if you have a lot of code, I like using addEventListener. That is if you don’t reload the page and that is where onclick wouldn’t be so bad.

an example of what I’m saying:

<input class="myRadioBtn" type="radio" name="country" value="US"  check>
<label for="us">US</label>	
<input class="myRadioBtn" type="radio" name="country" value="Other" check>
<label for="other">Other</label><p/>

The Javascript Below:

/* The input radio tag element */
const myRadioButton = (e) => {
    console.log(e.target.classList);


    /*  This if statement isn't needed for a input tag that doesn't submit
        but would be needed if using an anchor(a) tag.  Though it doesn't hurt
        if it's in there. Though other tags in the HTML might cause it to do weird things. 
     */
    if (e.target.classList.contains('myRadioBtn')) { 
        e.preventDefault(); 
    } else {
        return;
    }

   /* This is where you would do want you want to to do here

};

document.addEventListener('click', myRadioButton, false);

If you are using Ajax the PHP would probably even be in a separate file.

#3

Strider64, Thank you so much your help!
Sorry if I I am such a newbie. I didn’t understand about separating the php code from the form? The PHP code in the radio button is what sets which button is checked based on the saved settings and then the code for the text boxes sets the label for the text boxes to correspond to the country selected. I don’t need to reload the page, that was just a thought on how to get the textbox labels to change. In your code, I don’t see how the radioButton would get checked correctly on the page load? After thinking about it, I think there might be a better way to achieve what I need? I will explain both thoughts
Original thought
In your Javascript I would want to change the label for the text boxes when the radiobutton is changed and not sure how to do that?

New thought
have 2 div One will have textboxes and labels for US and the other would have textboxes and labels for other countries and then hide/show the div based on the radiobutton clicked?

I really appreciate your assistance with this!

Sponsor our Newsletter | Privacy Policy | Terms of Service