Output doesn't appear in Input field but value exists - javascript

I am confused, I used jQuery to $("#display").html(value) toward my html input with id ="display" but nothing appears in the html input.
However we can see the value in the element : "32" (see picture)
Any idea why the value doesn't appear?
I try to replace input by span and it works well.
image : example
thanks,
Thomas

You cannot set the innerHTML value of an input element (which is what jQuery is doing when you use $.html()). Instead, you need to use $.val().
Try using $("#display").val(value) instead.

Related

Jquery get form's html with values within div

I have Got a div with two text area fields in it and , i have got a list of names where ; if you click on a name from the list it fills the first text area with the name and second text area with surname. This is done via jquery.
I need to save all the content of the div with the values in to mysql and for this reason I have tried .html(), .text(), get().innerHTML, get(), content(), but even though it gets the html , it doesnt not get the text area html with value.
You need to grab the text area fields individually and then use .val() on them to get whatever will be entered in the field.
ok i found a way to do it , when i mentioned that you click on a name from the list it sets the value of the text area; i used ,val(); , but instead i am now using .text(); and it allows me to get the value of it when i use .html(); to get the entire content with the form values. It may not be the best way but it does the job , I am open to suggestions

Get the input with xPath from a Jquery data-bvalidator

I'm trying to get the values of an input field using xPath to validade that the site is working as expected.
But some of the input tags are using jquery data-bvalidator and i cannot access the text/value on them.
You have an example page here:
bvalidator usage
If you try to put some text, for example "Alfa" on the first input box and try to access it, in debug mode, using:
$x('//*[#id="form1"]/div/div[1]/p[1]/input')
you will just get the element <input type="text" data-bvalidator="alpha,minlength[10],required">and not the "Alfa" value.
how can i get around this?
PS: This only works in chrome.
Getting the value property with xpath is not possible.
Wiht xpaht you can get the value attribute value - if there is one. But this would never refelect the changes of the input value (property).
$x('//*[#id="form1"]/div/div[1]/p[1]/input/#value')
To get the property value you can use (in Chrome Debugger):
$x('//*[#id="form1"]/div/div[1]/p[1]/input')[0].value
Update due to the mentioned of selenium in comment:
With selenium you can use ele.getAttribute("value") where ele is the first element from the xpaht search result.
Or something like:
driver.findElement(By.xpath(
'//*[#id="form1"]/div/div[1]/p[1]/input')).getAttribute(‌​"value");

$.html is not having textarea value

When we are trying to get the html of div using the below code it is having all the data except the text which I am entering in the textarea or input field
var mywindow = $(printDiv).html();
mywindow will have all the html except textarea text, radio button values or inputfield.
I have looked into this question but using clone is giving any text at all.
The thing to remember is that .html() does exactly what it says: it gives you the HTML currently in the DOM within that node. But the thing is, content entered by the user, and more generally the content of HTML input fields, is not a part of the HTML. Entering text into a textarea or checking a checkbox or radio button doesn't change the HTML one bit. It does update the internal memory representations of the individual DOM nodes, but this isn't represented in the HTML.
Whenever you want to get content from an input element on the page, you have to use .val() instead of .html(). The .val() function also does what it says: it gets you the value of the input field.
To get the text in a textarea you have to use .val() in JQuery. e.g.
var text = $('#textarea_id').val();
console.log(text);
The second line logs it to the console so you can check it works.

Passing TextBox Value to a unique label?

I am just getting into Jquery and I am stuck on a little bit of a bug. In my HTML I generate some H tags and Labels. These H tags and Labels have an on click function that will take that element whether it be an H tag or Label and pass it off to a method (setProperties(this)).
This method will capture what was written inside the input field and assign it to that element. My bug is that after I click on 2 elements it will change to whatever was in the input on both. I am assuming the elements are now listening to the input field and assigning there text value to what was inside the input field. I am curious on how I could rearrange my code to make what ever you element you click on. That field will be the unique field to change.
Variables :
Element is the element I click on such as a H tag or Label
the id ChangeText is the input element where you type to change the label or H tags value.
function inputfield(element){
$("#changeText").on("blur",function(){
$(element).text($("#changeText").val());
});
}
Here is a Jfiddle of what my problem is. If you click on two of the test texts and then change the value of the input. It will change both. I am looking to change only one.
http://jsfiddle.net/QMsQq/5/
It appears that when the inputfield function is called, you are setting the onblur to fire.
The on function will last after the inputfield function call. Try calling "off" to remove prior set on events from changeText.
function inputfield(element){
$("#changeText").off().on("blur",function(){
$(element).text($("#changeText").val());
});
}
Warning: untested code.
http://jsfiddle.net/QMsQq/6/ Updated your fiddle to show my solution
Assign the element to a variable.
var $elem = $('whatever');
and pass that as the argument. And I think you want to fire on focus of an element (click).
Also, here is a VERY simple vanilla js example of what I think you're getting at:
http://jsfiddle.net/Lqf25/3/
Hopefully that helps a smidge.
Edit:
ok, for your fiddle:
Your input syntax is jacked. (missing '>' and you don't need '/input' anyway)
Don't use (onClick) in html. Separate your concerns - javascript goes in the script file, not inline. See my fiddle for an example. Although, from reading your latest posts I don't think it's quite what you want - I'm actually a little confused on what exactly you're trying to do...
Edit 2:
Try this: http://jsfiddle.net/w88xr/3/
I think that's what you're looking for.

Set value to hidden column with jquery

I am trying to set value to a hidden column. Previously i have achieved this by doing:
var bc = $("select[title='Broadcast Channel']").val();
$("select[title='Execution Channel']").val(bc);
This works fine as I am able to get the column which exist in html source.
Now I am trying to set value to a hidden column which I have hidden in Sharepoint 2010 list setting. And I am not able to find it under html source (e.g. <input type=hidden....>).
How can I set value to this hidden column?
Not sure if the following method will be acceptable to you, but here goes...
In sharepoint, make the input field non-hidden. Instead, make it invisible at document.ready() using JQuery. If the input field is given a specific ID/class name, you can get a reference to the same, and set the text (using text() function), or for more complex situations, consider enclosing it all in a div.
Best Regards,
Gopal Nair.
In share point make the field as text input and then using jquery make it hidden and then set the value. try something like
$('input[type="text"][title="abc"]').attr('type','hidden').val("abc");
There is a common problem that if an element is hidden from back end code, normally it is simply not rendered in the html generated. Elements that needs to be manipulated at the front end need to be shown but hidden using html or js code.

Categories

Resources