This is my html code:
<input type="text" id="home">
<input type"text" id="dog">
I need to do something to read the values in these fields. So I wrote my jquery code:
//this code is wrong because it doesn't work
$('input[type="text"][id="home"] input[type="text"][id="dog"]')....
How I can select something like this? Can anyone help me?
For selecting multiple items use comma in between them
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#home, #dog').val("hello");
});
</script>
</head>
<body>
<input type="text" id="home">
<input type"text" id="dog">
</body>
</html>
Use a comma between two selectors when you are selecting based on multiple criteria. A simple example is:
$("#element1, #element2, #element3")
Your example:
$('input[type="text"][id="home"], input[type="text"][id="dog"]')
See Multiple Selector (“selector1, selector2, selectorN”)
you should use $('#home, #dog');
Related
For some reason, this simple bit of code isn't ticking the checkbox:
<!DOCTYPE html>
<html>
<body>
<p>Automatically tick the box</p>
<form>
<div id='checkingTheBox'>
<div class='someValue'>
<input type="checkbox" name="checkingTheBox">
</div>
</div>
</form>
<script type="text/javascript">
document.getElementById("checkingTheBox").click();
</script>
</body>
</html>
However, when removing the div tags, it works fine. Is there any reason why this isn't working as it's shown, and any advice for getting the javascript to click the element successfully without changing HTML structure?
Edit: I tried using id instead of name inside the input tag. That didn't work either.
You cannot have two or more elements on the page with the same id. The id tag should be unique. Also you cannot use the name tag as a id tag. It is not the same. Here's the code example which works as you wanted to:
<!DOCTYPE html>
<html>
<body>
<p>Automatically tick the box</p>
<form>
<div>
<div class='someValue'>
<input type="checkbox" id="checkingTheBox">
</div>
</div>
</form>
<script type="text/javascript">
document.getElementById("checkingTheBox").click();
</script>
</body>
</html>
EDIT:
It works but it doesn't make any sense to do that. You can just use a simple checked tag in your checkbox to have it to be checked by default. Here's an example:
<input type="checkbox" id="checkingTheBox" checked>
you are selecting the div and want to click function on it inner child so try this script that will select the inner child from your selected this and call click function on that child
const div = document.getElementById('checkingTheBox');
div.firstElementChild.firstElementChild.click();
I'm new using Jquery, and I'm trying to apply a mask in a field but i get the following error:
TypeError: $(...).mask is not a function
Here is my HTML
<div class="col-md-6">
<div class="form-group">
<label>CPF</label>
<input type="text" maxlength="17" id="cpf" name="cpf" class="form-control cpf" />
</div>
</div>
And here is my script:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.43/jquery.form-validator.min.js"></script>
<script src="https://raw.githubusercontent.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#cpf").mask("999.999.999-99");
});
</script>
I already try to do $(document).ready(function($){} But i get no success.
Does anyone have an ideia ? I'm kind lost after alot of tries
The main problem is the "https://raw.githubusercontent.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js" link. I'm getting a "refused to execute from ... because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled".
The first two lines do not include the protocol.
The solution (works in my test anyway, ping me if you have problems / questions):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.43/jquery.form-validator.min.js" type="text/javascript"></script
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js" type="text/javascript"></script>
Maybe this can help you. I think you need a jQuery mask plug in. I saw several but this post will steer you in the right direction JQuery apply input mask to field onfocus and remove onblur so to avoid problems with placeholder text
Are you trying to access the libraries locally?... because if you are you need to add the http protocol or https to the jquery library and the jquery form validator
You can't access the libraries locally with out them and thus, $()mask is not recognized as a function
like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.43/jquery.form-validator.min.js"></script>
Probably you should use class selector $('.cpf').mask(); instead id selector. This should work:
$(document).ready(function(){
$(".cpf").mask("000.000.000-00");
});
Also, you can use this other way:
<input type="text" name="field-name" data-mask="000.000.000-00" />
$(document).ready(function() {
$("#cpf").mask("999.999.999-99");
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://rawgit.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>
<div class="col-md-6">
<div class="form-group">
<label>CPF</label>
<input type="text" maxlength="17" id="cpf" name="cpf" class="form-control cpf" />
</div>
</div>
<script src="https://rawgit.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>
use the link about instead of your link
use rawgit.com check here for more info
Use the following
<input type="text" pattern="[0-9]{3}\.[0-9]{3}\.[0-9]{3}\-[0-9]{2}" value="" name="cpf" id="cpf" maxlength="17" placeholder="CPF">
JSFiddle here
I am running the following Jquery:
<input type="text" value="hello" name="multy['helloworld']" />
<script type="text/javascript">
$(document).ready(function(){
var hello = 'helloworld';
alert($('input[name="multy['+hello+']"]').val());
})
</script>
As you'll see it can't select the element by a named Array key. Is there a work around for this?
Ta.
Antony
Yes, remove the single quotes from the name of the element:
<input type="text" value="hello" name="multy[helloworld]" />
They are absolutely not required.
You have to do double escapes on the brackets when you send it to jquery so jquery will know to escape them, too. Plus, please notice that I removed the single quote from the input in your example.
<input type="text" value="hello" name="multy[helloworld]" />
<script type="text/javascript">
alert($('input[name=multy\\[helloworld\\]]').val());
</script>
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.
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;