I have a form that has a checkbox that when click, triggers an event in javascript that assigns a value to a hidden field. However, I cannot access this when I try to validate the form. It actually causes the entire script to fail.
I've tried to access it with:
var hiddenField = document.forms[myForm].elements[hiddenField].value;
and with:
var hiddenField = document.getElementById('hiddenField').value;
and:
var hiddenField = document.getElementById('hiddenField');
then adding .value to variable when it's actually used in the script.
I've stepped through all of it in firebug and watched the other function assign the appropriate value to the hidden field. This variable assignment is actually where the script gets killed.
Any help or suggestions would be greatly appreciated!
Maybe you can try this:
<html>
<body>
<input id="hiddenField" type="hidden" value="test">
<script>
// Sets the hidden field value
document.getElementById('hiddenField').value = "Hello World";
</script>
<script>
// Reads the hidden field value
var hiddenFieldvalue = document.getElementById('hiddenField').value;
// Display. Should be "Hello World"
alert(hiddenFieldvalue);
</script>
</body>
</html>
document.getElementById('hiddenField')
For that to work, the input would need to have an id attribute with the value hiddenField. It looks like it has a name instead.
document.forms[myForm].elements[hiddenField]
Here, both myForm and hiddenField are JS variables that get evaluated to the property name when you are accessing the properties with bracket notation. I guess you want those names literally. Use either
document.forms["myForm"].elements["hiddenField"]
or
document.forms.myForm.elements.hiddenField
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.
First I'll append some value to a textbox using jQUery :
$('#textboxId').val('someval');
Now the value is empty, when I see in console.log
This will not work, since the value is empty.
var someVar = $('#textboxId').val();
How do I get the appended value again in jquery?
This will not work, since the value is empty.
No, your code is valide and will work, you can notice that the value is added to the input field, but the value attribute always shows the default value. Browser Inspector never displayed the current value in the attribute. The current value is always visible just on the screen.
$('#textboxId').val('someval');
alert($('#textboxId').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='textboxId'/>
Try like this:
$('#textboxId').append('someval');
var someVar = $('#textboxId').val();
I know it's simple and there's probably something wrong with my syntax but I just don't understated it. I'm talking about the following:
//declaration of a string
var str_input = "";
//this is supposed to get the new inputs and to store them in str_input
$(document).ready(function(){
str_input = $('input[name=po]').val();
});
//this is on html side, this should make an input field where the user to type in the needed
<input type"text" name = 'po' id="po" value="asd">
That's it, can you help me to sort it out? The problem so far is that str_input is undefined regardless of what is written in the input, though, it saves its initial value.
Your html tag is invalid:
<input type"text" name = 'po' id="po" value="asd">
Should be:
<input type="text" name = 'po' id="po" value="asd">
// ^ Missing this character (=)
Ok, Now I understood, you can do 2 things, first, you can create a button than when the user clicks it calls the function to store the value in the variable like this:
var str_input = "";
//this is supposed to get the new inputs and to store them in str_input
$(document).ready(function(){
$("#MyButton").click(function(){
str_input = $('input[name=po]').val();
})
});
//this is on html side, this should make an input field where the user to type in the needed
<input type"text" name = 'po' id="po" value="asd">
<input type="button" id="MyButton" value="Click Here" />
Or the blur function when the user lose focus of the input text like this:
var str_input = "";
//this is supposed to get the new inputs and to store them in str_input
$(document).ready(function(){
$('input[name=po]').blur(function(){
str_input = $('input[name=po]').val();
})
});
//this is on html side, this should make an input field where the user to type in the needed
<input type"text" name = 'po' id="po" value="asd">
Ok, so here is the solution, though it's a little bit in "from Alf to Alf" style. So, yes, the code I've posted in the main post uses correctly the 'by default' value of the input but the problem comes from that nothing is checking for further changes in the input text field. I'm using $(document).ready... which as far as I know runs during the web project is opened and of course enables the use of some jquery methods within it. There is an interesting function called .change() which actually put the whole thing up for me. Take a glance at the following:
$(document).ready(function(){
$('input[type="text"]').change(function(){
str_input = $('input[name=polynom]').val();;
});
str_input = $('input[name=polynom]').val();
});
The second, third and fourth line make the magic actually, where the code in the .change() method updates str_input on each time a change have appeared in the input box field, whereas the str_input = $('input[name=polynom]').val(); outside of change() takes into account the initial value of the input. That's it... I knew I was forgetting something and yeah...
P.S. Another approach is to use a function and a button (a.k.a. an event-triggered function) which to 'update' the str_input on event. For this way check the post bellow this one.
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;
i have the following html code :
<FORM name=frmmail>
<input id="dochtmlContent" type="hidden" name="dochtmlContent" value="oldValue"/>
<script>document.dochtmlContent="newValue"</script>
</FORM>
and later on in a javascript function (which is called upn submit):
alert(document.dochtmlContent);
document.frmmail.method = "post";
document.frmmail.ENCTYPE = "application/x-www-form-urlencoded";
document.frmmail.action = "/myServlet";
document.frmmail.submit();
Basically, I am declaring a hiden variable, changing its value and submitting it.
The issue is, while I see an alert box displaying "newValue", when I submit it, my servlet recieves the "oldValue" for the dochtmlContent parameter.
Can someone suggest whats wrong here.
Change your HTML to this:
<script>document.getElementById("dochtmlContent").value = "newValue";</script>
The reason is dochtmlContent as a hidden input is not a property of document. That's not how you want to access it. Instead you are creating that property on document, but the form is still posting the hidden input, unmodified. You need to select that element using the getElementById (or another selector if relevant).
document.getElementById('dochtmlContent').value="newValue"
worked :)