checkbox to disable/enable input - javascript

I am using js to , onclick of a checkbox, it enables or disables text input.
It works, until I put it into a live form with google jquery api.
Weird but.. must be a conflict somewhere.
The form element is: ( code isnt adding to this post properly )
<input type="checkbox" name="others" onclick="enable_text(this.checked)" class="medium" /></div>
Name on credit card if different from above
The js is:
function enable_text(status)
{
status=!status;
document.form1.other_name.disabled = status;
}
What am I doing wrong, I have used body onload handler.
<body onload=enable_text(false);>
JS FIDDLE : http://www.jsfiddle.net/ozzy/H8VPY/4/

Here, a jQuery solution:
$("input:checkbox").click(function() {
$("input:text").attr("disabled", !this.checked);
});
Just replace these generic selectors with your more specific ones.
In addition to this code, you will probably also want to make the text-box disabled (initially).
<input type="text" disabled="disabled" />
Working demo: http://www.jsfiddle.net/H8VPY/11/

There are several problems in your jsfiddle demo.
The <script> and the comment there around should be removed.
A <form name="form1"> is missing which caused document.form1 to return nothing.
The onLoad option on left menu should be a no wrap (head) since it's just a function.
Updated demo: http://www.jsfiddle.net/PPZYm/

Live Example
function enable_text(status) {
status = (status) ? false : true; //convert status boolean to text 'disabled'
document.form1.other_name.disabled = status;
}
Note
You also need to wrap your div in the jsfiddle example with a <form> tag with the name form1 for it to properly work
<div class="controlset-pad">
<input type="checkbox" name="others" onclick="enable_text(this.checked)" class="medium" />
</div>
<form name="form1">
<div class="field4">
<label>Name on credit card if different from above</label><input type="text" name="other_name" class="medium" disabled="disabled" />
</div>
</form>

Related

jQuery targeting selector by input type and form name

