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>
Related
I have to post data to php but when I do, the page reloads. I have tried fixing this using answers given in similar questions but none of them yield proper results. Thanks for your help.
<!--HTML-->
<form method="post" action="index.php" onclick = "sendForm(event);">
<input type="text" class="form-control" id="code" name="rand5_code">
<input type="submit" href="" name="rand5_btn" class="btn btn-success" value="Enter">
</form>
//Javascript
<script type="text/javascript">
function sendForm(e){
e.preventDefault();
}
</script>
Another way that I was recommended was by using ajax:
<form id="form" >
<input style="width:200;margin-top:5px" type="text" class="form-control" id="code" name="installer2_code" placeholder="Enter Code">
<input type="submit" href="#" style="margin-top:5px" name="installer2_btn" class="btn btn-success" id="form" onclick =" sendForm(event);" value="Enter">
</form>
<script>
$('#form').on('click', function(e){
e.preventDefault();
var name = $(#code).val(),
$.ajax({
type: 'post',
url: 'header_php.php',
});
});
</script>
Try to add onclick = "sendForm(event);" in button instead of form
you could change onsubmit instead of onclick in the form
function sendForm(e) {
e.preventDefault();
}
<form method="post" action="index.php" onsubmit="sendForm(event);"><!--changes-->
<input type="text" class="form-control" id="code" name="rand5_code">
<input type="submit" href="" name="rand5_btn" class="btn btn-success" value="Enter">
</form>
Change button type="submit" to button Type="button" and
Use jquery ajax
$("#btnid").click(function(){
$.ajax({
method: "POST",
url: "some.php",
data: { name: $('#code').val()}
})
.done(function( msg ) {
alert( "Data Saved: " + msg );
});
})
Also remove action from form
Add onsubmit="return false;" to your form. In you js function e is clickEvent not is SubmitEvent, submitEvent make page reload.
<!--HTML-->
<form method="post" action="index.php" onsubmit="return false;" onclick = "sendForm(event);">
<input type="text" class="form-control" id="code" name="rand5_code">
<input type="submit" href="" name="rand5_btn" class="btn btn-success" value="Enter">
</form>
//Javascript
<script type="text/javascript">
function sendForm(e){
e.preventDefault();
}
</script>
I am trying to reset a form and I have a function, the form resets before it submits. Is there a way to get it to wait a few seconds?
<form action="#" method="POST" id="file-form" name="file-form" enctype="multipart/form-data">
<div class="file-field input-field">
<div class="btn">
<span>File</span>
<input type="file" class="upload" id="files" name="files" multiple>
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Upload one or more files">
</div>
</div>
<button class="btn waves-effect waves-light" type="submit" value="submit" name="action" onclick="submitForm()">Submit
<i class="material-icons right">send</i>
</button>
</form>
<script type="text/javascript">
function submitForm() {
var resetForm = document.getElementsByName('file-form')[0];
resetForm.submit();
resetForm.reset();
return false;
}
</script>
You can use setTimeOut method to reset the form after 3 seconds.
var formReset;
function triggerReset() {
formReset= setTimeout(resetDelay, 3000);
}
function resetDelay() {
resetForm.reset();
}
function submitForm() {
var resetForm = document.getElementsByName('file-form')[0];
resetForm.submit();
triggerReset();
return false;
}
About your question
Is there a way to get it to wait a few seconds?
setTimeout(function(){
//submit code
}, 3000); //wait 3 seconds before reset
How can I know which form I clicked? Is it possible with a button class instead of buttons with id?
$(document).ready(function () {
$(".form-buttons").click(function () {
//I only want the form which corresponds to the button I clicked
var formDates = $(form).serialize()
alert ("You clicked "+formDates)
})
})
<form id="form1">
<input type="text" value="date1" name="name1"/>
<input type="text" value="date2" name="name2"/>
<input type="text" value="date3" name="name3"/>
<button type="button" class="form-button"></button>
</form>
<form id="form2">
<input type="text" value="date4" name="name1"/>
<input type="text" value="date5" name="name2"/>
<input type="text" value="date6" name="name3"/>
<button type="button" class="form-button"></button>
</form>
Yes use class instead of id for similar elements. Please try this.
Note: form-button is the class name in your HTML and not form-buttons
$(document).ready(function () {
$(".form-button").click(function () {
var formDates = $(this).closest('form').serialize();
alert ("You clicked "+formDates)
})
})
I think you be looking for
$('.form-button').on('click', function () {
alert($(this).parents('form').attr('id')); // Check the ID of the form clicked
});
something Maybe Like mentioned above.
You can get the name of the element by using the this keyword which refer, in a DOM event, to the cibled element :
$(document).ready(function () {
$(".form-buttons").click(function () {
alert('You clicked the form' + this.parentElement.getAttribute('id'));
})
})
You can do this in a few different ways. You can traverse up the DOM and see which form is used or -and this is my favorite- you can submit the form!
Solution 1: Traversing up the DOM
<script>
$(document).ready(function () {
$(".form-button").click(function () {
var clicked_form = $(this).parent();
var formDates = clicked_form.serialize();
alert ("You clicked "+formDates);
})
})
</script>
</head>
<body>
<form id="form1">
<input type="text" value="date1" name="name1"/>
<input type="text" value="date2" name="name2"/>
<input type="text" value="date3" name="name3"/>
<button type="button" class="form-button"></button>
</form>
<form id="form2">
<input type="text" value="date4" name="name1"/>
<input type="text" value="date5" name="name2"/>
<input type="text" value="date6" name="name3"/>
<button type="button" class="form-button"></button>
</form>
</body>
Solution 2: Submit the form
You already are using the form, so why not submit it? Change the buttons to input elements with type submit and intercept the submit event, like this. This is how I think it should be done. It is also better for user experience because the user can just submit the form by pressing enter.
<script>
$(document).ready(function () {
$("form").on('submit', function (e) {
e.preventDefault();
var formDates = $(this).serialize()
alert ("You clicked "+formDates)
})
})
</script>
</head>
<body>
<form id="form1">
<input type="text" value="date1" name="name1"/>
<input type="text" value="date2" name="name2"/>
<input type="text" value="date3" name="name3"/>
<input type="submit" class="form-button"></input>
</form>
<form id="form2">
<input type="text" value="date4" name="name1"/>
<input type="text" value="date5" name="name2"/>
<input type="text" value="date6" name="name3"/>
<input type="submit" class="form-button"></input>
</form>
</body>
Check this fiddle on how I would do it.
https://jsfiddle.net/xtfeugav/
Simple use
$("form").submit(function(e) {
to listen for every submit on all the forms you have. To get the ID of the form you use
var formid = $(this).attr('id');
I used e.preventDefault(); to prevent the form don't update the page.
Remember to use <input type="submit" value="Submit"> on your forms to make this work.
Its a simple code, hope it helps.
I have a form which the submit button wont execute the function being called onclick.
<form method="get" name="myform" onsubmit="return Validate()" style="margin: 100px">
<input type="radio" id="Yes" name="Authorise" onclick="Clear_Message(Authorise_Message)"/>
Yes
<input type="radio" id="No" name="Authorise" onclick="Clear_Message(Authorise_Message)" />
No
<div class="Output" id="Authorise_Message"> </div>
<input type="submit" id="SUBMIT" name="SUBMIT" onclick="Validator()"/>
</form>
The Validator code:
function Validator()
{
//display an error message if radio button groups have no value, if it does have a value then clear the error message
Title_Radio();
Gender_Radio();
Partnership_Radio();
Communication_Radio();
Authorise_Radio();
Advice_Radio();
CC_Radio();
Switch();
alert("This function was called");
}
The radio methods check if the radio has a value, if not then it changes the Authorise_Method div to show a message next to the radios,
But the method wont seem to execute. When i had this in an <input type="button" onclick="Validator"/> it seemed to work but i needed it to submit so i changed it to a submit type button...
You should assign id to the form and then run your code at the submit event before the form being submitted, and prevent the form submission if the validation failed.
So the html should be:
<form id="theForm" method="get" name="myform" style="margin: 100px">
<input type="radio" id="Yes" name="Authorise" onclick="Clear_Message('Authorise_Message')"/> Yes
<input type="radio" id="No" name="Authorise" onclick="Clear_Message('Authorise_Message')" /> No
<div class="Output" id="Authorise_Message"></div>
<input type="submit" id="SUBMIT" name="SUBMIT"/>
</form>
And you should add the following code to your JavaScript code:
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("theForm").addEventListener("submit", function(event) {
Validator();
//if the validation fails, prevent the form submission by calling the following function:
//event.preventDefault();
});
});
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";
}