fill input text - javascript

How can I fill a text input with a value? I am trying this:
<input id="curso" maxlength="150" name="curso" size="40" type="text"
value="window.location.href.substring(91))" />
But that does not work.

<input id="curso" maxlength="150" name="curso" size="40" type="text">
<script>
document.getElementById("curso").value =
document.getElementById("curso").defaultValue = window.location.href.substring(91);
</script>
You can't execute JavaScript from within an arbitrary HTML attribute. Only <script> elements and event handlers can contain JavaScript, so add a <script> that sets the value.
You also need to set the defaultValue property so that any form reset resets the value to the desired value.

Related

How do I make an html text input readonly but be able to update with a script?

I have these inputs that take the values of a from a in my table when I click on a row. I want to make it so that the user cannot change the input themselves but want to bring values into them when a user clicks a table row. I will be passing these inputs in as a form. I know that when the input is like this:
that it will not be updated. Is there any other way to do it with an input. Is there a different type of tag I can use that can be passed through a form?
Rather than a read-only <input>, I'd go with a combination of a display element and a hidden form element. Something like:
<div id="my-display">This is a value</div>
<input id="my-input" name="my-input" type="hidden" />
And in the code update both:
$('#my-display').text(yourValue);
$('#my-input').val(yourValue);
You can style the display to the user however you like and don't have to worry about whether or not it "de-activates" the form input.
If you really want it to be an inactive input, you can use the same approach:
<input class="my-input" type="text" disabled />
<input class="my-input" type="hidden" name="my-input" />
Which may even save you a line of code here, since both can now use .val():
$('.my-input').val(yourValue);
Try disabled keyword as here
<div id="my-display">This is a value</div>
<input id="my-input" name="my-input" type="text" disabled/>
You can change the value by javascript as below:
document.querySelector('#my-input').value = 'the value you want to enter by javascript';

how to change default input tooltip text that shows in required input

There is a tooltip when my mouse is over the textbox : "please fill out this field" is there a way too change this text ?
if you hover on this field you can see the massage :
<input type="text" name="yourname" required/>
This could be easily done using the title HTML attribute.
title Attribute
The title attribute belongs to the Global Attribute. It allows to specify extra information about an element. This information is shown as a tooptip text when the mouse moves over the element.
<input type="text" name="yourname" required title="You changed it !!"/>
If its something related to the text showed after validation. For that you could use the function setCustomValidity along with an event Handler .
Here we would use the event Handler oninvalid.
Your code could be written as :
<input type="text" name="yourname" required oninvalid="this.setCustomValidity('Yo! You changed it')" oniput="this.setCustomValidity('Yo! You changed it')" title="test"/>
you can add a title on your input
<input title="test" type="text" name="yourname" required/>

Update hidden form field with value from textfield

I am trying to set the value of a hidden form field with the value entered in a textfield when submitting my form.
I have tried combining the answers to various questions but the closest I have come is getting the 'id' of my source field - but not the value.
Text field name = wpcf-available-stock
Hidden field name = wpcf-total-stock
The hidden field simply needs to be set to the same value as the text field on form submit using Jquery?
I cannot seem to find a simple sample in other questions asked... thanks
To achieve expeccted result, use below
HTML:
<input type="hidden" name="wpcf-total-stock">
<input type="text" name="wpcf-available-stock" value="test">
JS:
$("input[name='wpcf-available-stock']").on('keyup',function(){
$("input[name='wpcf-total-stock']").val($(this).val());
alert($("input[name='wpcf-total-stock']").val());
});
Codepen- http://codepen.io/nagasai/pen/RRBwjA
First of all: Why would you fill a hidden form field from a text field when you're going to send it anyway?
Second, the jQuery looks like this:
var fieldValue = $('#wpcf-available-stock').val();
$('#wpcf-total-stock').val(fieldValue);
You can obviously chain that together, but this is pretty clean.
Here's a demo: https://jsfiddle.net/u5Lj8cLz/
Pure JavaScript solution.
updateHidden = function(x) {
document.querySelector("[name=bar]").value = x;
}
<input name="foo" value="" onchange="updateHidden(this.value)" type="text">
<input name="bar" value="sometext" type="hidden">
Update
updateHidden = function() {
document.querySelector("[name=bar]").value = document.querySelector("[name=foo]").value;
}
document.querySelector("[name=foo]").addEventListener("change", updateHidden);
/*
or,
document.querySelector("[name=foo]").addEventListener("keyup", updateHidden);
*/
<input name="foo" type="text">
<input name="bar" type="hidden">

How to set input value with JS

I have input :
<input type="text" id="nameProduct">
I want set value :
document.getElementById("nameProduct").value="hello";
How can I do it before page load input ?
You can't do it with JavaScript, the dom element object can only get after it loaded. The right way is to set value attribute for input.
<input type="text" id="nameProduct" value="hello">
A simple hack you can do is hide element initially and show it after value updated using JavaScript.
var ele=document.getElementById("nameProduct");
ele.value="hello";
ele.style.display='block';
<input type="text" id="nameProduct" style="display:none">

Retrieving hidden input value using jQuery

I have a hidden input in the manner below:
<div id="message">
<input id="hiddeninput" type="hidden">
<span>Message with submit button <input type=button id="confirm" value="Submit"></span>
</div>
The hidden input is given a value after a jQuery POST. I need to retrieve the value that is set, and send it in another jQuery POST.
Interestingly, I get this:
<input id="hiddeninput" type="hidden">34345</input>
after fetching the value from the server in the first jQuery post.
Just $("#hiddeninput").val() does not retrieve the value which I want to send.
What is the correct way to do it in my example?
EDIT: In JQuery, This is how I set the value to the hidden field:
$.post("post.php", function(data){
if(data.length > 0){
var resultObj = eval(data)[0];
if(resultObj.SomeNumber >= 0)
{
$("#hidden").html(resultObj.SomeNumber);
}
});
You have to set the value of the hidden field like this, then it should work
<input id="hiddeninput" type="hidden" value="34345" />
The hidden element
<input id="hiddeninput" type="hidden">
does not have the value attribute. It should be like
<input id="hiddeninput" type="hidden" value="someValue">
$("#hiddeninput").html() would retrieve 34345 from the structure as you show although as stated above the value attribute should be used on a hidden field and then val() will work.
Since <input id="hiddeninput" type="hidden">34345</input> is not the "right" way to format the input tag,a s opposed to <input id="hiddeninput" type="hidden" value="34345"/> you need to use $("#hiddeninput").text()
try explicitly adding the value tag to the input elemeent before the post adds it i.e.
<input id="hiddeninput" type="hidden" value="">
If that doeesn't work have a look at this thread:
jquery selector can't read from hidden field

Categories