Here's something weird
<form>
<input type="text" id="test" value="abc" />
<input type="submit" />
</form>
<script>
$('form').submit(function(ev){
ev.preventDefault();
alert($(this).html());
});
</script>
http://jsfiddle.net/F6XvW/
I change the value of the input field, then click submit to get the HTML, but the value is not updated inside the HTML? What's up with that? How to get the updated HTML?
What the user inputs is never changing the HTML. It's a form value which will be sent as a parameter to the server.
See here: your jsfiddle updated:
<form>
<input type="text" id="test" placeholder="abc" />
<input type="submit" />
</form>
<script>
$('form').submit(function(ev){
ev.preventDefault();
alert('inputted value = ' + $(this).find('input[type=text]').val());
});
</script>
If you really want to update the DOM, you have to manually set it: http://jsfiddle.net/F6XvW/3/
JS
$('form').submit(function(ev){
ev.preventDefault();
$('#test').attr("value", $('#test').val());
alert('changed input value to: ' + $(this).find('input[type=text]').val());
});
Changing the input of a value does not change the Document Object Model (DOM).
SOLUTION
$('form').submit(function(ev) {
ev.preventDefault();
var newinputval = $(this).find('input[type=text]').val();
var newhtml = $(this).html();
newhtml = newhtml.replace("abc", newinputval);
alert(newhtml);
});
As you see I first receive the new input value, then I get the HTML and replace the DOM's value with the current input value. Now it does exactly the thing that you want.
JSFiddle demo
The value attribute shows the default value, not the current value (which is available in the DOM property of the same name.
If you want to get the current value, then you would have to loop over all the form controls and get their values from the DOM.
You are reading out the initial HTML - changing value on the page will not change in this HTML. Try:
$('form').submit(function(ev){
ev.preventDefault();
alert($('#test').val());
});
...to get the value of the input.
If you want to get value of any input use
$('form').submit(function(ev){
ev.preventDefault();
alert($("#test").val());
});
$('input').val();
in forms you can use .serialize();
Related
How can I reset a HTML form with JavaScript? My form actually contains PHP default value.
I used this to clear:
function reset(){
document.getElementById("moduleform_insert").reset();
}
It works perfectly when there is no <input value="0">.
Is there any method that can clear or I should grab each input value and one by one set to empty?
Hope someone would give some advice. Thanks.
You can use jQuery to do this.
function reset(){
jQuery("#moduleform_insert").val('');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="moduleform_insert" value="0" />
<input type="button" onClick="reset();" value="Reset" />
And if you have multiple input elements, you can change above reset() function to this one, which will loop through all your input elements and set their value to empty (you can put container id or class in front of input jQuery(".container input") ):
function reset(){
jQuery("input").each(function(){
jQuery(this).val('');
});
}
It works perfectly when there is no .
Is there any method that can clear or I should grab each input value
and one by one set to empty?
This is how reset works
The HTMLFormElement.reset() method restores a form element's default
values. This method does the same thing as clicking the form's reset
button.
If you want to clear the values, then simply fetch them and clear them one by one
var form = document.getElementById("moduleform_insert");
var allNumberAndTextInputs = form.querySelectorAll("input[type='number'], input[type='text'] ");
Array.from( allNumberAndTextInputs ).forEach( function( ele ){
ele.value = ""; //set the value to empty
})
function reset() {
document.getElementById("Form").reset();
}
<form id="Form">
<input type="text">
<input type="button" onClick="reset();" value="Reset" />
</form>
var form = $('#myform');
form.find('input:text,textarea,select').val('');
form.find('input:radio,input:checkbox').each(function(){
this.checked = false;
});
This is the base code. You can add 'input:email', 'input:phone' and so on if you like. Or do something like this:
form.find('input').not(':hidden,:submit').val('');
I am trying to get a value out of a <input type='num'> with JavaScript I am using the following code:
Choose a number between 1 and 5 <input type='num' name="input">
<button id="btn">Click me!</button>
<script>
var input;
document.getElementById('btn').onclick = function(){
input = document.getElementById('num');
alert(input); //To check what value input has
</script>
This should get a value but I just get a null what am I doing wrong?
You have not defined your id. Also I guess your input type should be number.
<input type='number' name="input" id="num">
^^^^^^^^^^^^ ^^^^^^^^
And to alert its value you need to use
alert(input.value) //.value is used to get value of input
There are more than one problems with your code
1) You have to close the bracket of your function
it should be
document.getElementById('btn').onclick = function(){
input = document.getElementById('num');
alert(input); //To check what value is outputted
}
2)
input = document.getElementById('num');
The getElementById() method returns the element that has the ID
attribute with the specified value.
so ID attribute is essential here and in your code there is no ID attribute defined so you have to defined it first
like
<input type='number' id="num" name="input">
3) document.getElementById('num'); does not return the value of input field
it returns object
so if you want value then use the following code
document.getElementById('num').value;
4) your input type="number"
for the desired output you can use following code
Choose a number between 1 and 5 <input type='number' name="input" id="myid">
<button id="btn">Click me!</button>
JS
var myButton = document.getElementById("btn");
myButton.onclick = function()
{
alert(document.getElementById("myid").value); //where does id come from?
}
The above method is pure JS if you need jquery method you can refer below
$( "#btn" ).click(function() {
var input=$("#myid").val();
alert(input)
});
getElementById() works on elements with id attribute. So, as you have not put id attribute in your input type, it is not able to find the element with id=num.
Just add id="num" in your input element and then you are good to go.
The code below is made to detect the name of the input method user focus in , the problem is it alerts the same name for all textboxes.
var huntedTextBox;
//focus in any textfield to get its name into the vairable.
$("input").focus(function() {
huntedTextBox = $("input").attr('name');
alert(huntedTextBox);
});
Here is a Fiddle for the code.
Thanks.
Just doing a search for $('input') will return all <input>s in the document. Then, doing .attr() will get the attribute for the first.
To get the attribute of the <input> that was clicked, use $(this).attr('name');
You need to use this for selecting that particular textbox that's focused on...
Here's a snippet:
var huntedTextBox;
//focus in any textfield to get its name into the vairable.
$("input").focus(function() {
huntedTextBox = $(this).attr('name');
alert(huntedTextBox);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="textBox" />
<input type="text" name="Bader" />
huntedTextBox = $(this).attr('name');
Is it possible to modify the value of each textfield present in a webpage, based on the original value, using jQuery or JavaScript?
For example, suppose I have 50 textfields in a page. I want to remove whitespace from the beginning and end of each textfield’s value. I don’t find it to be a good idea to call the function for every textfield individually. How can I do it without calling a function for each textfield?
Can just use val() with a callback argument. It will loop over all elements for you:
$('input[type=text]').val(function( index, originalValue){
return $.trim(originalValue);
});
val() API docs
You can execute this code:
$('input[type=text]').each(function (i, e) {
var $this = $(e);
$this.val($this.val().trim());
});
Get all the inputs from the page using jquery then run a loop, and for each element trim the value
<body>
<input type="text" value=" abc " >
<input type="text" value=" def " >
<input type="button" id="remove" value="Remove">
<script type="text/javascript">
$(document).ready(function(){
$('#remove').click(function(){
var inputs = $('input[type=text]');
$.each(inputs, function(index,input){
$(input).val($(input).val().trim())
});
});
});
</script>
</body>
my requirement is to save the entire "html" inside a div, but when i load an "html" with text fields to a div and then editing the value of the text box, the newly set value doesn't reflect in the core "html". I tried to inspect the value with fire bug and it remains the same or no value at all.With "jquery" i tried to set attribute but no attribute name value is created. how can i set the value of text fields and then get that "html" with the newly set value.
here is my html
<div class="sub_input_box">
<input type="text" / class="boreder_line">
<input type="text" id="txt" value=""/>
<input type="hidden" id="hid" />
<div class="clear"></div>
</div>
and the jquery i used to set attribute
$("#txt").attr("value", "some value");
Chances are you're calling your jQuery code before the HTML input part. You can either place the jQuery stuff below it, or if you don't want to, you can do something like this:
$(document).ready(function(){
$("#txt").attr("value", "some value");
});
That will only run when the page is fully loaded.
However, it's unclear if you're using AJAX to load those inputs into your DOM. If so, you need to call $("#txt").attr("value", "some value"); in the onSuccess callback function which is fired after the AJAX successfully responds.
You can try something like this:-
<input name="example" type="text" id="example"
size="50" value="MyDefaultText" onfocus="if(this.value=='MyDefaultText')this.value=''"
onblur="if(this.value=='')this.value='MyDefaultText'" />
Have you tried:
$("#txt").val("Hello World!");
For setting the text value, and,
var my_string = $("#txt").val();
For getting the text value.
Let me know if it works.
Excellent question. You would think clone would do this on its own, alas, it doesn't.
Here is a sample than you can hopefully adapt to do what you need
HTML
<div id=divToCopy>
<input name=i1 value=foo><br>
<input name=i2 value=bar>
</div>
<input type=button onclick=copyDiv(); value='Copy the div'>
<div id=newDiv>
the copy will go here
</div>
JavaScript
function copyDiv() {
$('#newDiv').html($('#divToCopy').clone());
$('#divToCopy :input').each(function() {
var child=0;
for (var i = 0; i < this.attributes.length; i++) {
var attrib = this.attributes[i];
var prop=$(this).prop(attrib.name);
$($('#newDiv').find(' :input')[child]).prop(attrib.name,prop);
child++;
}
});
}
But it does work: http://jsbin.com/eXEROtU/1/edit
var html = '<input type="text" id="txt" value=""/>';
$(document).ready(function() {
$("#load").click(function() {
$("#sub_input_box").html(html);
});
$("#inspect").click(function() {
alert($("#txt").val());
});
});
$(document).on('focusout','input[type="text"]',function(a){
console.log(a.target.value);
a.target.setAttribute("value",a.target.value);
});
this is the solution i found, i had to set the value attribute explicitly on loose focus from the text field