Basically, I have two radio button 'yes' and 'no' and then a further two input fields.
[LabelQuestion] [RadioYes][RadioNo]
If yes, then... [TextField1]
If no, then... [TextField2]
By default I would like to have text fields 1 and 2 inactive/not able to enter in data until the relevant radio button has been selected and then that field only becomes available for data input.
I am a complete novice but I imagine this is achievable by using CSS and/or JavaScript. Please bear in mind I have next to know knowledge of JavaScript but can logically alter pre-existing JS code.
My current code looks like this:
<div class='conlabel'>Have you started trading yet?</div>
<table width="100">
<tr>
<td><label>
<input type="radio" name="example" value="Yes" id="example_0" required/>
Yes</label></td>
</tr>
<tr>
<td><label>
<input type="radio" name="example" value="No" id="example_1" required/>
No</label></td>
</tr>
</table>
<li>
<div class='conlabel'>If Yes, then:</div>
<input type="text" name="field1" placeholder="" />
</li><br>
<div class='conlabel'>If No, then:</div>
<input type="text" name="field2" placeholder="" />
</li><br>
How about this little number:
$(function(){
$("#example_0, #example_1").change(function(){
$("#field1, #field2").val("").attr("readonly",true);
if($("#example_0").is(":checked")){
$("#field1").removeAttr("readonly");
$("#field1").focus();
}
else if($("#example_1").is(":checked")){
$("#field2").removeAttr("readonly");
$("#field2").focus();
}
});
});
You'll find a JSFiddle here.
Please note I've added an ID to both <input> fields. Let me know how it fairs.
If you prefer for the <input> fields to be disabled rather than readonly, just replace readonly with disabled everywhere. I personally think readonly is nicer as the Operating System seems to make more of it's own effect on disabled inputs.
The focus(), of course, isn't necessary - But the little things make a big difference and I always prefer it when a website moves my cursor to where it's expected to be for me.
You could use http://jquery.com/ to do this:
include this in the head of your html:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
And also add this javascript:
<script type="text/javascript">
$(document).ready(function () {
function checkradiobox(){
var radio = $("input[name='example']:checked").val();
$('#field1, #field2').attr('disabled',true);
if(radio == "Yes"){
$('#field1').attr('disabled',false);
$("#field1").focus();
}else if(radio == "No"){
$('#field2').attr('disabled',false);
$("#field2").focus();
}
}
$("#example_0, #example_1").change(function () {
checkradiobox();
});
checkradiobox();
});
</script>
Check the jsfiddle for a working example http://jsfiddle.net/KFgbg/3/
Add this javascript/jQuery to your html, this should do the trick:
<script type="text/javascript">
$(function () {
// First add disabled properties to inputs
$("input:text").prop('disabled', true);
// Yes Input
$("#example_0").on("click", function () {
$("#input1").prop('disabled', false);
$("#input2").prop('disabled', true);
});
// No Input
$("#example_1").on("click", function () {
$("#input2").prop('disabled', false);
$("#input1").prop('disabled', true);
});
});
</script>
Very basic, just adds an onclick function to each of the inputs and enables or disables the 'disabled' property for the relevant text input. You will need to add the "#input1" and "#input2" ID's to the text inputs, naming can be as desired obviously.
<div class='conlabel'>Have you started trading yet?</div>
<table width="100">
<tr>
<td><label>
<input onclick="document.getElementById('field1').disabled=false;document.getElementById('field2').disabled=true;"" type="radio" name="example" value="Yes" id="example_0" required/>
Yes</label></td>
</tr>
<tr>
<td><label>
<input onclick="document.getElementById('field1').disabled=true;document.getElementById('field2').disabled=false;" type="radio" name="example" value="No" id="example_1" required/>
No</label></td>
</tr>
</table>
<li>
<div class='conlabel'>If Yes, then:</div>
<input type="text" id="field1" name="field1" placeholder="" disabled="true" />
</li><br>
<div class='conlabel'>If No, then:</div>
<input type="text" id="field2" name="field2" placeholder="" disabled="true" />
there are many ways to do this, but to edit your code as little as possible, here's one way:
give your textboxes ID attributes as well as names
disable via html attribute both text boxes to start
onclick of 'yes' radio button, enable field1 and disable field2
onclick of 'no' radio button, disable field1 and enable field2
<script language="Javascript">
function hideA()
{
document.getElementById("A").style.visibility="hidden";
document.getElementById("B").style.visibility="visible";
}
function hideB()
{
document.getElementById("B").style.visibility="hidden";
document.getElementById("A").style.visibility="visible";
}
</script>
</head>
<body>
<form name="f1" method="post" action="">
<table>
<tr><th>catagory</th><th><input type="radio" name="cat" value="seller"
onClick="hideB()">Seller
<input type="radio" name="cat" value="buyer" onclick="hideA()"> buyer</th>
</tr>
<div style="position: absolute; left: 30px; top: 100px;visibility:hidden" id="A">
Seller Name<input type='text' name='sname'><br>
Seller Product<input type='text' name='sproduct'>
</div>
<div style="position: absolute; left: 30px; top: 100px; visibility:hidden" id="B">
Buyer Name<input type='text' name='bname'><br>
Buy Product<input type='text' name='bproduct'>
</div>
</form>
Related
I face problem with reset value to empty with jquery when click radio button.
<form id="my-form">
<div>
<label for="name">Name</label>
<input type="text" id="name" name="name" value="123" />
</div>
<div>
<label for="ID">ID NO</label>
<input type="text" id="ID" name="ID" value="NO21034" />
</div>
<fieldset>
<legend>Option</legend>
<label for="clearID">clearID</label> <input type="radio" id="clearID" name="opt" checked />
<label for="clearName">clearName</label> <input type="radio" id="clearName" name="opt" />
</fieldset>
</form>
<script type="text/javascript">
$(document).ready(function()
{
$('#clearname').on('click', function()
{
$('#my-form').find('input:text').val('');
});
});
</script>
now if my radio button click clearName,it will automatic clear the value of name and id.
is it having another code can replace find('input:text') ?I want to clear either one value(name or id),not both.
Clear each field using corresponding id..
<script type="text/javascript">
$(document).ready(function()
{
$('#clearname').on('click', function()
{
$('#ID').val('');//it clears the value of element having id='ID'
$('#name').val('');//it clears the value of element having id='name'
});
});
</script>
use javascript reset method
$('#clearname').on('click', function()
{
$("#my-form")[0].reset()
// or
$("#my-form").get(0).reset()
});
I am trying to create a drop down menu that allows a user to select which area they would like to login to. Currently, the drop down feature works and hides whichever areas the user is not logging into and shows only the area that they have selected. Using just the form without the dropdown works great and opens a new window while also logging the user in to the system.
However, when I add the dropdown menu and surround the form in tags, it allows me to enter the data but does not process the data.
If possible I would also like to have the form open a new tab in the current browser window(not in a completely new window).
-I cannot change the forms at all besides things that won't matter because they have been given to me from an external source.
Here is my code:
$(document).ready(function() {
toggleFields(); //call this first so we start out with the correct visibility depending on the selected form values
//this will call our toggleFields function every time the selection value of our repository field changes
$("#member").change(function() {
toggleFields();
});
});
//this toggles the visibility of the 3 different forms depending on which repository the user is logging into.
function toggleFields() {
if ($("#member").val() == 1)
$("#depo").show();
else
$("#depo").hide();
if ($("#member").val() == 2)
$("#records").show();
else
$("#records").hide();
if ($("#member").val() == 3)
$("#reporter").show();
else
$("#reporter").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="member" name="member">
<option value="0">---</option>
<option value="1">Deposition Repository</option>
<option value="2">Records Repository</option>
<option value="3">Reporter Area</option>
</select>
<div id="depo">
<p>Login to Access your Deposition Repository</p>
<p>
<script type="text/javascript" src="http://clients.texasdepos.com/rbweb/library/js/W0_0000_PTA.js"></script>
<form name="frmrbwebattorney" method="post" action="http://clients.texasdepos.com/rbweb/attorney/WC_00LG_PTA.asp">
User ID:
<input type="text" name="rbwebuserid" style="width:130px;" value="" maxlength=30>Password:
<input type="password" name="rbwebpassword" style="width:130px;" value="" maxlength=65 onkeypress="javascript:if(event.keyCode ==13) login(document.frmrbwebattorney,1);">
<INPUT type="button" value="Log In" style="font-size:11px;" style="width:64px" onclick="javascript:login(document.frmrbwebattorney,1);" id=btnptarbweb name=btnptarbweb>
<INPUT type="hidden" name="appname" value="">
<INPUT type="hidden" name="os" value="">
</form>
</p>
</div>
<div id="records">
<p>Login to Access your Records Repository.</p>
<p>
<script type="text/javascript" src="http://clients.texasdepos.com/mrweb8/library/js/W0_0000_PTA.js"></script>
<form name="frmrbwebattorney" method="post" action="http://clients.texasdepos.com/mrweb8/WC_00LG_PTA.asp">
User ID:
<input type="text" name="rbwebuserid" style="width:130px;" value="" maxlength=16>Password:
<input type="password" name="rbwebpassword" style="width:130px;" value="" maxlength=65 onkeypress="javascript:if(event.keyCode ==13) login(document.frmrbwebattorney,1);">
<INPUT type="button" value="Log In" style="font-size:11px;" style="width:64px" onclick="javascript:login(document.frmrbwebattorney,1);" id=btnptarbweb name=btnptarbweb>
<INPUT type="hidden" name="appname" value="">
<INPUT type="hidden" name="os" value="">
</form>
</p>
</div>
<div id="reporter">
<p>Login to the Reporter Area.</p>
<p>
<script type="text/javascript" src="http://clients.texasdepos.com/rbweb/library/js/W0_0000_PTA.js"></script>
<form name="frmrbwebreporter" method="post" action="http://clients.texasdepos.com/rbweb/reporter/WR_00LG_PTA.asp">
User ID:
<input type="text" name="rbwebuserid" style="width:130px;" value="" maxlength=16>Password:
<input type="password" name="rbwebpassword" style="width:130px;" value="" maxlength=65 onkeypress="javascript:if(event.keyCode ==13) login(document.frmrbwebreporter,1);">
<INPUT type="button" value="Log In" style="font-size:11px;" style="width:64px" onclick="javascript:login(document.frmrbwebreporter,1);" id=btnptarbweb name=btnptarbweb>
<INPUT type="hidden" name="appname" value="">
<INPUT type="hidden" name="os" value="">
</form>
</p>
</div>
Any help will be greatly appreciated!
There's a few problems with your code that can each individually cause issues like this.
The fact that you have duplicate names and ids are your primary issues. I.e. you have 3 forms named frmrbwebattorney and all your submit buttons are id'ed btnptarbweb. When you call document.frmrbwebattorney, it is likely getting the wrong form.
Simple solution: replace your <input type="button" ...> with <input type="submit" ...> and remove the onclick from them. Thus your buttons will look like:
<input type="button"
value="Log In"
style="font-size:11px; width:64px"
id="something-unique"
name="btnptarbweb" />
Also note: you can't have multiple style attributes. I combined them into one.
Instead of the onclick attribute with the javascript code change the button type to submit. That will work.
I want to make my textboxes to be disable onload of the page and enable it when the coresponding checkbox is checked..the textbox wil only enable if the coresponding checkbox..how can i do this..below is my html code..i need a javascript to run the function i want..
<html>
<head>
</head>
<body>
<form name="f1" action="showReceipt.php" method="POST">
<table >
<tr><td>Transaction ID <input type="text" name="txtID"> <?php echo date("m / d / Y");?></td></tr>
<tr><td><h2>Your Order:</h2></td></tr>
<tr><td><input type="checkbox" name="cbItem[]" value="Chicken Joy"> Chicken Joy (PhP 90.00)</td> <td>Quantity <input type="text" name="txtQty[Chicken Joy]"></td></tr>
<tr><td><input type="checkbox" name="cbItem[]" value="Jolly Spaghetti"> Jolly Spaghetti (PhP 50.00)</td> <td>Quantity <input type="text" name="txtQty[Jolly Spaghetti]"></td></tr>
<tr><td><input type="checkbox" name="cbItem[]" value="Yum Burger"> Yum Burger (PhP 29.00)</td> <td>Quantity <input type="text" name="txtQty[Yum Burger]"></td></tr>
<tr><td><input type="checkbox" name="cbItem[]" value="Jolly Twirls"> Jolly Twirls (PhP 25.00)</td> <td>Quantity <input type="text" name="txtQty[Jolly Twirls]"></td></tr>
<tr><td><input type="checkbox" name="cbItem[]" value="Big Champ"> Big Champ (PhP 120.00)</td> <td>Quantity <input type="text" name="txtQty[Big Champ]"></td></tr>
<tr><td>Amount Given: <input type="text" name="txtAmount"></td> <td><input type="submit" name="btnGen" value="Generate Receipt"> <input type="reset" value="Clear">
</table>
</form>
</body>
</html>
document.addEventListener("DOMContentLoaded", function(event) {
var textbox = document.getElementById("mybox");
textbox.setAttribute("disabled", "disabled");
document.getElementById("checkMe").addEventListener("click", function(event) {
var textbox = document.getElementById("mybox");
textbox.removeAttribute("disabled");
});
});
<input type="checkbox" id="checkMe" />
<input type="text" id="mybox" />
You can try execute each process with Events. When the page is finished loading all elements, set the attribute of the box to disabled. then listen for another event of clicking a checkbox. when that event fires, remove the checkbox's disabled state.
If you want to disable your input from start, your input should look like this
<input type = "Text" name = "firstname" id="1" disabled="disabled" />
Or if you want to disable it with javascript, you have to execute it on load. Something like this:
window.onload = function() {
document.getElementById('1').disabled = true;
};
This question already has answers here:
JavaScript Query - Using AND & OR with Radios, Checkboxes and Text Fields to enable form elements
(3 answers)
Closed 9 years ago.
Please see the JSFiddle code I already have. My issue is that I require to use a radio check AND a text entry into a text field to enable other radios, checkboxes and text fields. So far I have only managed to enable radios, checkboxes and text fields using radio option 1 OR radio option 2.
This JSFiddle might help you guys out and give you a greater understanding of what I mean.
HTML:
<div class='conlabel'>Have you started trading yet?</div>
<table width="100">
<tr>
<td><label>
<input type="radio" name="example" value="Yes" id="example_0" required />
Yes</label></td>
</tr>
<tr>
<td><label>
<input type="radio" name="example" value="No" id="example_1" required />
No</label></td>
</tr>
</table><br>
<li>
<div class='conlabel'>If Yes, enter trading name:</div>
<input type="text" id="field1" name="field1" placeholder="" disabled />
</li><br>
<li>
<div class='conlabel'>If No, then:</div>
<input type="text" id="field2" name="field2" placeholder="" disabled />
</li><br>
<li>
<div class='conlabel'>Enter trading start date (enabled when started trading yet = yes + trading name = notnull:</div>
<input type="text" id="field3" name="field3" placeholder="" disabled />
</li><br>
JS:
$(function(){
$("#example_0, #example_1").change(function(){
$("#field1, #field2").val("").attr("disabled",true);
if($("#example_0").is(":checked")){
$("#field1").removeAttr("disabled");
$("#field1").focus();
}
else if($("#example_1").is(":checked")){
$("#field2").removeAttr("disabled");
$("#field2").focus();
}
});
});
In this example the code currently enables and focuses on either field1 OR field2 depending on whether they section radio-example_0 or example_1. What I have not been able to figure out is if they select Yes (example_0) and then enter a trading name in field1 how then to enable field3.
Hope this is clearer than my last attempt. Thanks for your help! (:
Answer: Kindly donated by Daniel V.
$(function(){
$("#example_0, #example_1").change(function(){
$("#field1, #field2").val("").attr("disabled",true);
if($("#example_0").is(":checked")){
$("#field1").removeAttr("disabled");
$("#field1").focus();
}
else if($("#example_1").is(":checked")){
$("#field2").removeAttr("disabled");
$("#field2").focus();
}
});
});
$("#field1").blur(function(){
if($("#example_0").is(":checked")){
if($("#field1").val()!==""){
$("#field3").removeAttr("disabled");
}
}
});
Yes, you can make a selector that looks for the checked checkbox and a non-empty text box:
if ($('#example1:checked,#textfield1[value!=""]').length == 2) {
Demo: http://jsfiddle.net/Guffa/rQKRH/
Edit:
With that HTML code you can use this to determine if the text box should be enabled:
var enable = $('#example_0').is(':checked') && $('#field1').val() != '';
Demo: http://jsfiddle.net/Guffa/cEaeK/18/
I'm not exactly sure I'm understanding you right, but do you mean like this?
if(($("#example1").is(":checked"))&&!$('#input').val()){//do}
Demo: http://jsfiddle.net/WULPL/1/
$("#field1").blur(function(){
if($("#example_0").is(":checked")){
if($("#field1").val()!==""){
$("#field3").removeAttr("disabled");
}
}
});
Please see the JSFiddle code I already have. My issue is that I require to use a radio check AND a text entry into a text field to enable other radios, checkboxes and text fields. So far I have only managed to enable radios, checkboxes and text fields using radio option 1 OR radio option 2.
This JSFiddle might help you guys out and give you a greater understanding of what I mean.
HTML:
<div class='conlabel'>Have you started trading yet?</div>
<table width="100">
<tr>
<td><label>
<input type="radio" name="example" value="Yes" id="example_0" required />
Yes</label></td>
</tr>
<tr>
<td><label>
<input type="radio" name="example" value="No" id="example_1" required />
No</label></td>
</tr>
</table><br>
<li>
<div class='conlabel'>If Yes, enter trading name:</div>
<input type="text" id="field1" name="field1" placeholder="" disabled />
</li><br>
<li>
<div class='conlabel'>If No, then:</div>
<input type="text" id="field2" name="field2" placeholder="" disabled />
</li><br>
<li>
<div class='conlabel'>Enter trading start date (enabled when started trading yet = yes + trading name = notnull:</div>
<input type="text" id="field3" name="field3" placeholder="" disabled />
</li><br>
JS:
$(function(){
$("#example_0, #example_1").change(function(){
$("#field1, #field2").val("").attr("disabled",true);
if($("#example_0").is(":checked")){
$("#field1").removeAttr("disabled");
$("#field1").focus();
}
else if($("#example_1").is(":checked")){
$("#field2").removeAttr("disabled");
$("#field2").focus();
}
});
});
In this example the code currently enables and focuses on either field1 OR field2 depending on whether they section radio-example_0 or example_1. What I have not been able to figure out is if they select Yes (example_0) and then enter a trading name in field1 how then to enable field3.
Hope this is clearer than my last attempt. Thanks for your help! (:
you need to check the value of field1 when the cursor leaves it, try this:
$("#field1").blur(function(){
if($("#example_0").is(":checked")){
if($("#field1").val()!==""){
$("#field3").removeAttr("disabled");
}
}
});
http://jsfiddle.net/cEaeK/13/
$(function(){
$("#example_0, #example_1").change(function(){
$("#field1, #field2").val("").attr("disabled",true);
if($("#example_0").is(":checked")){
$("#field1").removeAttr("disabled");
$("#field1").focus();
}
else if($("#example_1").is(":checked")){
$("#field2").removeAttr("disabled");
$("#field2").focus();
$("#field3").val('');
$("#field3").attr("disabled",true);
}
});
$('#field1').focusout(function(){
if($('#field1').val().length!=0)
$("#field3").removeAttr("disabled");
else
{ $("#field3").val('');
$("#field3").attr("disabled",true);
}
});
});
if(($("#example0").is(":checked") && $("#field0").val().length != 0) || ($("#example1").is(":checked") && $("#field1").val().length != 0)) {
PASS!
}