validate field in javascript and jquery

Question

I have four radio buttons. If I select the last radio button then one textbox is appearing. I handled this scenario by jquery. Now I want to validate in such a way that if user gets this textbox means if user checked the last radio button, then he should provide some text.But in my case, if I check any one of the radio button, its telling to provide some text. The code is like:

    <input type="radio" name="bus_plan" id="smallBtn" value="1" />1
     <input type="radio" name="bus_plan" id="smallBtn" value="2" />2
     <input type="radio" name="bus_plan" id="smallBtn" value="3" />3
     <input type="radio" name="bus_plan" id="smallBtn" value="Promotional" />
      <span class="plantxt"><a style="cursor:pointer;" onclick="popup('popUpDiv')">Promotional Plan</a> (Please enter a promotional code)</span>
    <div class="reg-line" id="pr_code_id" style="display:none">
       <div class="reg-linea" align="left">Promotional Code: <sup>*</sup></div>
       <input type="text" name="bus_prcode" id="bus_prcode" class="reg-line-input" value="Promotional Code" onblur="if(this.value=='') this.value='Promotional Code'" onClick="if(this.value==this.defaultValue) this.value='';" />
       <br />
       <div>
            <div id="promotionalbox" style="display:none;font-size:13px;clear:both"></div>    
       </div>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){     
    $("input:radio[name=bus_plan]").click(function(){  
        var values = $(this).val();
        if(values == 'Promotional'){
            $('#pr_code_id').show();
        }else{
            $('#pr_code_id').hide();    
        }
    }); 
}); 
</script>

and in js if I alert the value of document.getElementById('bus_prcode').value then always it is showing Promotional code, which is only for last radio button value.

to expand on that, ID's are singular and can only exist on one element on the document. use classes here instead. probably doesn't solve the issue but it is still wrong. w3.org/TR/html401/struct/global.html#h-7.5.2 — rlemon
– rlemon, Commented Sep 7, 2012 at 18:07

matthewjewell · Accepted Answer · 2012-09-07 18:15:01Z

1

Your code is a bit of a mess which is the root of this problem. Remember, one element per ID.

You may also find it helpful to look at jQuery .is(), for example:

$('input[value="Promotional"]').is(':checked')

n.b. I do not suggest the above, you should use identifiers in the appropriate way first.

Also worth noting that your code works fine for me using Chrome. See an example (which I have expanded for you) here: http://jsbin.com/ofujal/3/

answered Sep 7, 2012 at 18:15

matthewjewell

1401 silver badge9 bronze badges

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

Comments

Lian · Accepted Answer · 2012-09-07 18:08:00Z

0

You should not have an element with the same ID (your radio buttons). Also, you're getting the textbox by running document.getElementById('bus_prcode') and not the radio button. You should give a unique ID to your last radio button, e.g. btnPromotional, then bind click to it:

$("#btnPromotional").click(...)

answered Sep 7, 2012 at 18:08

Lian

2,3972 gold badges16 silver badges16 bronze badges

Collectives™ on Stack Overflow

validate field in javascript and jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related