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;
};
Related
I use a script to toggle some div´s with javascript. I want to make some input fields "required" in the toggle div if the checkbox is checked to show the toggle div.
Can someone figure it out ? that is work?
function show(id) {
if(document.getElementById) {
var mydiv = document.getElementById(id);
mydiv.style.display = (mydiv.style.display=='block'?'none':'block');
}
}
var $myCheckbox = $('#neu_ma'),
$required = $('.required');
$myCheckbox.on('click', function() {
this.checked ? $required.prop('required', true) : $required.prop('required', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" name="berechtigungsantrag">
<fieldset>
<legend><input type="checkbox" name="neu_ma" id="neu_ma" onclick="javascript:show('neuer_mitarbeiter');"> Neuer Mitarbeiter </legend>
<div style="display: none" id="neuer_mitarbeiter">
<label for="eintritt_datum">Eintrittsdatum:</label>
<div><input type="date" name="eintritt_datum" id="eintritt_datum" class="required" /></div>
<label for="befristung_datum">Befristungsdatum:</label>
<div><input type="date" name="befristung_datum" id="befristung_datum"/></div>
</div>
</fieldset><!-- End of fieldset -->
<input class="btn" type="submit" value="Speichern" name=save />
</form>
Answer:
You're trying to listen an element id that does not exist(neu_ma) - you haven't given your checkbox an id.
<input type="checkbox" name="neu_ma" onclick="javascript:show('neuer_mitarbeiter');">
So just give it an ID:
<input type="checkbox" name="neu_ma" id="neu_ma" onclick="javascript:show('neuer_mitarbeiter');">
This is just an example how you could do it:
Add some specific class to inputs that need to be affected by the state of your checkbox.
I made an example HTML:
<form>
<input type="checkbox" id="myCheckbox" />
<input type="text" class="required" />
<input type="text" />
<input type="text" class="required" />
<button type="submit">Submit</button>
</form>
As you can see, some of the inputs have a class called "required".
Next I check checkbox status(checked or not). And depending on the result make elements with "required" class required(or not) using jQuery's prop() method.
Working example:
var $myCheckbox = $('#myCheckbox'),
$required = $('.required');
$myCheckbox.on('click', function() {
this.checked ? $required.prop('required', true) : $required.prop('required', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="checkbox" id="myCheckbox" />
<input type="text" class="required" />
<input type="text" />
<input type="text" class="required" />
<button type="submit">Submit</button>
</form>
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'm trying to get the button at the bottom to be unselectable and only selectable when you select an age group radio button. I'm not sure why but I think the function 'EnableButton' is invalid since if I remove it, the bottom button becomes unselectable, so the other function 'DisableButton' must be correct.
Can someone help to explain the problem?
var disablebutton = document.getElementById("to-enable"); // global variable
function DisableButton() { // disables 'to-enable' button
disablebutton.disabled = true;
}
DisableButton(); // runs the disable button function
function EnableButton() { // function that enables button
var ValidateAge = document.forms["registration-form"]["age"].value;
if (ValidateAge != undefined) {
disablebutton.disabled = false;
}
}
EnableButton(); // runs the enable button function
<form id="registration-form">
<input type="text" name="forename"> Forename<br>
<input type="text" name="surname"> Surname<br>
<input type="text" name="email"> Email<br>
<textarea name="address" rows="5" cols="40">Type your full address here...</textarea> Address<br><br>
Which planets have you already seen through a telescope?<br>
<input type="checkbox" name="planets" value="none">None<br>
<input type="checkbox" name="planets" value="mercury">Mercury<br>
<input type="checkbox" name="planets" value="venus">Venus<br>
<input type="checkbox" name="planets" value="mars">Mars<br>
<input type="checkbox" name="planets" value="jupiter">Jupiter<br>
<input type="checkbox" name="planets" value="saturn">Saturn<br>
<input type="checkbox" name="planets" value="usanus">Uranus<br>
<input type="checkbox" name="planets" value="neptune">Neptune<br><br>
What is your age group?<br>
<input type="radio" name="age">Under 18<br>
<input type="radio" name="age">18-30<br>
<input type="radio" name="age">30-50<br>
<input type="radio" name="age">50+<br><br>
What country are you from?
<select name="Country">
<option value="not-selected">Not Selected</option>
<option value="england">England</option>
<option value="wales">Wales</option>
<option value="scotland">Scotland</option>
<option value="northern-ireland">Northern Ireland</option>
</select>
<br><br>
</form>
<button onClick="ResetForm()">Reset</button>
<button onClick="SubmitForm()" id="submit">Submit</button>
<button id="to-enable">Select an age group to activate this button</button>
Add div on-click.
HTML
What is your age group?<br>
<div div onclick="EnableButton()" id="under18">
<input type="radio" name="age">Under 18<br>
</div>
<input type="radio" name="age">18-30<br>
<input type="radio" name="age">30-50<br>
<input type="radio" name="age">50+<br><br>
JS
function EnableButton() { // function that enables button
disablebutton.disabled = false;
}
EDIT
You need a while loop:
JS
i = 2
function EnableButton() { // function that enables button
while (i<10) {
disablebutton.disabled = false;
}}
The problem is both functions are runs immediately. So, the radio is not selected at that time. And hence it won't enable it.
You can use either eventListener on radio or an interval.
eventListener is prefered.
The code to do this is
document.querySelectorAll('input[name=age]').forEach(x => x.addEventListener('change',EnableButton));
I have 2 radio buttons. On selection of one I want to display 3 text boxes and hide it on selection of other.
Here is the code.
These are my 2 radio buttons.
<input type="radio" name="type"> Fresher
<input type="radio" name="type"> Experienced
On click of radio button experienced I want to display these 3 text box.
Company Name: <input type="text" hidden="true"/> <br/>
Designation: <input type="text" hidden="true"/> <br/>
Year_of_Experience: <input type="text" hidden="true"/> <br/>
Please help me out with javascript for this as new to it.
You could do this as follows. First change your HTML to this:
<input type="radio" name="type" value="Fresher"> Fresher
<input type="radio" name="type" value="Experienced"> Experienced
<div id="textboxes" style="display: none">
Company Name: <input type="text" hidden="true"/>
Designation: <input type="text" hidden="true"/>
Year_of_Experience: <input type="text" hidden="true"/>
</div>
What this code adds to your code is to have a value for the radio buttons. This allows us to make a selection based on which radio button was selected. Secondly, the input fields are grouped together in a <div> to allow for easy hiding of the three input fields. After you have modifief your HTML as such, include jQuery on your website and use this code:
$(function() {
$('input[name="type"]').on('click', function() {
if ($(this).val() == 'Experienced') {
$('#textboxes').show();
}
else {
$('#textboxes').hide();
}
});
});
You can see how this works using this JSFiddle: http://jsfiddle.net/pHsyj/
This is the best example.Try something like this.,this is a sort of example
$("input[type='radio']").change(function(){
if($(this).val()=="other")
{
$("#otherAnswer").show();
}
else
{
$("#otherAnswer").hide();
}
});
http://jsfiddle.net/Wc2GS/8/
I guess this would solve your probs
<input type="radio" name="type" id='frsradio'> Fresher
<input type="radio" name="type" id='expradio'> Experienced <br>
<input type="text" class='txbx' hidden="true"/> <br/>
<input type="text" class='txbx' hidden="true"/> <br/>
<input type="text" class='txbx' hidden="true"/> <br/>
$(function() {
$('#expradio').click(function() {
$('.txbx').attr('hidden',false);
});
$('#frsradio').click(function() {
$('.txbx').attr('hidden',true);
});
});
WORKING jsfiddle
See there is no unique identity available for your html elements, i just given this code by thinking in a generic manner.
Try,
$('input[name="type"]:eq(1)').change(function(){
$('input[type="text"]').toggle(this.checked);
});
<input type="radio" name="type" onClick ="radio"> Fresher
<input type="radio" name="type" onClick ="radio"> Experienced
on click of radio button experienced i want to display these 3 text box.
<input type="text" hidden="true" class="text"/> <br/>
<input type="text" hidden="true" class="text"/> <br/>
<input type="text" hidden="true" class="text"/> <br/>
and javascript:-
<script>
function radio()
{
var result = document.getElementsByClassName('text'").style.display="none";
}
</script>
Try this
<input type="radio" name="type" value="fresher"> Fresher
<input type="radio" name="type" value="exp"> Experienced
<br/>
<input class="box" type="text" hidden="true"/> <br/>
<input class="box" type="text" hidden="true"/> <br/>
<input class="box" type="text" hidden="true"/> <br/>
Script
$("input[type='radio']").on('change',function(){
if($(this).val() == "exp")
$('.box').show('slow');
else
$('.box').hide();
});
DEMO
Try this....
<input type="radio" name="type" id="fresh"> Fresher
<input type="radio" name="type" id="exp"> Experienced
<input type="text" class="hid" hidden="true"/> <br/>
<input type="text" class="hid" hidden="true"/> <br/>
<input type="text" class="hid" hidden="true"/> <br/>
$("#fresh").change(function(){
$('.hid').css("style","display:none");
});
$("#exp").change(function(){
$('.hid').css("style","display:block");
});
For default hide the text boxes In OnRender Complete Method you need hide the three textbox for that you put the below code.
$("#textbox 1").hide();
$("#textbox 2").hide();
$("#textbox 3").hide();
You need to write the code in Radio button on change.
Using the Id get the value of radio button
var val=$('#radioId').val;
if(val=='Fresher')
{
$("#textbox 1").show();
$("#textbox 2").show();
$("#textbox 3").show();
}
else if (val=='Experienced'){
$("#textbox 1").hide();
$("#textbox 2").hide();
$("#textbox 3").hide();
}
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>