I have 3 radio group and 6 radio buttons. During the form's submit event user should check at least one radio from different radio groups otherwise the submit event returns false but when i try to do this by using below implementation it always return false so i'am not able to post this form now. What can be the problem ?
HTML
<form id="internshipStage2Form" method="POST" action="form2.php">
<table id="companyInformation" border="1">
<tr>
<td valign="middle" align="center">
<label id="" for="">Did the engineering students work as trainees in the company in the previous years?</label>
</td>
<td valign="middle" align="center">
Yes<input class="radioInput" id="g1Positive" type="radio" name="g1" value="YES"/>
No<input class="radioInput" id="g1Negative" type="radio" name="g1" value="NO"/>
</td>
</tr>
<tr>
<td valign="middle" align="center">
<label>Are the company owners and the top managers are your relatives ?</label>
</td>
<td valign="middle" align="center">
Yes<input class="radioInput" id="g2Positive" type="radio" name="g2" value="YES"/>
No<input class="radioInput" id="g2Negative" type="radio" name="g2" value="NO"/>
</td>
</tr>
<tr>
<td valign="middle" align="center">
<label>Is the firm you declared above on this form same with the firm you intern firstly?</label>
</td>
<td valign="middle" align="center">
Yes<input class="radioInput" id="g3Positive" type="radio" name="g3" value="YES"/>
No<input class="radioInput" id="g3Negative" type="radio" name="g3" value="NO"/>
</td>
</tr>
</table>
<input id="sendButton" type="submit" name="sendButton2" value="SEND FOR APPROVEMENT"/>
</form>
JS
$('#internshipStage2Form').submit(function(){
var reqRadioFlag = 1;
$('input:radio').each(function(){
if(!$(this).is(':checked')){
reqRadioFlag = 0;
return false;
}
});
if(reqRadioFlag === 0){
alert("Please fill all requiredd areas !");
return false;
}
});
Try this
$('#internshipStage2Form').submit(function(event){
if($('input:radio:checked').length < 3)
{
alert("Please fill all requiredd areas !");
return false;
}
});
DEMO
You can check if every group is checked:
if ($('input[name=g1]:checked').length && $('input[name=g2]:checked').length && $('input[name=g3]:checked').length) //do submit
or check if there are 3 radio checked
if ($('input:checked').length == 3) //do submit
You can try this
$('table#companyInformation tr').each(function(){
var elem =$(this).children("td").eq(1);
if(!elem.find("input:radio:checked").length){
reqRadioFlag = 0;
return false;
}
});
DEMO
Not sure why Hiral deleted their answer, considering it's the most correct.
<input type="radio" required />
So long as just one of the radio buttons in the set has this attribute, the user will be required to select any one of the radio button set. It's a little weird, but I can promise you it works.
HTML5 validation is far more reliable than jQuery because it doesn't rely on you at all. We make mistakes in code and that breaks things, but with required it doesn't matter. It will even work if the user disables JavaScript ;)
Of course, as always, be sure to validate server-side!
Related
I have this form, I try to add the radio button in the form to disable another text field it but doesn't work, what I try to achieve is whenever I click the radio button it disabled another text field, and when I load the form for the first time both text fields enables even though the radio button is checked.
the HTML:
<tr class="font10black">
<td>Nama Merchant</td>
<td>:</td>
<td>
<input onclick="RadioButton()" type="radio" name="type" checked="checked">
<input type="text" name="txtNamaMerchant" id="merchant" size="50" maxlength="100" onChange="UpperCaseNM()" value="<%=strNamaMerchant%>">
</td>
</tr>
<tr class="font10black">
<td>Nama Pemilik</td>
<td>:</td>
<td>
<input onclick="RadioButton()" type="radio" name="type">
<input type="text" name="txtNamaPemilik" id="pemilik" size="50" maxlength="100" onChange="UpperCaseNP()" value="<%=strNamaPemilik%>">
</td>
</tr>
The JavaScript function
function RadioButton() {
if (document.getElementById('merchant').checked) {
document.getElementById('pemilik').disabled = true;
}
}
Any suggestion?
You need to provide an id to the 2nd radio button (eg. "pemilik-radio"), then need to check for both condition checked and unchecked to disable the input text fields accordingly.
const merchantRadio = document.getElementById('pemilik-radio');
const pemilikInput = document.getElementById('pemilik');
const merchantInput = document.getElementById('merchant');
pemilikInput.disabled = true;
function RadioButton() {
if (merchantRadio.checked) {
merchantInput.disabled = true;
pemilikInput.disabled = false;
} else {
pemilikInput.disabled = true;
merchantInput.disabled = false;
}
}
<html>
<head></head>
<body>
<table>
<tr class="font10black">
<td>Nama Merchant</td>
<td>:</td>
<td>
<input onclick="RadioButton()" type="radio" name="type" checked="checked">
<input type="text" name="txtNamaMerchant" id="merchant" size="50" maxlength="100" onChange="UpperCaseNM()"
value="<%=strNamaMerchant%>">
</td>
</tr>
<tr class="font10black">
<td>Nama Pemilik</td>
<td>:</td>
<td>
<input onclick="RadioButton()" id="pemilik-radio" type="radio" name="type">
<input type="text" name="txtNamaPemilik" id="pemilik" size="50" maxlength="100" onChange="UpperCaseNP()"
value="<%=strNamaPemilik%>">
</td>
</tr>
</table>
</body>
</html>
You need to set id for both radio and textbox and in your function enable the corresponding textbox and disable the other textbox.
Try this one:
function RadioButton() {
if (document.getElementById('merchantRadio').checked) {
document.getElementById('pemilik').disabled = true;
document.getElementById('merchant').disabled = false;
}
else if (document.getElementById('pemilikRadio').checked) {
document.getElementById('merchant').disabled = true;
document.getElementById('pemilik').disabled = false;
}
}
<table>
<tr class="font10black">
<td>Nama Merchant</td>
<td>:</td>
<td>
<input onclick="RadioButton()" type="radio" id="merchantRadio" name="type" checked="checked">
<input type="text" name="txtNamaMerchant" id="merchant" size="50" maxlength="100" onChange="UpperCaseNM()" value="<%=strNamaMerchant%>">
</td>
</tr>
<tr class="font10black">
<td>Nama Pemilik</td>
<td>:</td>
<td>
<input onclick="RadioButton()" type="radio" id="pemilikRadio" name="type">
<input type="text" name="txtNamaPemilik" id="pemilik" size="50" maxlength="100" onChange="UpperCaseNP()" value="<%=strNamaPemilik%>">
</td>
</tr>
</table>
You need to set the ID for the radio button so that you can check it in your Javascript, like so:
<input id="radio_btn_1" onclick="RadioButton()" type="radio" name="type">
Edit:
What I am meaning is trying something like this:
<tr class="font10black">
<td>Nama Merchant</td>
<td>:</td>
<td>
<input id="radio_btn_1" onclick="RadioButton()" type="radio" name="type" checked="checked">
<input type="text" name="txtNamaMerchant" id="merchant" size="50" maxlength="100" onChange="UpperCaseNM()" value="<%=strNamaMerchant%>">
</td>
</tr>
<tr class="font10black">
<td>Nama Pemilik</td>
<td>:</td>
<td>
<input onclick="RadioButton()" type="radio" name="type">
<input id="radio_btn_1" type="text" name="txtNamaPemilik" id="pemilik" size="50" maxlength="100" onChange="UpperCaseNP()" value="<%=strNamaPemilik%>">
</td>
</tr>
Then JS:
function RadioButton() {
// If the first radiobutton is checked
if (document.getElementById('radio_btn_1').checked) {
// Then get the text field by the id merchant and disable
document.getElementById('merchant').disabled = true;
}
// If the second radio button is checked
if (document.getElementById('radio_btn_2').checked) {
// Then get the text field by the id pemilik and disable
document.getElementById('pemilik').disabled = true;
}
}
You need to set ID's for the radio buttons and when a specific radio button is clicked (and thus calls your JavaScript function), in JavaScript you have to get to get the text box element by it's ID then disable that.
Your JS isn't really checking the radio buttons. It's checking the textfield, because the id="merchant" is attached to the textfield. So in essence your RadioButton() function isn't doing anything, really.
Solution:
(You can also view on codepen: https://codepen.io/jennift/pen/GRmZrep)
First, if you want to disable the second text field, you can do so via js on page load.
I have used the onchange on the radio buttons to pass value so there aren't too many ifs or else ifs in JS to check which radio buttons are checked.
Then, on selecting the respective radio buttons, all fields will be disabled, then turn the selected one back on. Feel free to use a for loop to select all the text fields if you are up for it.
HTML:
<tr class="font10black">
<td>
Nama Merchant :
</td>
<td>
<input onchange="RadioButton('merchant')" type="radio" name="thetype" checked="checked">
<input type="text" name="txtNamaMerchant" id="merchant" size="50" maxlength="100" onChange="UpperCaseNM()" value="<%=strNamaMerchant%>a">
</td>
</tr>
<br>
<tr class="font10black">
<td>
Nama Pemilik :
</td>
<td>
<input onchange="RadioButton('pemilik')" type="radio" name="thetype">
<input type="text" name="txtNamaPemilik" id="pemilik" size="50" maxlength="100" onChange="UpperCaseNP()" value="<%=strNamaPemilik%>">
</td>
</tr>
JS:
//disable second text field on load
document.getElementById("pemilik").disabled = true;
function RadioButton(name) {
//whichever radio button you select
var x = document.getElementById(name);
//disable all text field
document.getElementById("merchant").disabled = true;
document.getElementById("pemilik").disabled = true;
//enable the selected field back on
x.disabled = false;
}
Revised Question:
How can you display the text entered into an html text field in JavaScript?
https://jsfiddle.net/bjc7em1w/
<tr>
<td id="number1"> (1)</td>
<td> <input type="radio" name="radio1" id="standardA1"> </td>
<td> <input type="radio" name="radio1" id="standardI1"> </td>
<td id="standard1">Describe the reason for the development of
the plan and its annexes.</td>
<td> <input type="text" id="comments1"> </td>
</tr>
Since the discription of the problem was rather confusing to read, I will answer just the question:
var text = document.querySelector("#textbox").value;
alert("The textbox value is: " + text);
If you have any questions about this or want me to elaborate please say so.
If I understand correctly, you are looking to add feedback messages related to your form. You can add an empty span tag to the section where you want the message to display and call it on blur.
For example, add something like:
<tr>
<td id="number1"> (1)</td>
<td> <input type="radio" name="radio1" id="standardA1"> </td>
<td> <input type="radio" name="radio1" id="standardI1"> </td>
<td id="standard1">Describe the reason for the development of the
plan and its annexes.</td>
<td> <input type="text" id="comments1" onblur="message()">
<span class="message" id="message"></span>
</td>
</tr>
When the user leaves the section calling onblur, the message can be called like this:
function message() {
document.getElementById("message").innerHTML = "message written here";
}
You can add functionality to determine when and how the message is shown.
I'm making a form asking users about a tournament. I need to limit each placement to only having one team and vise versa. I have the latter figured out already. But I'm having trouble thinking of a way to further validate the radio buttons. The set is in a 4x4 grid and each column and row should only have one value. I can get the teams validation to work by naming the buttons the same but I can't find a way to validate the placement. I had a way to validate checkboxes but I need to use radio buttons so I can have what order users place each checked box so I can read what teams are placed in 1st and 2nd in each group.
The way the teams, placement, and button are laid out is within a table.
<form>
<table class="groupSeating" cellspacing="2">
<caption>Group Seating</caption>
<colgroup>
<col class="groups" />
<col class="teams" />
<col class="seating" span="4" />
</colgroup>
<tr>
<th rowspan="2" colspan="2"></th>
<th colspan="4">Seating</th>
</tr>
<tr>
<td>1st</td>
<td>2nd</td>
<td>3rd</td>
<td>4th</td>
</tr>
<tr>
<td rowspan="4">Group A</td>
<td>ROX Tigers</td>
<td>
<input type="radio" name="roxSeed" id="ROX1" value="ROX" />
</td>
<td>
<input type="radio" name="roxSeed" id="ROX2" value="ROX" />
</td>
<td>
<input type="radio" name="roxSeed" id="ROX3" value="ROX" />
</td>
<td>
<input type="radio" name="roxSeed" id="ROX4" value="ROX" />
</td>
</tr>
<tr>
<td>G2 Esports</td>
<td>
<input type="radio" name="g2Seed" id="G21" value="G2" />
</td>
<td>
<input type="radio" name="g2Seed" id="G22" value="G2" />
</td>
<td>
<input type="radio" name="g2Seed" id="G23" value="G2" />
</td>
<td>
<input type="radio" name="g2Seed" id="G24" value="G2" />
</td>
</tr>
<tr>
<td>Counter Logic Gaming</td>
<td>
<input type="radio" name="clgSeed" id="CLG1" value="CLG" />
</td>
<td>
<input type="radio" name="clgSeed" id="CLG2" value="CLG" />
</td>
<td>
<input type="radio" name="clgSeed" id="CLG3" value="CLG" />
</td>
<td>
<input type="radio" name="clgSeed" id="CLG4" value="CLG" />
</td>
</tr>
<tr>
<td>Albux Nox Luna</td>
<td>
<input type="radio" name="anxSeed" id="ANX1" value="ANX" />
</td>
<td>
<input type="radio" name="anxSeed" id="ANX2" value="ANX" />
</td>
<td>
<input type="radio" name="anxSeed" id="ANX3" value="ANX" />
</td>
<td>
<input type="radio" name="anxSeed" id="ANX4" value="ANX" />
</td>
</tr>
</table>
</form>
There is probably a cleaner way for my code but I'm not worried about that, it's for a school project. I tried taking bits from another js that was for checkboxes but I can't think of what to change.
var limit = 2;
$('input.singleCheckbox').on('change', function(evt) {
if ($(this).siblings(':checked').length >= limit) {
this.checked = false;
}
});
Is this what you're looking for?
https://jsfiddle.net/277uu501/2/
var reject = false;
$('input[type="radio"]')
.mouseup(function(){
var selectedValues = [];
$('input[type="radio"]:checked').each(function(){
selectedValues.push($(this).parent().index());
});
var selectedValue = $(this).parent().index();
reject = selectedValues.indexOf(selectedValue) != -1;
})
.change(function(){
if(reject) this.checked = false;
});
It seems I got the idea.
Try this JS code:
$('input').on('change', function() {
var initiator = $(this);
var value = initiator.val();
var counter = 0;
$('input:checked').each(function(i, elem) {
if (elem.value === value) {
counter++;
}
});
if (counter > 1) {
initiator.prop('checked', false);
}
});
It won't allow to check more than one radio button on the row/column
Other than following somebody else example and trying to suit it to my needs I know zero javascript. That's why this is such a hard fight for me else I'd just do it in PHP but PHP can't interact with elements in the document. =(
I recreated my problem in a jsfiddle --> http://jsfiddle.net/Handler/baz19g8y/
All my select and input fields have the same class name. And then based up on which radio button is selected the all the fields become editable.
Here's the HTML:
<form action="" method='post'>
<table class="mgmtchg">
<tr>
<th>Management Role</th>
<th>Name</th>
<th>Email address</th>
<th>Phone</th>
<th> Update</th>
<th> Delete</th>
</tr>
<tr>
<td class="mgmttd">
<select name="mgmt-role-0" class="mgmt-0 form-field role-drop" disabled>
<option value="mgmt0" selected>Head Coach</option>
<option value="mgmt1">Assistance Coach</option>
<option value="mgmt2">Team Manager</option>
</select>
</td>
<td class="mgmttd">
<input type="hidden" name="mgmt-id-0" value="25" />
<input type="hidden" name="team-id-0" value="11" />
<input type="text" name="mgmt-name-0" class="mgmt-0 form-field mgmt-name-field" disabled value="Ed Frederickson" />
</td>
<td class="mgmttd">
<input type="text" name="email-0" class="mgmt-0 form-field mgmt-email-field" disabled value="tealfred#sbcglobal.net" />
</td>
<td class="mgmttd">
<input type="text" name="phone-0" class="mgmt-0 form-field mgmt-phone-field" disabled value="317-987-3095" />
</td>
<td class="mgmttd">
<div class="chgradio">
<input type="radio" name="utype0" value="upd-0" id="mgmtupdate-0" class="css-radiobox">
<label for="mgmtupdate-0" class="css-label radGroup2"></label>
</div>
</td>
<td class="mgmttd">
<div class="chgradio">
<input type="radio" name="utype0" value="del-0" id="mgmtdelete-0" class="css-radiobox">
<label for="mgmtdelete-0" class="css-label radGroup2"></label>
</div>
</td>
</tr>
</table>
</form>
And this is the javascript I'm attempting to use which of course can be found in the jsfiddle link in the beginning of this post:
document.getElementById('mgmtupdate-0').onchange = displayTextBox;
document.getElementById('mgmtdelete-0').onchange = displayTextBox;
var textBox = document.getElementsByClassName('mgmt-0');
function displayTextBox(evt) {
console.log(evt.target.value)
if (evt.target.value == "upd-0") {
textBox.disabled = false;
} else {
textBox.disabled = true;
}
}
I'd like to learn javascript but it seems so intimidating and overly wordy!
I hope somebody can help!
Thanks so much in advance!
getElementsByClassName returns a collection. textBox.disabled is not a function of the collection. you'd rather loop through the collection:
textboxes = document.getElementsByClassName('mgmt-0');
for(var i=0; i< textboxes.length; i++) {
textboxes[i].removeAttribute("disabled")
}
I have a multiple choice questionnaire with five questions on my html page. Each question uses radio buttons for user to select one of five answers. I want to check that the user has selected one of those five radio buttons before allowing them to go to another page. A PHP page sends the answer to my database. If the user misses checking one of the answers, none of the answers go into the database.
I think I'm looking for some java script that will loop through each of the possible five answers to check at the form submit whether the user has checked one radio button before allowing them to proceed to the next page. Thanks for your help.
My html code for just two of the questions looks like this:
<tr> <td> Question 1. </td>
<td align="center"> <input type="radio" name="q1" value="0" /></td>
<td align="center"> <input type="radio" name="q1" value="1" /> </td>
<td align="center"> <input type="radio" name="q1" value="2" /> </td>
<td align="center"> <input type="radio" name="q1" value="3" /> </td>
<td align="center"> <input type ="radio" name="q1" value="4" /> </td>
</tr>
<tr> <td> Question 2. </td>
<td align="center"><input type="radio" name="q2" value="0"/></td>
<td align="center"> <input type="radio" name="q2" value="1"/> </td>
<td align="center"> <input type="radio" name="q2" value="2"/> </td>
<td align="center"> <input type="radio" name="q2" value="3"/> </td>
<td align="center"> <input type ="radio" name="q2" value= "4"/> </td> </tr>
Consider the following example..And do the changes in your code.....
You can call a js function(using onsubmit()). Like this
<form id="ID" method="post" action="servletName" onSubmit="return validateOption()">
<input type=radio name=r1 value="1" >A</input>
<input type=radio name=r1 value="2">B</input>
<input type="submit" value="Submit"><span id="error" style="display:none;"></span>
</form>
Your script goes here to validate whether option selected or not,Submission of page is possible only if onsubmit=true ie if validateOption() returns true.
<script>
function validateOption()
{
var group=document.getElementsByName("r1");
for ( var i = 0; i < group.length; i++)
{
if (group[i].checked)
return true;
}
// else you can show error message like this
document.getElementById("error").innerHTML="Please enter your choice";
return false;
}
</script>