Inserting JQUERY value into hidden field of html - javascript

Hi I want to insert a cookie value which I am getting by using jQuery.
I want to grab the value of the cookie and insert it into the html value attribute.
<input id="visitorcookie" type="hidden" value="<script>$.cookie('visitorCookie');</script>" name="com.silverpop.iMAWebCookie">
Is this correct how I am doing it?

Not at all actually. The value attitribute won't execute any code, it just can store a value.
Do this: when the DOM is ready, select the hidden field by ID with $('#visitorcookie') and set it's value with .val():
$(document).ready(function() {
$('#visitorcookie').val($.cookie('visitorCookie'));
});
More about:
jquery selectors
.val() method

$("#visitorcookie").val($.cookie('visitorCookie'));

$('#visitorcookie').val($.cookie('visitorCookie'));

Related

How can I set the Text of a DropDownList using jQuery?

I have seen some answers on how to set the value for a dropdown using jQuery. However in my case, I want to know how to use jQuery to set the text for a dropdown.
This example uses jQuery to set the value for my dropdown:
var trimvalue ="345";
$("#Trim").val(trimvalue);
In my current code Logic, I want to set the displayed text as well, which I tried to do in this way:
var trimtext ="samsung";
$("#Trim").text(trimtext);
This is not a correct syntax. Please provide any suggestions on whether we can set the the text using jQuery or not.
You should be able to set the text with something like
$('#Trim option:selected').text(trimtext);
https://jsfiddle.net/yzgbk1fj/:
Or if you mean to add it, perhaps:
$('#Trim').append($('<option />').text(trimtext)).val(trimtext);
https://jsfiddle.net/yzgbk1fj/1/
First Create a html tag in your html page
<select id='sampleSelect'>
<select>
Second in your Jquery target the select function using an ID
$(document).ready(function(){
var trimtext ="samsung";
$("#sampleSelect").append(
"<option value="+trimtext+">"+trimtext+"</option>"
);
});
And if you have alot of values for your drop down use a For loop. Hope this help.

Why .attr('value') of hidden input element not returning original value from html string?

Basically when invoking .attr("value") over a text box, It will return its value which was set in the markup, not the value which was set by using .val().
For instance,
<input id="test" type="text" value="testing" />
Js:
$("#test").val("hello");
console.log($("#test").val()); //hello
console.log($("#test").attr('value')); //testing
But while doing the same over a hidden element, the result was different like below,
HTML:
<input id="test1" type="hidden" value="testing" />
Js:
$("#test1").val("hello");
console.log($("#test1").val()); //hello
console.log($("#test1").attr('value')); //hello
DEMO
The value attribute got ignored if we set value for that element by using .val(). Anyone have idea on why is this happening? Relevant link which contains details for this behavior would be more helpful.
Hidden inputs aren't user editable, so you may find that the default and current values are the same for them. So the .val() and .attr('value') are the same for hiddenelement
As far as I get , the value attribute describes the default value for the element, not the current value. Current Value is what you can access through the value property (which is what the jQuery val() does).

Update value of input after text

I want to add a default value to an input field on an existing form when the page is loaded. All of the inputs on the field have the same name and ID on this form.
<table>
<tr><td>Name:</td><td><input id="MultiLookupPicker" name="MultiLookupPicker"/></td></tr>
<tr><td>Company:</td><td><input id="MultiLookupPicker" name="MultiLookupPicker"/></td></tr>
<tr><td>Department: </td><td><input id="MultiLookupPicker" name="MultiLookupPicker"/></td></tr>
</table>
Here's the example http://jsfiddle.net/ljd144/6ocsLk6k/
How would I add a default value to the input immediately following the text "Company"? Thanks!
The input is not in your td so the find method won't work. You need to select the next td first.
$( "td:contains('Company')").next("td").find("input").val("test");
I updated your fiddle with the right selector
JSFiddle updated
You can't use the same id on multiple element, it's very very bad and will lead to unexpected result.
to add a default value, you can do it in html :
<tr><td>Name:</td><td><input id="MultiLookupPicker" value="yourvalue" name="MultiLookupPicker"/></td></tr>
or in jquery :
$("$MultiLookupPicker").val("yourvalue");
Try it ..but id must be unique
$( "td:contains('Company')").next().find("input").val("test");
NOTE: In your fiddle $( "td:contains('Company')").find("input") it always return empty array bcoz there is no input element that td , so use next() and find the input
updated fiddle

assigning initial value of input text field with jquery

I am trying to assign an initial value to a text box with using jquery. This is the text field
<input type="text" class="info"/>
This creates more than one text fields and I need to populate the text fields with initial values which come from database. I am having problem since I am trying to it with jquery adapter.
Any clue on this?
Thanks in advance.
Here is the detailed code:
I include index.html
<?php include "index.html"?>;
which puts some text fields to record.php:
...
...
After including index.html I am using this code to assign intial value to the text boxes which have a class name "info":
$('.info').each(function() {
$('.info').val('yourvalue');
});
Instead of assigning a constant value (here it is "yourvalue") I am going to assing some database records to each input fields.
$('.info').val('yourvalue');
replace yourvalue with the value you want to set..
Set this value in the success callback of your ajax request..
$('.info').val('value-to-be-set');
.val( value ) - Set the value of each element in the set of matched
elements
Above code will set the value of the input fields where the class name if 'info'
Read More here
$('.aciklama').each(function() { $('.aciklama').val('yourvalue'); });
you know $('.aciklama') is an array , and when you iterator you array get the object, you still get the $('.aciklama') array and set the array value, as I see It is not correct.
You should write like this:
$('.aciklama').each(function(index, item) { $(item).val('yourvalue'); });

Inner HTML with input values

have a brief question regarding innerHTML and input values that have been entered. See the brief example below (using jQuery for convenience):
http://jsfiddle.net/F7urT/2/
jQuery:
jQuery(document).ready(function($) {
$('.send').click(function() {
alert( $('.content').html() );
return false;
});
});​
html:
<div class="content">
<input type="text" name="input" value="Old Value" />
<input type="button" class="send" value="Send" />
</div>​
If you edit the input value, then click the 'Send' button, the alert shows that the innerHTML gotten contains the input with the "Old Value", rather than the value the user has entered. Why is this? And how can we get the HTML as a string with user entered input values?
The new value is stored as a property not an attribute, the value can be obtained by inputelement.value, modifying the value does not affect the attribute. If you want the html with the new value just set the attribute to the new value.
For check boxes and radio buttons set the checked attribute, set the innerHTML for text areas, for selects set the selected attribute on the option
http://jsfiddle.net/mowglisanu/F7urT/5/
this solution is better. works for more inputs.
$('input[type=text]').attr('value', function (i, val) { return val; });
$('input[type=checkbox],input[type=radio]').attr('checked', function () { return this.checked; });
$('textarea').html(function () { return this.value; });
$('select').find(':selected').attr('selected', 'selected');
You can't get it with .innerHTML (.html()). Writing into an element doesn't modify the html markup, nor will it change the value attribute in actual markup.
You can only access the current content by directly asking the element for its .value - value. Using jQuery, you can do that via .val() too.
$('#input_id').attr('value',$('#input_id').val()); will put the value into the html
DanCZ & Musa solutions works pretty good, but I had trouble with the textarea.
I have to implement this in a Typescript project and the only way I've found to make the textarea show the value is this :
textarea.innerHTML = textarea.value;

Categories

Resources