Im a beginner in Jquery / Javascript and have a problem getting a value in a variable after using .on (click).
I know it doesnt work after i start.on, but I want to know, how i can get my value (i hope you can follow me)
My Jquery looks like this:
$(function(){
$("body").on("click", "#main", function(event){
var test = $("#firstName").value;
alert(test);
});
});
My html page is very simple, but here it is:
<input type="text" value="HEY THERE" placeholder="Text" name="box" id="firstName">
<a id="main" href="#">Submit Text</a>
The javascript alert comes up with "undefined", so i think my script cant find my HTML element.
I hope you understand my problem,
Greets :)
You need to use:
var test = $("#firstName").val();
ID name should be unique, your code defined with the same ID name, you should replace
<input type="text" value="HEY THERE" placeholder="Text" name="box" id="main">
into this
<input type="text" value="HEY THERE" placeholder="Text" name="box" id="firstname">
and js should be
var test = $("#firstName").val();
First, you have the same id (main) for two different controls. I guess you need to change the id of the input text to firstName.
Then, you can either use pure javascript:
var test = document.getElementById("firstName").value;
or jquery:
var test = $("#firstName").val();
Related
First i have a very basic Question about coupling two input Elements. In my case it is a Slider and an input element:
<div class="userInput">
<input id="slider" type="range" min="0" max="100"/>
<input id="number" type="number" max="100"/>
</div>
js:
$('#slider').corresponding = $('#number');
$('#number').corresponding = $('#slider');
$('#slider').onchange(function(){this.corresponding.value = this.value;});
$('#number').onchange(function(){this.corresponding.value = this.value;});
So this works for me but also seems to me like a dirty hack, extending the jQuery object. The bad feeling even grows when appending the controller to jQuery Objects:
var MYController = new Controller();
$('#slider').controller = MYController;
$('#slider').onchange(function(){
this.corresponding.value = this.value;
this.controller.sliderChange(this.value);
});
I would appreciate any suggestions how this is done "the right way". I couldn't figure out a better way yet because i have a large and changing number of user inputs, each requiring its own controller Object, held in an array in my Mastercontroller Class.
Maybe you can put all the inputs inside a <form></form> tag in jsp and then call the form submit event or the serialize event. With the latter (serialize any value stored against a button would not be stored and it would need the name attribute in the jsp tags as well, so may be submit is a better option).
//jsp page
<form id="myForm" >
<input type="text" value="Enter here">
<input type="submit" value="Submit">
</form>
//js call
( "#myForm" ).submit(function( event ) {
// call the controller
});
hi i am newbie in jquery..
i have code like follow
<input type="text" name="name" id="name">
Remove
my question is how can i pass name property of textbox in function dele()?
i am trying to do is
<input type="text" name="name" id="name">
Remove
but it's giving me error. i don't how can i retrieve it?
Thanks in advance
try this:
<input type="text" name="name" id="name">
Remove
jQuery
$(document).ready(function(){
$('.link').click(function(){
var name = $(this).prev().attr('name');
});
});
prev is a method that comes with jQuery. this is an instance of JS Native DOM element. use $(this) to make a jQuery Instance.
dele($(this).prev().attr('name'))
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 have the following form which is getting pre populated with values on load. I want to have empty input boxes on load using Javascript. However I do not have access to the <body> tag so <body onload="" will not work here. Is there any other way to clear the form fields on load?
<form method="POST" action="">
<input name="username" id="user" value="" /><br />
<input name="pwd" id="pass" value="" />
<input type="submit" value="Go" />
</form>
You can use window.onload instead.
function init() {
// Clear forms here
document.getElementById("user").value = "";
}
window.onload = init;
You could also use one of the nice wrappers for doing this in JQuery, Dojo, or you favorite Javascript library. In JQuery it would be,
$(document).ready(init)
Try something like:
window.onload = function(){
document.getElementById("user").value = "";
}
Here's an example
You can run a timeout that will clear the field values. like this:
var t=setTimeout(function(){CLEARVALUES},3000)
Maybe you can add a script tag just after the form.
<script type="text/javascript">document.getElementById("user").value = "";</script>
You can also use jQuery to subscribe to both an individual element's ready (or load) event or the document.
onload=()=>{
document.getElementById('user').value='';
}
or
onload=()=>{
document.getElementById('user').setAttribute('value','');
}
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;