In a view, I'm trying to retrieve the value of an html input box AFTER I have changed it. In other words, the page loads with
<input id="input_one" type="text" value = "apple" />
When the page opens the input box has the word apple in it. I click on this input box, erase the word apple, and then write the word "orange" in instead. when I do the following:
$('#input_one').click(function() {
console.log($('#input_one').attr('value'));
});
the result is "apple" not orange. Is there a way to get the new value I just input without submitting the form? I'm trying to make client side validation using javascript on the page, if the value is something, submit form, otherwise display message "value must be something"
maybe I can do something like
$('#input_one').attr('value', 'new value');
but how do I get the new value I just put in? where is this new value stored? innerHTML? or text() maybe?
attr() will get the attribute of the <input>, which is the initial value of the element.
The current value of the element is a property. If we wanted to get any element property:
$('#input_one')[0].value;
$('#input_one').prop('value');
However, jQuery has the perfect method, .val(), for you:
$('#input_one').val();
What is the difference between attribute and property?
Try .val() instead:
$('#input_one').val();
Try something like this:
$("#input_one").blur(function() {
alert(this.value);
});
This alerts the new value of the input box every time you put it out of focus.
Related
Can anyone tell me how can I set textbox value?
Site: https://signup.live.com/signup
I tried this one
document.getElementById("MemberName").value="Luxury_UAE_EA#hotmail.com"
document.getElementById("iSignupAction").click();
I suppose you don't mean textbox but textarea instead.
Just give the textarea an id and store the desired value on the element which you had tried to achieve.
document.getElementById("MemberName").value="Luxury_UAE_EA#hotmail.com"
<textarea id='MemberName'>test</textarea>
For some functionality I want my actual value and display value be different. Is there any way through JS to do that?
One method is to take another input tag with same name/id but hidden.
you can have a custom attribute in your UI control Assuming you are talking about input tag then it goes like this:
<input type='text' id='txt' value='Display Value' data-custattr='Actual Value' />
while reading the value you can get the actual value like:
document.getElementById('txt').getAttribute('data-custattr')
Hope this helps.
EDIT:
The way I'd probably do it is attach some javascript before the submit and an event listener to the input if it's needed to facilitate the property state, as in if you want the property to be custom, not 'value' you need an event listener on 'change' that will keep your custom property updated.
Something along the lines of:
element.addEventListener('change', () => {
element.setAttribute('myAttrName', element.value);
});
The main point here is that you don't need extra elements, rather a few lines of js.
Im trying to change the text of a radio button.
In the beginning I got this:
but when I change the text with jquery I get this:
I tried $('label[for=id_players_choice_0]').text(x) and $('#id_players_choice_0').text(x) when x is my new value.
As you can see here http://api.jquery.com/text/#text2, jQuery text method changes the content of element. It results in removing all child elements and replacing it with the value of the parameter string used in text(string) method.
You should put the text content into separate element and edit its value by the text() method.
For example create a span element inside the label and use $('label[for=id_players_choice_0] span').text(x)
I have a JavaScript function that goes and gets me a form from another page on the same site. It returns an HTML element (the form) and everything in it. Inside that form, there is an input with no value.
Let's say we have this:
var form = $(data).filter("form")[0];
Now form has an html element that is the form. The form itself has an input element inside it.
I would like to be able to do something like:
$(form.input).text("something new");
and have that change the value of the input inside the form which is not on the page but inside a variable.
Just want to clarify again that the form (in the variable form) is not on the page, it is saved inside a variable.
Like this:
$(form).find("input").val("something new");
.find to get the child input tag (or .children("input") if you know input is a direct child of the form).
.val to set the input's value. (Note that .text sets the inner text of an HTML tag, which of course you don't want in this case.)
(Fiddle)
To set all inputs in your form:
$(form).find('input').each(function(index,inputObj){
$(this).val('someting');
});
Basically, you need to know what input you are looking for. You will need to know some way of identifying it i.e. either id, name, css class name etc. Here is a reference to jquery selectors you can use:
Jquery Selectors
e.g. if need to set value of an input with name "id", I will do this
$(form).('input[name="id"]').val("id is set");
Hope it helps
The way I was able to find to do this is to:
$(form).find("input")[1].setAttribute("value", "something")
try this:
$(form).find("input").each(function(){
val("something new");
});
I am writing a web application where the user clicks on a div, that is holding a input text box with predefined text in it. When the user clicks on the div the code is then printed in a separate text box. I am trying to write a function that grabs the value of the the clicked on div's text input. I have it working by clicking on the input box itself by using $(this).val(); but I want to click on the div and then it essentially gets the value of (this)('input[type=text].provided_code').val();
is there a way to say the text input inside this div? There are like 20 div's on the page with 20 inputs in each div, and each have the same class name etc.
Yes you can specify the selector context:
By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function
Documentation:
http://api.jquery.com/jQuery/#jQuery1
So you code could look like this:
$('input[type=text].provided_code', this).val()
Performance:
http://jsperf.com/jquery-find-vs-context-sel/38
Yes, you can do:
$(this).find("input[type='text']").val();
Assuming that there is one input of type text inside that div.
Instead of (this)('input[type=text].provided_code').val();
you should use a correct jQuery with the find function.
$(this).find('input[type="text"].provided_code'].val();
You can use find - Although, you cannot target a specific input on click of your div unless that input has a unique class or id.
$('div').on('click',function(){
var value = $(this).find('input[type=text].provided_code').val();
})