I have a submit button in my form, I'm not using onsubmit event because i'm gonna add more submits button to this same form. So i'm doing like this:
<script type="text/javascript" src="../script/script.js"></script>
<form id="form_cad" action="my_php.php" method="post" enctype="multipart/form-data">
<input type="submit" id="submit1" value="Add" onclick="return confirmMessage();"/>
</form>
function confirmMessage()
{
var x = confirm("...");
if(x)
{
document.getElementById("my_post_value").value = "val1";
return true;
}
return false;
}
I'm using the latest version of Firefox, IE and Google Chrome, but in Chrome the onclick event is not working.
Instead of using onclick attribute for your submit button, onsubmit for your <form>
Try replacing your code as follows
<form id="form_cad" action="my_php.php" method="post" enctype="multipart/form-data" onsubmit="return confirmMessage();">
<input type="text" name="email" id="email">
<input type="submit" id="submit1" value="Add"/>
</form>
Because you are in into a form, the onsubmit event is triggered automatically, one way of stop it is after call confirmMessage(), return false. That stop the propagation of events:
<form id="form_cad" action="my_php.php" method="post"
enctype="multipart/form-data" onclick="confirmMessage(); return
false;">
<input type="text" name="email" id="email">
<input type="submit" id="submit1" value="Add"/>
</form>
It's working fine in my Chrome, and I've never had problems using events on submit buttons, but since you're using an external js file you might want to try it with a pure js solution, instead of inline:
See example below:
function confirmMessage() {
var x = confirm("Click OK to submit form");
if (x) {
return true;
}
return false;
}
document.getElementById('submit1').onclick = function() {
return confirmMessage();
};
<form id="form_cad" action="my_php.php" method="post" enctype="multipart/form-data" onsubmit="alert('submitting')">
<input type="submit" id="submit1" value="Add" />
</form>
The alert in the form's onsubmit is just to illustrate that the event is actually only called when confirm() returns true.
I had a similar problem but I fixed it launching the submit event inside the 'onclick' function. I also prevented the event to prevent launching it twice in the case of using Firefox:
submit_button.click(function(event){
event.preventDefault();
var selected_file = $("#id-file-to-upload").val();
if (selected_file) {
submit_button.prop('disabled', true);
submit_button.prop('value', "Loading");
}
var upload_form = $("#id-form-to-submit");
upload_form.submit();
});
Related
Currently I am trying to make my input field required.
<form name="myForm" method="post">
<input type="text" id="username" name="username" required>
<center><button id="process2" type="submit">Continue</button> </center>
</form>
When I have the above portion it works, however I need it to work whenever I have my button containing a onlick event. <button id="process2" type="submit" onclick="move()">Continue</button> how can I go about doing this?
The issue is currently - The onclick request will fire, and it'll prompt the required option, however the onclick request should not fire unless the required option is populated.
Instead of the onclick , you should listen for the form's submit, and call move() inside it
document.querySelector('form').addEventListener('submit', event => {
event.preventDefault();
console.log('submitted');
move();
});
function move() {
console.log('moving ..');
}
<form name="myForm" method="post">
<input type="text" id="username" name="username" required>
<button id="process2" type="submit">Continue</button>
</form>
Or you can just simply fire the move function but wrap your deserted effect inside if statement that will check if input is empty or not...
function move() {
element = document.getElementById("username").value;
if (element === "") {
console.log("input wasnt populated do something");
}
}
<form name="myForm" method="post">
<input type="text" id="username" name="username" required>
<center><button id="process2" type="submit" onclick="move()">Continue</button> </center>
</form>
Using jquery you can listen the submit event on form like then call move function to redirect to other page or whatever logic you want
$(document).on('submit','form',function(){
event.preventDefault();
// call move function here , move();
});
I have this form
<form id="form" method="POST" onsubmit="return validate()">
<input type="text" id="name" name="name">
<input type="submit" value="next">
</form>
and this validation
if ($("#name").val() == "") {
return false;
}
return true;
what I am trying to do, is to disable the submit button, I tried to use submit function for the form but its not triggered, the problem is I don't have access to html or js files, only one custom.js file I can add or override other functions.
anyone can help me ?
Thanks
so if you have $("#name") probably you have the jquery library.
in this case you can try remove onsubmit html property directly and use this event from jquery. $("#form").submit(...) and there you can use your validation function with return boolean value
You can override the validate function (but it is a bit dirty):
function validate() {
console.log('default validator');
return false;
}
var defaultValidator = validate;
window.validate = function () {
defaultValidator();
console.log('custom validator');
return false;
};
<form id="form" method="POST" onsubmit="return validate()">
<input type="text" id="name" name="name">
<input type="submit" value="next">
</form>
Try this in your validate function.
$('#form>submit').prop('disabled', true);
Hi i have have this form that i do no want to perform an action when the submit button is clicked. All i want to do is perform the a function that loads data into a div. Any Ideas??
<form method="POST" action="" id="search-form">
<input type="text" name="keywords" />
<input type="submit" value="Search" id="sButton" onclick="loadXMLDoc('file.xml')" />
</form>
onclick="loadXMLDoc('file.xml'); return false;"
or even better:
<script>
window.onload = function() {
document.getElementById("search-form").onsubmit = function() {
loadXMLDoc('file.xml');
return false;
};
};
</script>
To implement loadXMLDoc, you can use the ajax module in jQuery. for example:
function loadXMLDoc() {
$("div").load("file.xml");
}
Final code using jQuery:
<script>
$(function() {
$("#search-form").submit(function() {
$("div").load("file.xml");
return false;
});
});
</script>
I think you need ajax function to load data with in div without page reload
Change input type submit to button
<input type="button" value="Search" id="sButton" onclick="AjaxSend()" />
Ajax CAll:
<script type="text/javascript">
function AjaxSend(){
$.get('file.xml', function(data) {
$('div').html(data);
});
}
</script>
use prevent defaults to avoid form action.please refer the code below it might help you
function createRecord(){
event.preventDefault();
}
<form>
<input type="text"/>
<input type="submit" onclick="createRecord()"/>
</form>
just remove action param from form and add onsubmit="return false". It will return false everytime you click on any button in your form.
Try like this:
<form method="POST" onsubmit="return false" id="search-form">
<input type="text" name="keywords" />
<input type="submit" value="Search" id="sButton" onclick="loadXMLDoc('file.xml')" />
</form>
What I am doing is catching the click action on my form's submit button, preventDefault()ing it, doing some computation, and then making an ajax call instead of submitting the form.
Is there a way to use javascript to force the html5 validators to fire even if the form isn't being submitted?
$('#submitButton').click(function (e) {
e.preventDefault(); //stop the form from submitting
//Do computation
$.post('/comments', values, function(results) {
hideForm($('#new_comment_' + parentId));
parent.children('.children').prepend(results);
}, 'html');
});
It works just fine, I tested in latest Chrome and Firefox. Just e.preventDefault() on the <form>:
html:
<form method="post" action="test.html">
<input type="text" required></input>
<input type="submit" value="Submit">
</form>
jQ:
$('form').submit(function(e){ e.preventDefault(); });
example: http://jsfiddle.net/elclanrs/2nnLc/2/
Using html5 constraints the form object has some new methods. For example you can call checkValidity() on the form object to check the input.
<form method="post" action="test.html" id="myForm">
<input type="text" required></input>
<input type="submit" value="Submit" id="submitButton">
</form>
<script type="text/javascript">
$('#submitButton').click(function (e) {
e.preventDefault();
alert($("#myForm").get()[0].checkValidity());
})
</script>
i have a form which has a button that submits the form. I need to do something before submits happen. I tried doing onClick on that button but it happens after the submit.
I can't share the code but, generally, what should I do in jQuery or JS to handle this?
If you have a form as such:
<form id="myform">
...
</form>
You can use the following jQuery code to do something before the form is submitted:
$('#myform').submit(function() {
// DO STUFF...
return true; // return false to cancel form action
});
Update; for newer JQuery versions (to avoid deprecation warnings), try:
$('#myform').on('submit', function() {
// ...
return true;
});
Assuming you have a form like this:
<form id="myForm" action="foo.php" method="post">
<input type="text" value="" />
<input type="submit" value="submit form" />
</form>
You can attach a onsubmit-event with jQuery like this:
$('#myForm').submit(function() {
alert('Handler for .submit() called.');
return false;
});
If you return false the form won't be submitted after the function, if you return true or nothing it will submit as usual.
See the jQuery documentation for more info.
You can use onclick to run some JavaScript or jQuery code before submitting the form like this:
<script type="text/javascript">
beforeSubmit = function(){
if (1 == 1){
//your before submit logic
}
$("#formid").submit();
}
</script>
<input type="button" value="Click" onclick="beforeSubmit();" />
make sure the submit button is not of type "submit", make it a button. Then use the onclick event to trigger some javascript. There you can do whatever you want before you actually post your data.
Form:
<form id="formId" action="/" method="POST" onsubmit="prepareForm()">
<input type="text" value="" />
<input type="submit" value="Submit" />
</form>
Javascript file:
function prepareForm(event) {
event.preventDefault();
// Do something you need
document.getElementById("formId").requestSubmit();
}
Note: If you're supporting Safari (which you probably are) you'll need to pull in a polyfill for requestSubmit()