I created a form which contains two Radio Buttons.
Each radio button displays a separate form, when Clicked.
When a button is un-clicked, the form disappears from view (it is not shown)
I also added a second JavaScript Function, which disables the "SUBMIT" button, if none of the radio buttons are clicked.
The program works fine..........except I have the following problems :
(a) For some reason, I am able to click BOTH radio buttons! Radio-buttons should not allow for more than one selection. But, in my form, both radio buttons are clickable
(b) the second JS function is not working; disabling the SUBMIT button is easy. But...........when I click either of the radio buttons, the SUBMIT button does not enable.
Here is the first JS function (for "hiding" the forms under each radio buttons)
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'>
</script>
<script type='text/javascript'>
function displayForm(c) {
if (c.value == "2") {
jQuery('#firstformContainer').toggle('show');
jQuery('#secondformContainer').hide();
}
if (c.value == "1") {
jQuery('#secondformContainer').toggle('show');
jQuery('#firstformContainer').hide();
}
};
</script>
And the second function, for disabling the SUBMIT button :
<script type="text/javascript">
function fCheck() {
document.my_form.submit.disabled
=!(document.my_form.formselector1.checked ||
document.my_form.formselector2.checked);
}
</script>
And here is the form :
<form name="my_form" id="my_form">
<input value="1" type="radio" name="formselector"
id="formselector1" onClick="displayForm(this); fCheck()"></input>Input
Firstname
<div style="display:none" id="firstformContainer">
<form id="firstform">
<input type="text" "16" id="firstname"
name="firstname" value="$firstname">
</form>
</div>
<br>
<br>
<input value="2" type="radio" name="formselector"
id="formselector2" onClick="displayForm(this); fCheck()">
</input>Input Surname
<div style="display:none" id="secondformContainer">
<form id="secondform">
<input type="text" id="surname" name="surname"
value="$surname">
</dd>
</form>
</div>
<br>
<input type="submit" name="submit" value="REGISTER" disabled>
</form>
What am I missing?
UPDATE
I have solved the RADIO BUTTON problem.
Now, I need to fix the second problem, with the JS function : fCheck ()
It is not working.
I have feeling it's because : I am not calling BOTH functions correctly in the ONCLICK.
<input value="1" type="radio" name="formselector" id="radio1"
onClick="displayForm(this); javascript:fCheck()"></input>
<input value="2" type="radio" name="formselector" id="radio2"
onClick="displayForm(this); javascript:fCheck()"></input>
You cannot nest forms. This makes the second radio button not inside the form and hence it allows you to select both at the same time. Rewrite your html like this
<form name="my_form" id="my_form">
<input value="1" type="radio" name="formselector" id="formselector1" onClick="displayForm(this); fCheck()"></input>
<input value="2" type="radio" name="formselector" id="formselector2" onClick="displayForm(this); fCheck()"></input>
<input type="submit" name="submit" value="REGISTER" disabled>
</form>
Input Firstname
<div style="display:none" id="firstformContainer">
<form id="firstform">
<input type="text" "16" id="firstname" name="firstname" value="$firstname">
</form>
</div>
<br>
<br>
Input Surname
<div style="display:none" id="secondformContainer">
<form id="secondform">
<input type="text" id="surname" name="surname" value="$surname">
</form>
</div>
<br>
Related
Input elements from class "flex-container" and id "launch-button" are disabled in the HTML code. I would like to enable them after the user enters the correct password in the password input field and clicks on the "ok-button". Note: I also failed to disable the required input elements using Javascript and had to disable each one individually in the HTML page. Here is a Stack Snippet of the minimum necessary code to replicate the problem:
const password = "TrustNo1";
document.getElementById("ok-button")
.addEventListener("click", function () {
if (document.getElementById("password").value == password) {
document.querySelectorAll("input[disabled]")
.forEach(input => input.disabled = false);;
}
});
<div class="space">
<div class="control-panel">
<div class="control-panel__inner">
<input type="password" name="password" id="password">
<input type="button" value="OK" id="ok-button">
<div class="check-buttons flex-container">
<input type="checkbox" class="flex-item" disabled>
<input type="checkbox" class="flex-item" disabled>
<input type="checkbox" class="flex-item" disabled>
<input type="checkbox" class="flex-item" disabled>
<input type="checkbox" class="flex-item" disabled>
<input type="checkbox" class="'flex-item" disabled>
</div>
<div class="levers flex-container">
<input type="range" class="flex-item" disabled>
<input type="range" class="flex-item" disabled>
<input type="range" class="flex-item" disabled>
<input type="range" class="flex-item" disabled>
<input type="range" class="flex-item" disabled>
</div>
<input type="button" value="Launch" id="launch-button" disabled>
</div>
</div>
</div>
Try this:
document.querySelectorAll("input:disabled")
.forEach(input => input.disabled = false);
use the :disabled selector.
EDIT:
ok, you're code should work, however, I noticed that your script tag is at the top of the page. This means the JS will run before the page is done loading.
try putting the script tag at the bottom of the body. This will make it so that all the markup is rendered before the script runs.
i got simple form what contain radio input and text input.
My goal is: check radio input when click on text input
Thanks
<div class="checkbox-wrapper">
<label for="gr_1_option_4">
<input type="radio" id="gr_1_option_4" name="group1" value="">
Sonstiges:
<input type="text" id="gr_1_option_4" name="group1"/>
</label>
</div>
You should have unique id for the input and radio then you can associate a click event in input by its id that will check radio input when click.
using jQuery
$('#gr_1_input_4').click(function(){
$('#gr_1_option_4').prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox-wrapper">
<label for="gr_1_option_4">
<input type="radio" id="gr_1_option_4" name="group1" value="">
Sonstiges:
<input type="text" id="gr_1_input_4" name="group1"/>
</label>
</div>
using JavaScript
document.getElementById('gr_1_input_4').addEventListener('click', function(){
document.getElementById("gr_1_option_4").checked = true;
});
<div class="checkbox-wrapper">
<label for="gr_1_option_4">
<input type="radio" id="gr_1_option_4" name="group1" value="">
Sonstiges:
<input type="text" id="gr_1_input_4" name="group1"/>
</label>
</div>
You can have focus event handler for input text and inside it set checked property of the radio button.
NOTE: Don't use same id for multiple html elements as it will end up with javascript / jquery not working for id oriented code. You have used gr_1_option_4 as id for both radio and text input.
$(function(){
$("input[type=text][name=group1]").on("focus", function(){
$("input[type=radio][name=group1]").prop("checked", true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox-wrapper">
<label for="gr_1_option_4">
<input type="radio" id="gr_1_option_4" name="group1" value="">
Sonstiges:
<input type="text" id="gr_1_option_4" name="group1"/>
</label>
</div>
Firstly change your Element's Id , you cant have same ids among elements.
Secondly you can add an event handler like
document.getElementById("textId").onclick = function() {myFunction()};
and define that function like
function myFunction() {
document.getElementById("radioButtonID").checked = true;
}
EDIT: I FILL THE ANSWER AND SEE THAT ALREADY SOMEONE HAD ASNWERED but i keep my answer because is not Jquery like the other
One alternative way is using prev .
$('input[type="text"]').click(function(){
$(this).prev('input[type="radio"]').prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox-wrapper">
<label for="gr_1_option_4">
<input type="radio" id="gr_1_option_4" name="group1" value="">
Sonstiges:
<input type="text" id="gr_1_input_4" name="group1"/>
</label>
</div>
Im trying to build some JS to add a date in format dd-MoN-yyyy (10-OCT-2017) when certain radios are selected and submitted. Below is a basic skeleton of my form:
<html>
<body>
<form method="post" action="https://sample.sample.com" onsubmit="return setform(this);">
<input type="hidden" name="OPT_DOWN_FREQ_DATE" value="">
<input type="radio" name="OPT_DOWN_FREQ" value="D" id="daily">
<input type="radio" name="OPT_DOWN_FREQ" value="W" id="weekly">
<input type="radio" name="OPT_DOWN_FREQ" value="B" id="biweekly">
<input type="radio" name="OPT_DOWN_FREQ" value="A" id="all">
<input type="image" src="sample.submit.button" name="submit" value="submit" class="bnt" id="subBtn"></td>
</form>
</body>
</html>
So whenever a OPT_DOWN_FREQ radio it selected, we should submit dd-MoN-yyyy to field OPT_DOWN_FREQ_DATE
Any help would be appreciated!
Add a change listener to the radio button group. From there you can add a handler to add the value of the selected radio button to the input you need it at.
Depending on how you plan to pass around the date information, you can format it before setting the radio input values, or during runtime.
A few things to note: don't forget to add your self-closing tags, and you also have a random /td lurking around there.
$(document).ready(function(){
$('input[name="OPT_DOWN_FREQ"]').change(function(){
var dateString = this.value;
// format dateString as needed, if dateString is a timestamp.
$('input[name="OPT_DOWN_FREQ_DATE"]').val(dateString); // Set the value of OPT_DOWN_FREQ_DATE
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="https://sample.sample.com" onsubmit="return setform(this);">
<input type="text" name="OPT_DOWN_FREQ_DATE" value=""/>
<input type="radio" name="OPT_DOWN_FREQ" value="D" id="daily"/>
<input type="radio" name="OPT_DOWN_FREQ" value="W" id="weekly"/>
<input type="radio" name="OPT_DOWN_FREQ" value="B" id="biweekly"/>
<input type="radio" name="OPT_DOWN_FREQ" value="A" id="all"/>
<input type="image" src="sample.submit.button" name="submit" value="submit" class="bnt" id="subBtn"/>
</form>
I made a form with two radio buttons, two textboxes and when one radio button is clicked one textbox is enable and the other one will be disable. But how to make radio button checked at the beginning before the radio button is clicked ?
Here is my code that will enable a textbox when radio button is clicked:
<input onclick="document.getElementById('agree_ad').disabled = false; document.getElementById('agree_bs').disabled = true;" type="radio" name="type1">
<input name="Agreement_ad" type="text" class="textField" placeholder="yyyy/mm/dd" id="agree_ad" />
<input onclick="document.getElementById('agree_ad').disabled = true; document.getElementById('agree_bs').disabled = false;" type="radio" name="type1" value="customurl1">
<input name="Agreement_bs" type="text" class="textField" placeholder="yyyy/mm/dd" id="agree_bs" />
What should I do to make first radio button clicked and textbox id="agree_bs" disable by default before click event is triggered.
Apply the HTML attributes checked and disabled accordingly within your markup:
<input type="radio" name="foo" checked /> <!-- this is checked -->
<input type="radio" name="foo" /> <!-- this isn't checked -->
<br>
<input type="text" disabled /> <!-- this is disabled -->
<input type="text" /> <!-- this isn't disabled -->
You do not need fancy JavaScript to do this: simply add checked to the radio button and disabled to the second text box:
<input checked onclick="document.getElementById('agree_ad').disabled = false; document.getElementById('agree_bs').disabled = true;" type="radio" name="type1">
<input name="Agreement_ad" type="text" class="textField" placeholder="yyyy/mm/dd" id="agree_ad" />
<input onclick="document.getElementById('agree_ad').disabled = true; document.getElementById('agree_bs').disabled = false;" type="radio" name="type1" value="customurl1">
<input disabled name="Agreement_bs" type="text" class="textField" placeholder="yyyy/mm/dd" id="agree_bs" />
JSFiddle
I have a series of questions which have radio answer choices. I can't figure out how to use AngularJS validation to require the user to select one before clicking "Next". Below is my code:
EDIT: Please note that clicking "Next" gets the next question node from the controller depending on what choice was made. It's basically a dynamic questionnaire.
<form novalidate>
<div class="radio" ng-repeat="answer in node.Answers">
<input type="radio" name="answerGroup" ng-model="$parent.selectedAnswer"
value="{{answer.BranchId}},{{node.LeafId}},{{answer.Id}}"/> {{answer.Text}}
</div>
<div>
<input type="button" ng-click="previous()" value="Previous"/>
<input type="button" ng-click="next(selectedAnswer)" value="Next"/>
</div>
</form>
EDIT: Here is a working fiddle
First give the form a name so that you can refer to it:
<form name="myForm" novalidate>
Next add the required attribute to the radio button:
<input type="radio" name="answerGroup" required
ng-model="$parent.selectedAnswer"
value="{{answer.BranchId}},{{node.LeafId}},{{answer.Id}}"/>
Then use ng-disabled to bind your next button's disabled property to the validity of the radio button:
<input type="button" ng-click="next(selectedAnswer)" value="Next"
ng-disabled="myform.answerGroup.$invalid" />
Look below, using ng-show to display an error message should neither radio button be clicked.
<label for="dateofbirth">
<span>Are you the primary cardholder?</span>
</label>
<ul>
<li>
<label for="yes">
<input type="radio" id="yes" name="cardholder" ng-model="user.cardholder" value="yes" required/>
Yes
</label>
</li>
<li>
<label for="no">
<input type="radio" id="no" name="cardholder" ng-model="user.cardholder" value="no" required/>
No
</label>
</li>
</ul>
</fieldset>
<span class="error" ng-show="myForm.cardholder.$error.required && submitted == true"><i class="fa fa-exclamation-circle"></i>Please select an answer.</span>