validate field in javascript and jquery - javascript

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.

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/

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(...)

Related

multiple check boxes to enable/disable just one selector in javascript

I am trying to make a selector available, only if a check box, or more than one are checked. The selector should go back to being disabled if the user unchecks all the checkboxes.
I was trying to implement my solution from this response (that it works perfect for one checkbox paired with any other selector) ; however, when I implement it like this:
$(document).ready(function(){
var enable_sel = function(){
$("#pizza_kind").prop("disabled", !$(":checkbox").prop("checked"));
};
enable_sel();
$(":checkbox").change(enable_sel);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="checkbox" id="p1" name="p1">
<input type="checkbox" id="p2" name="p2">
<input type="checkbox" id="p3" name="p3">
<select name="pizza_kind" id="pizza_kind">
<option>(choose one)</option>
<option>"Hawaian"</option>
<option>"Peperonni"</option>
<option>"Another"</option>
</select>
</form>
I got the selector disabled, but it seems that is only reacting to the first checkbox, not the rest of them.
I couldn't make this work in the javascript/html snippet, don't know why.
I am currently using Flask and jquery 3.6.0
What am I doing wrong?
When you read a prop from a collection it will only ever select the first one. It is not going to randomly pick the one you want, so you need to tell it exactly what to pick.
So select the checked checkboxes and check the length. To do this use :checked in the selector and it will pick the ones that are checked.
$(document).ready(function(){
var enable_sel = function(){
$("#pizza_kind").prop("disabled", !$(":checkbox:checked").length);
};
enable_sel();
$(":checkbox").change(enable_sel);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="checkbox" id="p1" name="p1">
<input type="checkbox" id="p2" name="p2">
<input type="checkbox" id="p3" name="p3">
<select name="pizza_kind" id="pizza_kind">
<option>(choose one)</option>
<option>"Hawaian"</option>
<option>"Peperonni"</option>
<option>"Another"</option>
</select>
</form>

selecting radio options doesnt change checked attribute

I am generating an HTML form with some radio buttons and checkboxes. the generated code for the radio buttons for instance are like these:
<input id="101_2" type="radio" name="101" value="2" >
<input id="101_3" type="radio" name="101" value="3" checked="true">
Using JavaScript I can make a for cycle to see what radio is checked using the check attribute.
The problem is that if I manually click in another radio option (from the same group as in the example), visually in the HTML I can see that another radio is selected, but the JavaScript is still saying that the input 101_3 is the selected radio option. If I look at the HTML using firebug I can see that the new selected option is indeed not selected (doesn't have the checked attribute)... despite I have selected manually.
Any ideas on this?
Fist and formost when naming your radio buttons or any type of DOM input element never start the name of an input element with a number, always start the name of your input element with a letter.
For your posted code you would name your radios in similar fashion, one01 or x101 or o101,ect...
Do the same thing with your ids' of any DOM element. Never start an id of a DOM element with a number.
--HTML
<input id="x101_2" type="radio" name="x101" value="2">
<input id="x101_3" type="radio" name="x101" value="3" checked="checked">
<br /><br />
<button type="button" onclick="WhatsChecked()">Whats Checked?</button>
--JavaScript
function WhatsChecked() {
var radCk = document.body.querySelectorAll('input[name="x101"]:checked')[0];
alert(radCk.id);
};
--Fiddler
fiddler

Auto select radio button and then submit button on page load - Javascript

I'm trying to select a radio button with an id (lets say the ID is "radio") and then automatically click a button with a type of submit inside of a form with an id of "multifee". I want these two things to automatically happen upon page load. Any suggestions on how to do this with javascript?
<form method="post" action="#" id="multifees" onsubmit="feeForm.submit(this); return false;">
<input type="radio" name="fee[1][options][]" id="radio" value="1" class="validate-one-required-by-name">
<button type="submit" class="button">Add</button>
</form>
So far I have no javascript started because I'm not even sure where to begin.
When declaring your radio button, you can add the attribute checked so that it is autoselected even when the page loads.
<input type="radio" name="fee[1][options][]" id="radio" value="1" class="validate-one-required-by-name" checked>
If you want to auto-submit, you can just make Javascript click for you.
<script type="text/javascript">
document.getElementById('sumbit').click();
</script>
If you want the script to work, you have to place the script after <body> so that the element can been loaded onto the page or else it won't know what button to look for since it may not have been loaded yet. Make sure to give your submit button an id as well.
$('#radio').check();
$('#submit').click();
EDITS: with javascript
document.getElementById('radio').checked=true;
document.getElementById("multifees").submit();
In pure Javascript try this in a window.onload handler:
document.getElementById('radio').check();
document.getElementById('submit').click();
Based on what you're asking for, there are really only a couple things you need.
A radio list which one is preselected:
<form name="thisForm" id="thisForm" method="post" action="[your destination]">
<input type="radio" name="choice1" value="choice1" checked /> choice<br />
<input type="radio" name="choice1" value="choice2"/> choice2<br />
<input type="radio" name="choice1" value="choice3"/> choice3<br />
</form>
And a Javascript function to submit the form:
<script type="text/JavaScript" language="JavaScript">
function submitForm() {
document.getElementById("thisForm").submit();
}
// submitForm();
</script>
I have the call to the function commented out on purpose, or you would throw you page into an infinite loop.
You can check the radio button (#radio) like so:
document.getElementByID("radio").checked = true;
Or actually within the html using the checked property:
<input type="radio" checked>
To auto-submit:
document.getElementsByClassName("button").click();
Or:
document.getElementByID("multifees").submit();

getting class attribute of radio button in IE

I need to get the class attribute of checked radio button, with name="radio".
Used the code that's working fine in Firefox, but fails in IE.
val = $('input:radio[name=radio]:checked').attr('class');
How can i accomplish this?
There is no psuedo-class :radio. I think you meant [type=radio].
As comments says, I think you should use type instead of name. But i think you have named your input as radio because you can find this specific input. If you just use type selector you will catch every single selected radio input on page.
<input type="radio" name="radio" class="ey" /> Male<br />
So, if your page have more forms, you should specify a parent or form to avoid conflicts. Set a id for your form and try to find it by form id and radio type like this:
<form id="myForm">
<input type="radio" name="radio" class="ey" /> Male<br />
</form>
val = $("#myform input[type='radio']:checked").attr('class');
I hope it can help you :)

How can Javascript mask whether radio button is checked?

Is it possible with Javascript to hide the checked-status of a radio button so that on a form submit the submit-request fails b/c of missing information?
For example: I have a group of radio buttons
<form action="?modul=daDaaaah&subModul=someCoolThingy" method="post">
<input type="radio" name="mygroup" id="nod_1" value="great" />
<input type="radio" name="mygroup" id="nod_2" value="greater" />
<input type="radio" name="mygroup" id="nod_3" value="awesome" />
<input type="radio" name="mygroup" id="nod_4" value="junk" />
<input type="radio" name="mygroup" id="nod_5" value="foo" />
<input type="submit" name="edit" value="Edit" />
</form>
Now I am checking the radio button with the id=1 and by submitting it (dunno whether I got the button correct, but I sorta guess it is correct) the server should get a request where it says mygroup=great (right?).
Now is there a way to have that radio button checked and hidden it at the same time?
I am asking b/c somehow a javascript I am using is supposedly hiding this status (everywhere but in IE) by somehow altering the DOM or what do I know and I can't seem to get the right request nor find the reason why or how it does it.
If I am being unclear, please say so.
EDIT: One javascript that has this effect can be found here http://www.frequency-decoder.com/demo/table-sort-revisited/js/paginate.js but others do so as well :(
EDIT: Changed ID-names. Still doesn't work.
One thing is you can not have ids that begin with a number. So your radio buttons should be something like rad1, rad2, etc.
If the radio has disabled="true" then the value will not be present in the request so you could check for that.

Categories

Resources