I would like to change the value of the textboxes when the user clicks the submit button with Jquery. I tried it with
$('textbox').val('Changed Value');
and
$('#dsf').val('Changed Value');
but neither method worked.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>serializeArray demo</title>
<style>
body, select {
font-size: 14px;
}
form {
margin: 5px;
}
p {
color: red;
margin: 5px;
}
b {
color: blue;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p><b>Results:</b> <span id="results"></span></p>
<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
<br>
<input type="checkbox" name="check" value="check1" id="ch1">
<label for="ch1">check1</label>
<input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
<label for="ch2">check2</label>
<input type="radio" name="radio" value="radio1" checked="checked" id="r1">
<label for="r1">radio1</label>
<input type="radio" name="radio" value="radio2" id="r2">
<label for="r2">radio2</label>
<input type="submit" value="s1" id="ch">
<input type="submit" value="szv" id="cd" >
<input type="text" value = "abc" id = "dsf" >
<input type="text" value = "abc" id = "dsxzcv" >
</form>
<script>
function showValues() {
var fields = $( ":input" ).serializeArray();
$( "#results" ).empty();
jQuery.each( fields, function( i, field ) {
$( "#results" ).append( field.value + " " );
});
}
$( ":checkbox, :radio" ).click( showValues );
$( "select" ).change( showValues );
$(#ch1).val("adfsadf") ;
showValues();
$(‘:submit’).click(function () {
$(‘:submit’).val() = "dasf" ;
$('textbox').val('Changed Value');
//$('#dsf').val('Changed Value');
}
</script>
</body>
</html>
This question is related to
javascript
jquery
This will change the value when button is clicked:
<script>
jQuery(function() {
$('#b11').click(function(e) {
e.preventDefault();
var name = "hello";
$("#t1").val(name);
});
});
</script>
You could just use this very simple way
<script>
$(function() {
$('#cd').click(function() {
$('#dsf').val("any thing here");
});
});
</script>
jQuery:
$(document).ready( function ) {
$('element').val('Changed Value');
$('element').html('Changed Value');
$('element').text('Changed Value');
});
JavaScript:
window.onload = function() {
element.value = 'Changed Value';
element.innerHTML = 'Changed Value';
element.textContent = 'Changed Value'; // All browsers except IE. For IE: innerText
};
$('#cd').click(function() {
$(this).val('dasf'); // update the value of submit button
$('#dsf').val('Changed Value') // update the text input value
});
textbox is not a valid selector.
Also, when you hit the submit button it will submit the form as default behavior. So don't forget to stop default form submission.
Better if you do like this:
$('form').on('submit', function() {
// write all your codes
return false; // Prevent default form submission
});
Don't forget to user jQuery DOM ready $(function() { .. });
<style>
.form-cus {
width: 200px;
margin: auto;
position: relative;
}
.form-cus .putval, .form-cus .getval {
width: 100%;
}
.form-cus .putval {
position: absolute;
left: 0px;
top: 0;
color: transparent !important;
box-shadow: 0 0 0 0 !important;
background-color: transparent !important;
border: 0px;
outline: 0 none;
}
.form-cus .putval::selection {
color: transparent;
background: lightblue;
}
</style>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<div class="form-group form-cus">
<input class="putval form-control" type="text" id="input" maxlength="16" oninput="xText();">
<input class="getval form-control" type="text" id="output" maxlength="16">
</div>
<script type="text/javascript">
function xText() {
var x = $("#input").val();
var x_length = x.length;
var a = '';
for (var i = 0; i < x_length; i++) {
a += "x";
}
$("#output").val(a);
}
$("#input").click(function(){
$("#output").trigger("click");
})
</script>
function xText() {_x000D_
var x = $("#input").val();_x000D_
var x_length = x.length;_x000D_
var a = '';_x000D_
for (var i = 0; i < x_length; i++) {_x000D_
a += "x";_x000D_
}_x000D_
$("#output").val(a);_x000D_
}.form-cus {width: 200px;margin: auto;position: relative;}_x000D_
.form-cus .putval, .form-cus .getval {width: 100%;box-sizing: border-box;}_x000D_
.form-cus .putval {position: absolute;left: 0px;top:0; height:100%; color: transparent;background: transparent;border: 0px;outline: 0 none;}_x000D_
.form-cus .putval::selection {color: transparent;background: lightblue;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>_x000D_
<p>Input Number or Strong Mouse Click is Hidden... </p>_x000D_
<div class="form-cus">_x000D_
<input class="putval" type="text" id="input" maxlength="16" oninput="xText();" placeholder="Input Text" />_x000D_
<input class="getval" type="text" id="output" maxlength="16" />_x000D_
</div>if you want to change the text of "input",use:
`$("#inputId").val("what you want to put")`
and if you want to change the text in "label","span","div", you can use
`$("#containerId").text("what you want to put")`
Try this jsfiddle:
$(function() {
$('#cd').click(function () {
$('#dsf').val('Changed Value');
});
});
If .val() is not working, I would suggest you to use the .attr() attribute
<script>
$(function() {
$("your_button").on("click", function() {
$("your_textbox").val("your value");
});
});
</script>
You may try following this:
You forgot to add quote : $(#ch1).val("adfsadf") ;
This supposed to be : $('#ch1').val("adfsadf") ;
Try this out:
<script>
$(document).ready(function() {
$("#button-id").click(function() {
$('#text').val("create");
});
});
</script>
Use ready event of document :
$(document).ready(function(){ /* the click code */ });
And it is better to use bind method for event handeling. because you don't want to call click action in every load of page
$(':submit').bind('click' , function () { /* ... */ });
Use like this on dropdown change
$("#assetgroupSelect").change(function(){
$("#idValue").val($this.val());
})
you simply do like this hope will help you
$(document).ready(function(){
$("#cd").click(function () {
$('#dsxzcv').val("Changed_Value");
})
})
here you can see the demo
Because you're trying to add a click event to a submit input you will need to prevent the normal flow that this will do that is submit the form.
You can also use $(document).ready()
But since you have your script tag at the end of the page the DOM is already loaded.
To prevent the default you will need something like this:
$("form").on('submit',function(e){
e.preventDefault();
$("#dsf").val("changed value")
})
If the element wasn't a submit input it will be as simple as
$("#cd").click(function(){
$("#dsf").val("changed value")
})
See this Fiddle
Document ready function was missing thats why the code was not working. For example:
$(function(){
$('#button1').click(function(){
$('#txtbox1').val('Changed Value');
});
});
Simple and easy :
$('#email').val(YourNewValue);
Source: Stackoverflow.com