CODEWITHSUNDEEP
javascriptformsradio-buttonhidden-field
QA Test
QA Test

Reputation: 11

Passing a specific value for a hidden field using javascript

I working on a email preference center and the user has 4 options - 3 options are for email frequency and the last option is to unsubscribe. I have two different fields that my form is passing - email frequency and email status. I'm having trouble with the email status field.

For radio buttons 1-3 I want it to post email status ="I" and also email frequency is either "All", "Weekly" or "Monthly"

For the last radio button I only want it to post email status = "O"

I can't seem to get both to work - it either passes only I and then the unsub radio button doesn't work or email status will post O for the unsub but then null values for buttons 1-3.

Below is the base code i'm working with. 

<input type="radio" name="EMAIL_FREQUENCY_STATUS" value="W" id="EMAIL_FREQUENCY_STATUS"  >Weekly
<input type="radio" name="EMAIL_FREQUENCY_STATUS" value="M" id="EMAIL_FREQUENCY_STATUS"> Monthly
<input type="radio" name="EMAIL_FREQUENCY_STATUS" value="A" id="EMAIL_FREQUENCY_STATUS"> All


<input type="radio" name="EMAIL_STATUS" value="O" id="EMAIL_STATUS"> Unsubscribe!

<input name="Update" type="image" value="Send" src="update_btn.jpg" alt="Update" >

I've tried using different javascript functions but I can't get it to work as desired. Any help would be awesome!

Update 7/11:

Here's one variation of code I tried...


<input type="radio" name="EMAIL_Weekly" value="W" id="EMAIL_Weekly"  onClick="document.getElementById('EMAIL_STATUS').value=I"/>Send me 1 email per week

 <input type="radio" name="EMAIL_Monthly" value="M" id="EMAIL_Monthly" onClick="document.getElementById('EMAIL_STATUS').value=I"/> Send me 1 email per month.

 <input type="radio" name="EMAIL_All" value="A" id="EMAIL_All" onClick="document.getElementById('EMAIL_STATUS').value=I"/> Send me all news, sales & offers. 

 <input type="radio" name="EMAIL_STATUS" value="O" id="EMAIL_STATUS" onClick="document.getElementById('EMAIL_STATUS').value=O"/>Unsubscribe me from all emails.


<input name="Update" type="image" value="Send" src="update_btn.jpg" alt="Update" >


 <input type="hidden" name="EMAIL_STATUS" value="" id="EMAIL_STATUS" />

Upvotes: 1

Views: 2535

Answers (1)

Barmar
Barmar

Reputation: 782407

<script>
function update_permission(perm) {
  document.getElementById('EMAIL_PERMISSION_STATUS').value = perm;
}
</script>

<form ...>
    <input type="radio" name="EMAIL_FREQUENCY_STATUS" value="W" onclick="update_permission('I')"/>Send me 1 email per week
    <input type="radio" name="EMAIL_FREQUENCY_STATUS" value="M" onclick="update_permission('I')"/> Send me 1 email per month.
    <input type="radio" name="EMAIL_FREQUENCY_STATUS" value="A" onclick="update_permission('I')"/> Send me all news, sales & offers. 
    <input type="radio" name="EMAIL_FREQUENCY_STATUS" value="O" onclick="update_permission('O')"/>Unsubscribe me from all emails.

    <input name="Update" type="image" value="Send" src="update_btn.jpg" alt="Update" >
    <input type="hidden" name="EMAIL_PERMISSION_STATUS" value="" id="EMAIL_PERMISSION_STATUS" />
</form>

I got rid of the id attributes of all the radio buttons; they were duplicates and probably not needed. I gave them all the same name -- when you unsubscribe, there's no frequency, so it should uncheck the frequency. A radio button with just one choice doesn't make sense; if you don't want it to be part of the group, it should be a checkbox, not a radio button.

Personally, I don't see the point of the hidden field. Couldn't you do the same thing in the server code?

Upvotes: 0

Related Questions