I want to target any input of text type belonging to a form of a specific name. Because the form will have numerous input fields, I don't want to target a particular input name, but rather, capture the blur (or focusout) event for any input[type="text"] occurring within the form wrap.
My present code, which doesn't work:
$( document ).ready(function() {
$('form[name="tax_form"] input[type="text"]').on("blur",function() {
alert($(this).val());
});
});
I answered my own question. Because the code sample is essentially correct, there is no need for multiple people to try to solve the unsolvable. The problem had something to do with where I placed the javascript code, and nothing to do with structure or syntax of the code, itself.
The way the event "change" works is what it sounds like you want. An event handler doesn't actually fire when the input is clicked or if text is keyed in, it fires when text is entered and then the input loses focus.
In the following Snippet the same selector you are using is delegated to the "change" event. You'll notice that the ['tax_form'] has 4 text inputs yet the last one is the only one working. The reason is because if an input isn't assigned a type attribute, then by default type is 'text". So when using a selector based on an input's type="text", you must keep that in mind. So if you are in full control of your HTML, make sure that each input has a type attribute with an explicit value, or use classes which is better IMO.
SNIPPET
$(document).ready(function() {
$('form[name="tax_form"] input[type="text"]').on("change", function() {
alert($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name='notIt'>
<fieldset>
<legend>Not a Tax Form</legend>
<input>
<input type="text">
<input>
<input type="text">
</fieldset>
</form>
<br/>
<br/>
<form name='stillNotIt'>
<fieldset>
<legend>Still not a Tax Form</legend>
<input type="text">
<input>
<input type="text">
<input>
</fieldset>
</form>
<br/>
<br/>
<form name='tax_form'>
<fieldset>
<legend>Tax Form</legend>
<input class='klass' value='TEXT INPUT BY DEFAULT'>
<input value='TEXT INPUT BY DEFAULT'>
<input name='text' value='TEXT INPUT BY DEFAULT'>
<input type='number'>
<input type='text' value='THIS ONE COUNTS'>
</fieldset>
</form>
Previous commentators were right, that my code was fine as-is. I took my selector code out of a header script file, and placed it at the bottom of my footer script, and it worked as expected.
In the end, it wasn't my code that was the problem, but rather something to do with where I placed it. Possibly other javascript or jQuery code stepping on it.
Your code should work fine. Here's a working example of it to prove it's working. The tax_form fields should console.log() on blur. The another_form should not.
$(function() {
$('form[name="tax_form"] input[type="text"]').on("blur",function() {
console.log($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Tax Form</h1>
<form name="tax_form">
<input type="text" name="first" value="first">
<input type="text" name="second" value="second">
<input type="text" name="third" value="third">
</form>
<h1>Another Form</h1>
<form name="another_form">
<input type="text" name="first2" value="first2">
<input type="text" name="second2" value="second2">
<input type="text" name="third2" value="third2">
</form>

Auto-select Radio Button with Text Field?

Did lots of searching on here and found plenty of people with similar questions, but every 'solution' I have found fails to work in my case. I could be missing something simple, or it may have to do with our HTML. Basically, I want our text field to check it's corresponding radio button should someone enter a value there.
Here is a JSFiddle with what I want working, but when I put host it on a server for testing I don't get the same result.
JSFiddle
http://jsfiddle.net/p8kvQ/39/
HTML
<div>
<input type="radio" name="UnitPrice1" id="UnitPrice1" value="47" checked="checked" />
<label for="UnitPrice1">$47</label>
</div>
<div>
<input type="radio" name="UnitPrice1" id="UnitPrice2" value="Other" />
<label for="UnitPrice2">Other</label>
<input class="-input-width-auto" name="Other1" type="number" id="Other1" />
</div>
JS
$('#Other1').click(function(){
$('#UnitPrice2').trigger('click');
});
I DO have "http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" defined in our HTML header and I've tried adding the code by defining its source file, but still no luck.
Any help would be great.
Your JS needs to be inside a document.ready. When the code is run, the dom element is not available, there for your click listener can not be attached it it.
$( document ).ready(function() {
$('#Other1').click(function(){
$('#UnitPrice2').trigger('click');
});
});
(JSFiddle does this for you because you have the following setting: http://screencast.com/t/5WUC33diHpTb)

Copy input field's value to multiple hidden fields... but with same ID's?

1) I have 3 input radio buttons with unique values.
For e.g.
<input type="radio" id="id1" value="This is first value" />
<input type="radio" id="id2" value="This is second value" />
<input type="radio" id="id3" value="This is third value" />
2) Next, I have 2 hidden form like this:
<form action="//mysite.com/process1.php"><input type="hidden" id="uniqueid" value=""></form>
<form action="//mysite.php/process2.php"><input type="hidden" id="uniqueid" value=""></form>
3) Based upon whichever radio button the user clicks, I need to copy its value to the value of both the above forms hidden field.
For e.g. If user clicks on radio with id1, then it's value "This is first value" should be copied to both the forms hidden field.
CONSTRAINTS:
1) Have to use javascript or jquery, no server side processing available.
2) Note: both the final forms have one input field, but with same id. This is a constraint.
3) Why? Because based on some other actions on the page, the user gets to see one of the 2 forms. The only difference between them is their action is unique. All fields are same.
WHAT I HAVE SO FAR:
Using this, I am able to copy the value from the radio button to a hidden field's value, but it only copies to a field with a UNIQUE ID.
var $unique = $("#unique");
$("#radio1").keyup(function() {
$unique.val(this.value);
});
$("#email").blur(function() {
$unique.val(this.value);
});
Can someone guide as to how can the value be copied to multiple input fields, but with same id's?(Yes, the id's of the initial radio buttons can be unique.)
Having two HTML elements with same ID is an error.
You cannot treat this as a constraint, this is NOT a valid HTML code and it will cause inconsistent behavior in different browsers.
Use classes instead:
<form action="//mysite.com/process1.php"><input type="hidden" class="uniqueid" value=""></form>
<form action="//mysite.php/process2.php"><input type="hidden" class="uniqueid" value=""></form>
And javascript:
var $unique = $(".uniqueid");
However, I couldn't find any #radio1 or #email in your code, are you sure you have the right selectors?
My recommendation for the JS will be: (Working jsFiddle)
var $unique = $(".uniqueid");
$('input[type="radio"]').click(function(){
$unique.val(this.value);
});
Notes for jsFiddle:
I've used click event instead of keyup (don't really understand why you used keyup here..).
I've given all radio buttons the same name so they will cancel each other out when selected.
I've turned the hidden fields to text so you could see the result.
<form action="//mysite.com/process1.php"><input type="hidden" class="uniqueid" id="uniqueid" value=""></form>
<form action="//mysite.php/process2.php"><input type="hidden" class="uniqueid" id="uniqueid" value=""></form>
var $unique = $("input[type=hidden].uniqueid");
$("#radio1").keyup(function() {
$unique.val(this.value);
});
$("#email").blur(function() {
$unique.val(this.value);
});
As said by others, id must be unique. Try using a data-attribute:
<form action="//mysite.com/process1.php">
<input type="hidden" data-shouldupdate="true" value="">
</form>
<form action="//mysite.php/process2.php">
<input type="hidden" data-shouldupdate="true" value="">
</form>
Now you can use that attribute as selector to do something like:
$('[data-shouldupdate]').val(this.value);
I agree with all other who posted that id have to be unique to have correct HTML document. So if it's possible I strictly recommend you to fix the HTML document to remove all duplicates.
I write my answer only for the case that you can't remove id duplicates because of some reason and you still have the same requirements. In the case you should change the line
var $unique = $("#uniqueid");
to
var $unique = $("*[id=uniqueid]");
The selector *[id=uniqueid] (or just [id=uniqueid]) works slowly as #uniqueid, but it allows you to get all elements with the specified id attribute value. So it works even in case of id duplicates on the HTML page.
The most simple solution is to give a same name to both inputs. Check this link jsfiddle to see a working example. The code used is the one given is below:
HTML:
<input type="radio" name="copiedValue" id="id1" value="This is first value" />
<input type="radio" name="copiedValue" id="id2" value="This is second value" />
<input type="radio" name="copiedValue" id="id3" value="This is third value" />
<form action="//mysite.com/process1.php"><input name="uniqueid" id="uniqueid" value=""></form>
<form action="//mysite.php/process2.php"><input name="uniqueid" id="uniqueid" value=""></form>
jQuery/javascript:
$("input:radio[name=copiedValue]").click(function() {
$("input[name=uniqueid]").val($(this).val());
});
The radio-buttons should have the same name. I removed the type="hidden" so u can see it working correctly.
Hope it useful!

onclick event not fired on clicking

i am facing a weired small issue.. the onclick action of radio button is not executed. i tried with onchange event as well, but of no use..
<label><input type="radio" name="search_type" id="search_type" value="name" onchange="by_name()">Enter the Name </label>
<input name="tag" type="text" id="search" maxlength="30">
<label><input type="radio" name="search_type" id="search_type" value="all" onchange="all()">All</label>
and on clicking All,
function all()
{
window.alert('hi');
}
can you help me with your suggestions.. (the js file is linked as well)
EDIT: It does work with all Demo
First, you are using two different inputs with the same id. You can't do that.
Second, try seperating your HTML from JS : DEMO
HTML:
<label>
<input type="radio" name="search_type" id="search_type" value="name">Enter the Name</label>
<input name="tag" type="text" id="search" maxlength="30">
<label>
<input type="radio" name="search_type" id="search_type2" value="all">All</label>
Javascript:
var input1 = document.getElementById('search_type');
var input2 = document.getElementById('search');
var input3 = document.getElementById('search_type2');
input1.onclick = function(){
alert('input1');
};
input2.onclick = function(){
alert('input2');
};
input3.onclick = function(){
alert('input3');
};
Why seperate them?
It's modern and if you have a lot of HTML it's easier to read your javascript if you have it in a seperate file.
Rename the function. all has a predefined meaning in many browsers making it (effectively, if not actually) a reserved keyword when used with in an intrinsic event attribute.
Non-working version gives "NS_ERROR_ILLEGAL_VALUE: Illegal value".
Working version has all renamed to notall.
$(document).ready(function()
{
$('body').click(function()
{
alert('hi');
});
});
here change the "body" tag to the ID of the object you want to have the function happen on.
make sure you are using Jquery otherwise this wont work

validating required fields with asp.net required field validators using jquery

HTML:
<fieldset>
<p>
<label>SOME LABEL</label><span class="required"> *</span>
</p>
<input type="text" id="txtBox">
</fieldset>
Using jQuery i am trying to get "span.required" and add a class "missing" (changes color to red).
JQuery Code:
$('#txtBox').closest('fieldset').find('span.required').addClass('missing');
JQUERY CODE FOR required field validator in ASP.NET:
for (var i = 0; i < Page_Validators.length; i++) {
var val = Page_Validators[i];
var ctrl = document.getElementById(val.controltovalidate);
if (ctrl != null && ctrl.style != null) {
if (!val.isvalid) {
ctrl.closest('fieldset').find('span.required').addClass('missing');
}
else {
//alert('no error');
}
}
}
ERROR via Console: object [ctrl object - the textbox] has no method closest
i have tried different interations using "find" "parent" etc. but nothing i try seems to work.
What is wrong with my code? I cannot grab that span.required
Thank you to everyone's input, I have learned a lot from each of your input. EVERYONE's answer has valid and working code, however only the selected provided the solution.
First off, there are a couple of changes in your HTML that you should make which will not only help you solve this issue, but will also make for cleaner, more valid code:
Add a for attribute to all of your <label> tags that pairs them with the input that they match (this really should always be done with labels), and
Move the <span class="required"> *</span> inside the label (since it really is part of the label)
The resulting code would look like this:
<fieldset>
<p>
<label for="txtBox">SOME LABEL<span class="required"> *</span></label>
</p>
<input type="text" id="txtBox">
</fieldset>
Once you've done that, what you are trying to accomplish becomes much easier:
Instead of:
ctrl.closest('fieldset').find('span.required').addClass('missing');
. . . you can use the id of the input (val.controltovalidate) as part of a JQuery selector to find the related label directly:
var $targetLabel = $("label[for='" + val.controltovalidate +"']")
$targetLabel.find('span.required').addClass('missing');
I've used this many times to pair validations with the labels of the field that is being validated . . . quick and clean. :)
Edit: I split up the last JS piece to keep it from scrolling, but it could be one line. :)
Try txtbox.parent() instead.
txtbox.parent().find('span.required-field').addClass('missing')
$('span.required').addClass('missing');
Try this:
$(function(){
$('#txtBox').parent().find('span.required').addClass('missing');
});
Check http://jsfiddle.net/alaminopu/unZPZ/
Check this one out, I used both, closest() and parent().
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
.missing{color:red;}
.required{color:blue;}
</style>
<script>
$(document).ready(function(){
$(function(){
$('#txtBox').parent().find("span.required").removeClass("required").addClass("missing");
//$('#txtBox').closest("fieldset").find("span.required").removeClass("required").addClass("missing");
});
});
</script>
</head>
<body>
<fieldset>
<p>
<label>Some Label</label> <span class="required"> *</span>
</p>
<input type="text" id="txtBox">
</fieldset>
</body>
</html>
http://jsfiddle.net/GdBnw/
HTH.

Categories

Resources