How do i change my submit button text after submit?? i have a form with a button . i would like to change the button text from click to Next after submit the form.
<form>
<div class="form-group">
<div class="rightbox"> <label for='phone'>phone</label></div>
<div class="leftbox">
<div class="col-sm-12">
<input class="text-box single-line" data-val="true" name="phone" type="tel" value="" />
</div></div>
</div>
<div class="form-group">
<div class="rightbox"> <label for='phone'>mobile</label></div>
<div class="leftbox">
<div class="col-sm-12">
<input class="text-box single-line" data-val="true" name="phone" type="tel" value="" required />
</div></div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="btnok">
<br/>
<button type="submit" class="btn-primary" >
click
</button>
</div>
</div>
</div>
</form>
$("#save").on('click',function(){
var $btnElm = $(this);
$("form").submit(function() {
return $btnElm.text('Next');
});
})
<button type="submit" class="btn-primary" id="save" >
i think this is how you can change.
else you want to more specific with the only after form is submitted then you can go with the ajax method to submit the form and change the text the of button to next after only submitting the form
$("#save").on('click',function(){
var $btnElm = $(this);
$("form").submit(function() {
$.ajax({
url: $(this).attr('action'),
method: "POST",
data : $(this).serialize(),
success : function (data){
$btnElm.text('Next');
}
});
});
});
You can try with the below link.
fiddle link
$(document).ready(function(e) {
$('#theForm').submit(function() {
var txt = $('#btnSubmit');
txt.val("Next");
return confirm("Do you want to save the information?");
});
});
Updated link: Fiddle
Try with this.
First off all, add id to your form and button.
<form id="myform">
....
<button id="mybutton" type="submit" class="btn-primary" >
click
</button>
...
</form>
Then, using JQuery you can do a Jquery Callback after form submit.
$("#myform").bind('ajax:complete', function() {
document.getElementById("mybutton").value="New Button Text";
});
It works for me. I Hope it helps.
Edit
If you dont want to use JQuery you can use onSubmit event to call a function after form submit.
<form onsubmit="changeButton()">
....
<button id="mybutton" type="submit" class="btn-primary" >
click
</button>
...
</form>
This is the function to change button text.
function changeButton(){
document.getElementById("mybutton").value="New Button Text";
}
Related
i have a form, i want to show a confirmation div BEFORE submitting it, if the user clicks ok on the new div, it submits, if not it won't, i'm using slideUp() and slideDown(), im kind if stuck, it's not working, it just redirects to the next page, how do i return true with a new button click to actually submit the form, not with the original submit button?
<div class="choosing" id="choosing">
<form action="rides.php" method="POST" id="tripinfo">
<label> Date of the trip: <br>
<input id="date" type="date" min="2021-06-21" required>
</label> <br>
<button type="submit" id="subBtn" class="btn"> Finish up</button>
</form>
</div>
<div class="confirmation " id="confirmation" style="display:none" ;>
//some stuff
<button id="ok">ok</button>
</div>
the script:
<script>
$('#tripinfo').submit(function () {
$("#choosing").slideDown();
$("#confirmation").slideUp();
if ($('#ok').click)
return true;
else
return false;
//i'm pretty sure this if statement is wrong but i don't know what is wrong with it lol.
}
});
</script>
use event.preventDefault() instead of return false
You'll need cancel submitting the form with preventDefault() and than use different event handler to listen when user clicked on "ok" button, and only than submit the form:
$('#tripinfo').submit(function(e) {
if (e.originalEvent && e.originalEvent.isTrusted) //check if user clicked submit button or javascript clicked it
e.preventDefault(); //prevent submitting the form if user clicked
$("#choosing").slideUp();
$("#confirmation").slideDown();
});
$('#ok').click(function() {
$('#tripinfo').submit();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="choosing" id="choosing">
<form action="rides.php" method="POST" id="tripinfo">
<label> Date of the trip: <br>
<input id="date" type="date" min="2021-06-21" required>
</label> <br>
<button type="submit" id="subBtn" class="btn"> Finish up</button>
</form>
</div>
<div class="confirmation " id="confirmation" style="display:none" ;>
//some stuff
<button id="ok">ok</button>
</div>
I have to call a js function before asp-action is called on button click
<form asp-action="Index" method="post">
#Html.AntiForgeryToken()
var x = jsfunction();
<div class="form-group">
<input type="submit" value=#Localizer["Button"] class="btn Button" />
</div>
</form>
I want to call the js funtion on click of the submit button and then it should proceed to the controller action method
You can try as follow :
<form id='myForm' asp-action="Index" method="post">
#Html.AntiForgeryToken()
var x = jsfunction();
<div class="form-group">
<input id='submitBTN' type="button" value=#Localizer["Button"] class="btn Button" />
</div>
</form>
And call it's click event by jquery or js"
<script>
$('#submitBTN').on('click', function () {
jsfunction();
$('#myForm').submit();
});
</script>
Use the form's submit event:
const form = document.getElementById('myForm');
const checkbox = document.getElementById('check');
form.addEventListener('submit', e => {
if (!checkbox.checked) {
// can cancel the submit here if you want
e.preventDefault();
alert('not checked');
}
// do other stuff here before posting to the server
});
<form id="myForm" method="post" action="#submit">
<label style="display: block">
<input id="check" type="checkbox" />
<span>proceed</span>
</label>
<button>Submit</button>
</form>
I have a login button that works fine,it logs a user in etc.. but i want to allow the user to press the enter key to login as well. how do i do this.I tried a test using onkeypress but it didnt do anything as bellow
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Username id="username" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="........" id="password" onkeypress=myFunction() /> //i just tried this myFunction() to see if it would give an alert but it doesnt
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-login" id="btnLogin">Log in</button>
</div>
</div>
</form>
function myFunction()
{ alert("button pressed")}
so how do i use the enter key to submit my request in javascript and jquery
As you've placed the input within a form element which contains a submit button, you get this behaviour by default. To hook to it, use the submit event of the form, like this:
$('form').on('submit', function(e) {
e.preventDefault(); // only used to stop the form submission in this example
console.log('form submitted');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Username" id=" username" />
</div>
<div class="form-group ">
<input type="password" class="form-control" placeholder="........" id="password" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-login" id="btnLogin">Log in</button>
</div>
</form>
Note that I fixed the missing " after the placeholder attribute in the first input. You also don't need the trailing space after all the attribute values, so I removed those too.
First you need to send the Event to the myFunction() function and add ID to your form to add submit manually::
HTML
<form id='myForm'>
<!-- form actions (etc..) -->
<input type="password" class="form-control" placeholder="........" id="password" onkeypress=myFunction(e) />
<!-- form actions (etc..) -->
</form>
Now in ASCII the reenter code is 13 all you need to check is when the pressed key is reenter (13) then you need to take the event key code and call the submit function::
function myFunction(e)
var code = (e.keyCode ? e.keyCode : e.which);
{
if (code == "13")
{
//Calling the submit or clicking manually it
$( "#myForm" ).submit();
}
}
The html code below:
<div class="row">
<form class="col-xs-6" id="add-car-form" method="post" action="add_cars.php">
<div class="form-group">
<label for="car-name">ADD CAR</label>
<input type="text" name="car_name" class="form-control" required>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="add car">
</div>
</form>
</div>
The Javascript code with AJAX inside following:
$('#add-car-form').submit(function (e){
e.preventDefault();
var postData=$(this).serialize();
var url=$(this).attr('action');
$.post(url,postData, function (php_table_data){
$('#car-result').html(php_table_data);
$('#add-car-form')[0][0].reset();
});
});
The input element never resseting. I tried to put an id in my input element and targeting with reset() function but neither worked.
Any help from you is welcome.Thanks
Try $('#add-car-form')[0][0].val("");
$('#add-car-form').find("input[type=text]").val(""); will clear all text inputs in the form
jQuery does not have a reset() method, but js does, so if you want to use reset() you should use
document.getElementById('#add-car-form')[0][0].reset()
I want to have form fields, when populated and a button clicked will change the contents of span's within html. I have tried the following but the span contents aren't being replaced.
I have written the following html:
<form role="form">
<div class="form-group">
<label for="name">
Name
</label>
<input type="text" class="form-control" id="nameValue" />
</div>
<button id="generate" type="submit" class="btn btn-default">
Generate Story
</button>
</form>
<p>The persons name is <span id="name"></span></p>
Then have written the following jQuery:
<script>
$(function() {
$("button").click( function()
{
$("#nameValue").keyup(function() {
var val = $(this).val();
$("#name").html(val);
});
}
);
});
</script>
Try separating keyup, click event handlers , setting button disabled to true if no value at "#nameValue" , setting button disabled to false at keyup event
$(function() {
var button = $("button"),
val = "";
$("#nameValue").keyup(function() {
val = $(this).val();
if (val.length > 0 && /\w+/.test(val)) button.prop("disabled", false)
});
button.click(function(e) {
e.preventDefault();
$("#name").html(val);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form role="form">
<div class="form-group">
<label for="name">
Name
</label>
<input type="text" class="form-control" id="nameValue" />
</div>
<button id="generate" type="submit" class="btn btn-default" disabled="true">
Generate Story
</button>
</form>
<p>The persons name is <span id="name"></span>
</p>
This will change span value after button click and on keyup
<script>
$(function() {
$("button").click( function(){
changeSpanValue($("#nameValue").val());
});
$("#nameValue").keyup(function() {
changeSpanValue($(this).val());
});
});
function changeSpanValue(val){
$("#name").html(val);
}
</script>