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.
Related
Is it possible to display input type ="hidden" value?
I need input type hidden because its my requirement and I want to make my generic and apply loop.
I know its a simple question. And I have been searching a lot. I searched and obviously tried also using css, jquery and javascript to visible but I m not getting any solution to it.
The code I tried is:
input type="hidden" id="old1"
and I applied .hide() and .show() function in jquery
Then I tried using in javascript as below:
document.getElementById("Old1").style.visibility = "visible";
OR
document.getElementById("Old1").style.display = "block";
But none of the solution is helping me.
var value = $('#country').val();
alert(value);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="country" type="hidden" name="country" value="Norway">
#Ivan Karaman
I m getting its value.
But I want to placed input type="hidden" on UI which I was not getting .
But you people saved my time.
var value = $('#country').val();
alert(value);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="country" type="hidden" name="country" value="Norway">
I'm using jquery, JS and html with a parse.com backend.I cannot find an exact solution on SO or google to this issue.
I've saved a string variable from a db using
document.getElementById("div_name").innerHTML = name;
I'm able to display it on the html page using
<div id= "div_name"></div>
Now I want to add it to an input box and have the string display as the default value in the box. I thought I could do this using
<input type="text" id="div_name"/>
But this only displays a blank box, no data. What have I missed in my approach please?
As Tilwin Joy pointed out, with pieces from original post, e.g.,
<div id= "div_name"></div>
<input type="text" id="div_name"/>
there may be 2 elements with same id ?
try
html
<div id= "div_name"></div>
<input type="text" class="div_name" value="" />
js (utilizing jquery library)
$(".div_name")
.val($("#div_name").text())
jsfiddle http://jsfiddle.net/guest271314/6L7jK/
If you are using <input>, should be
document.getElementById("div_name").value = name;
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>
I found a thread, Change an element's class with JavaScript, that is along the lines of what I'm going for, but I don't know how to implement it.
I have a page with 4 input buttons and two CSS styles: "Selected" and "notSelected". One button will be hard coded initially as "Selected". When the user clicks another button, I'd like to programatically iterate through all the buttons (the number of buttons on each page will be between 2 and 10), set the clicked button's class to "Selected", and make sure all the other buttons are set to "notSelected".
I've got the logic down, but I've never done anything with JavaScript before, so I haven't the slightest idea about how to do this. If someone knows of a tutorial/piece of code already out there that does this, please point me in the right direction.
Thanks a ton!
You can go the easy way and use a framework like jQuery that does the hard work for you
As you are new to JavaScript, this might be a bit much, but have you considered using jquery? Take a look at toggleClass(): http://api.jquery.com/toggleClass/
Hi just made a quick script, Hope that helps you. Let me know if you find any problem with the script.
I am using focus event and input box, you may change it as needed.
function doSelect( obj ){ var
mylist=document.getElementById("formDiv")
var inputItems=
mylist.getElementsByTagName("input");
for (i=0; i < inputItems.length;
i++){
document.getElementById(inputItems[i].id).className
= "Notselected"; } document.getElementById(obj.id).className
= "selected"; }
Have a form tag within the div tag id="formDIV"
Have few input tags of type text and onfocus="doSelect(this)"
<body> <div
id="formDiv"> <form
name="testform">
<input type="text"
name="tx1"
id="text1"
onfocus="doSelect(this)"/>
<input type="text"
name="tx2"
id="text2"
onfocus="doSelect(this)"/>
<input type="text"
name="tx3"
id="text3"
onfocus="doSelect(this)"/>
<input type="text"
name="tx4"
id="text4"
onfocus="doSelect(this)"/>
<input type="text"
name="tx5"
id="text5"
onfocus="doSelect(this)"/>
</form> </div>
</body>
this should
help.
I want to get value of input element using javaScript.
I am new to all this Please help me.
You can use
var stringVal = document.getElementById('youInputID').value;
Other users have answered the question above already. I would also like to recommend looking at one of the javascript libraries. They make this kind of work much easier. My current favorite is jquery. It is amazingly powerful - every day I find some new feature or trick that makes javascript programming easier.
To solve this in jquery you can use:
The line below will create an alert box for the value of an input tag with the id of email using jquery:
alert($("#email").val());
Here is a complete example:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert($("#email").val());
});
</script>
</head>
<body>
<form method="POST" action="go.php" id="login_form">
<input type="text" class="inputtext" title="Email" id="email" name="email" value="your#emailaddress" />
</form>
</body>
</html>
Your Javascript should look similar to this:
var elm = document.getElementById('myElement');
var value = elm.value;
And your HTML:
<input type="text" id="myElement" value="My Value" />
Try this:
<input type="text" id="testid" value="" />
Now you can get the value of above text box like this:
document.getElementById('testid').value;
Other way:
document.form_name_here.element_name.value;
Simply run an alert to check if value comes:
alert(document.getElementById('testid').value);
var txt = document.getElementById('ID-OF-FIELD');
var value = txt.value;