Why doesn't this work?. Here the input type is text:
var name = $("input[name='Event[name]']").serializeArray();
name = name[0].value;
var description = $("input[name='Event[description]']").serializeArray();
description = description[0].value;
When I want to get the from a textarea instead, it doesn't work.
This should work:
var name = $("input[name='Event[name]']").val();
var description = $("input[name='Event[description]']").val();
Let jQuery handle value.
The .val() method is primarily used to get the values of form elements such as input, select and textarea.
Replace your code as .val() to .text()
value isn't a property of a textarea. Textarea's are nodes that have content. Use the JQuery attribute for textContent.
A textarea as no value attribute. Use $("input[name='Event[description]']").val() since jQuery folds all values for all kind of input elements (input, select, checkbox and textarea) into this function call.
That means you should always use .val() to get the value for anything - your code will be more simple and you can even change the type of an input element without breaking anything.
Is there any particular reason as to why you use get value as array?
If not see below :
var name = $('#name').val();
var description = $('textarea#description').val();
considering name and description is what you have given as id for text field and text area.
Related
I need to copy the value from the input field to the clipboard. Instead of getting the value of the input field I get null.
Here is my Code:
<input type="text" value=${model.anchor_url} id=${properties.anchor_name}>
<button class="c-button" onclick="myFunction()">
<span class="c-button__label">Copy</span>
</button>
<div data-sly-test="${model.anchor_url}">
<p>URL from Model :</p>
<pre>${model.anchor_url}</pre>
</div>
function myFunction() {
const field = document.getElementById(`${properties.anchor_name}`);
navigator.clipboard.writeText(field);
alert("Copied the text to clipboard: " + field);
}
The value for field variable results null even though the id exist and it has a value.
You get an Object with this line: document.getElementById(${properties.anchor_name}). With the parameter value you will get the value from the input field.
So you have to try:
const field = document.getElementById(`${properties.anchor_name}`).value;
You are trying to copy the element, instead of it's Value, you have to get it's Value using element.value, also if the value of field variable is null, this means the Element you are trying to get doesn't exist with that Element ID
And also, you were trying to copy the whole element instead of it's value, So Replace the first line in your function with this one:
const field = document.getElementById(properties.anchor_name).value;
Also there is no need to put template literals in your code as you can do so without that too!
For example assume there is a variable element_ID which can be written in JS like this:
var element_ID = "myInput"
now i want to get that Element, so I can just directly do this:
document.getElementById(element_ID)
instead of this:
document.getElementById(`${element_ID}`)
Thanks for all the help. It appears due to cross site scripting prevention JS can not be executed from html for the site I develop but has to be built using TypeScript.
I have a form where the user can dynamically add or remove sets of fields. For each set of fields, when the user enters/changes a value in the upc[] text input I want to make an Ajax query and populate the corresponding desc[] text input. I can capture the change event, but have not been able to read or modify the dynamically create desc[] field:
This snippet does not have the Ajax call as for now I just want to know I can set desc[x].val(). I have tried to associate the dynamic field with a parent element that existed when the DOM was created...but still no luck.
$(document).on('change', '.upcScan', function(){
var upcIdx = $(this).index('.upcScan');
var upcVal = $(this).val();
alert ("The current index is "+upcIdx+" and the value is "+upcVal);
var descName = "desc["+upcIdx+"]";
var descVal = $("#addClient input[name='"+descName+"']").val();
alert("desc field is "+descName+" and value is "+descVal);
});
The code above returns null. If I try to set the val nothing happens.
What am I missing?
I have a small form and When I click the Join button, and enter my information, I want it to save the value of the Username form, and then replace the Join and Signup button with their name or "Hello" + name.
So I have a JSFiddle Here: http://jsfiddle.net/LCBradley3k/t3HF5/
I would think it would be something like the following code, but that doesn't work:
var name = document.getElementById("name");
Then I would want it to put name in some type of div that replaces the two button at the top.
If you're using jQuery (which your jsfiddle indicates you are), this should be fairly trivial.
var name = $('#name').val();
Hope that helps!
Using pure javascript (no jQuery), if it's an input element, to get the input value use:
var name=document.getElementById("name").value;
To replace a div's content with name:
document.getElementById("div_id").innerHTML=name;
You can also use html:
document.getElementById("div_id").innerHTML="<p>" + name + "</p>";
Or replace the div's value:
document.getElementById("div_id").value=name;
I have table with the following id inside one of the rows
<td class="firstRow"> <span id="randomWordToTranslate"></span></td>
the firstRow class just include padding preferences in css.
In my java script class, I am calling two functions
the first randomly assigned a value to this id , so when I am loading my page I will get a different word each time : this part is working
$("#randomWordToTranslate").html(current_dict[listOfKeys[Math.floor(Math.random() * listOfKeys.length)]]);
the second inside a button listener trying to get the value of the word inside this field whenever the button is clicked
var spanishWord = $("#randomWordToTranslate");
var inputValue = $(spanishWord).val();
but when I doing console.log(inputValue) I am printing an empty row into my log.
Any ideas?
thanks
Since the <span> isn't an <input> tag (or other form input like <select>), it will not have a .val() (value). Instead, you need either .html() or .text():
var spanishWord = $("#randomWordToTranslate");
var inputValue = spanishWord.text();
// Or:
var inputValue = spanishWord.html();
this is my input field:$("<td class='testclass'><input id='field-search' value='' type='text'></td>")
How do I get the value of the input field?
I tried it this way:
var mytest =$('#field-search').val();
alert(mytest);
The result is that I get an alert being undefined though the input field has got a value e.g. 10.
Is there a way to get the value when the value of the input field changes?
A link or an example would be very helpful. Thank you.
Link to the code: http://www.file-upload.net/download-2902420/test.user.js.html
That's because you've not appended that html to the page. Either do that (someElement.append($("<td>...</td>"));), or search in that part specifically
var e = $("<td class='testclass'><input id='field-search' value='1' type='text'></td>");
var mytest =e.find('#field-search').val();
alert(mytest);
You don't insert element into the page just by calling $("...").
In jQuery
var myVal = $('#field-search').val();
In vanilla JavaScript
var myVal = document.getElementById('field-search').value;