I am trying to submit a form with event data on click of a button. I have following jquery code to fire the event. But it's not getting triggered.
$(function() {
$('#button1,#button2').on('click', function(e) {
//e.preventDefault();
$('form#form1').submit({
"url": "url"
}, doSomethint);
});
function doSomethint(e) {
var url = ev.data.url;
alert(url);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" id="button1">Button1</button>
<button type="submit" id="button2">Button2</button>
<form id="form1">
<input type="text" value="123">
</form>
https://jsfiddle.net/1bdesjof/
Because the submit buttons are not in the form tag and the variable ev was undefined.
$(function() {
$('#button1,#button2').on('click', function(e) {
//e.preventDefault();
$('form#form1').submit({
"url": "url"
}, doSomethint);
});
function doSomethint(ev) {
var url = ev.data.url;
alert(url);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
<button type="submit" id="button1">Button1</button>
<button type="submit" id="button2">Button2</button><br/>
<input type="text" value="123">
</form>
The difference:
$('#form1').submit() it will submit the form
$('#form1').submit(eventData, handler) add event to the form
because your submit button outside the form there is no submit event called. Solution, add your button to the form container or call $('#form1').submit() after add event like below.
$(function() {
$('#button1,#button2').on('click', function(e) {
//e.preventDefault();
$('#form1').submit({
"url": "url"
}, doSomethint);
// call it
$('#form1').submit()
});
function doSomethint(ev) {
var url = ev.data.url;
alert(url);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" id="button1">Button1</button>
<button type="submit" id="button2">Button2</button>
<form id="form1">
<input type="text" value="123">
</form>
Related
Why is event submit not working, when $('form').submit() is?
But it working when press enter in input field
document.getElementById("mform1").addEventListener('submit', function(e) {
e.preventDefault()
alert('123')
});
<form id="mform1" name="mform1" enctype="multipart/form-data" method="post">
<input type="text">
</form>
The submit event only fires when the user submits the form. It never fires when JavaScript submits it.
You can fake it by explicitly triggering an event:
document.getElementById("mform1").addEventListener('submit', function(e) {
e.preventDefault()
alert('123')
});
var fake_submit = new Event("submit");
document.getElementById("mform1").dispatchEvent(fake_submit);
<form id="mform1" name="mform1" enctype="multipart/form-data" method="post">
<input type="text">
</form>
Use only jQuery:
$( "#mform1" ).submit( function( e ) {
e.preventDefault();
alert( "123" );
} );
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<form id="mform1" name="mform1" enctype="multipart/form-data" method="post">
<input type="text">
</form>
I have a problem. I want when I click an h1 tag, then h1 tag id add in input value and Submitted automatically. But auto submits is not working.
If I click submit button then its submitted data.
<h1 id="my-id">sadasdsa</h1>
<form action="" method="POST" id="aweberform">
<p><input type="text" name="countrycode" value="" id="country"></p>
<button type="submit" name="submit" class="btn">Submit</button>
</form>
Jquery:
$(document).on('click', 'h1', function () {
//alert(this.id);
$("h1").text(this.id);
$("input").val(this.id);
$("#aweberform").submit();
});
$(document).click(function(){
$("#aweberform").submit();
});
The problem is here:
$(document).on('click', 'path', function () {
what is path here?
you have to use either id, class, name of the attribute as a selector, but in your case there is nothing with path in html. So change path to:
$(document).on('click', '#my-id', function () {
and try again.
You can use a simpler approach as your button type is submit. Allot an id to it and on document click programmatically click on it.
<button type="submit" name="submit" class="btn" id="submitBTN">Submit</button>
THE JS:
$(document).click(function(){
$("#submitBTN").click();
});
Whatever be the event if you want to submit the form, you can always follow the above mentioned approach.
Just update #my-id instead of path:
$(document).on('click', '#my-id', function () {
//alert(this.id);
$("h1").text(this.id);
$("input").val(this.id);
$("#aweberform").submit();
});
$(document).click(function(){
$("#aweberform").submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="my-id">sadasdsa</h1>
<form action="" method="POST" id="aweberform">
<p><input type="text" name="countrycode" value="" id="country"></p>
<button type="submit" name="submit" class="btn">Submit</button>
</form>
In Your JQuery You mention You mention path but what is that
just simply change that into id of h1 tag So changes are as follows
$(document).on('click', '#my-id', function () {
Running Example
$(document).on('click', '#my-id', function () {
//alert(this.id);
$("h1").text(this.id);
$("input").val(this.id);
$("#aweberform").submit();
});
$(document).click(function(){
$("#aweberform").submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="my-id">sadasdsa</h1>
<form action="" method="POST" id="aweberform">
<p><input type="text" name="countrycode" value="" id="country"></p>
<button type="submit" name="submit" class="btn">Submit</button>
</form>
With the HTML below how could I remove the form action and show an alert if the submit button is clicked?
HTML:
<div id="reservation-widget-content">
<form class="resForm" action="https://www.thebookingbutton.com.au/properties" method="get">
<button type="submit" id="submit-button">Check Availability</button>
</form>
</div>
Using Javasrcipt
'onclick' is the event in javascript which is executed when the element is clicked
<div id="reservation-widget-content">
<form class="resForm" action="" method="get">
<button type="submit" id="submit-button" onclick="alert('Success')">Check Availability</button>
</form>
</div>
Using Jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submit-button").click(function(){
alert("Success");
return false;
});
});
</script>
return false will prevent the page from being redirected after alert.
$('.resform').removeAttr('action').on('submit', function(e){
e.preventDefault();
alert('form submitted');
// rest of the code
});
return false will prevent default behaviour of submit button and stops the event bubbling up through the DOM.
$('#submit-button').click(function(){
alert('Submit button clicked !');
return false;
});
JSFiddle
return false does combined work of
event.preventDefault();
event.stopPropogation();
<div id="reservation-widget-content">
<form class="resForm" action="" method="get">
<button type="button" id="submit-button">Check Availability</button>
</form>
</div>
$('#submit-button').click(function(){
alert('Show something');
});
Try this.
Change the button type to 'button' (now you are using 'submit'. This will submit the form on when button is clicked).
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>
I have 2 submit buttons in an HTML form.
How can I know which submit button has triggered the JavaScript function?
<script language="javascript" type="text/javascript">
function verifyData(formdata) {
// Here I want to know from which submit button this function is triggered
// I can't use type button instead of submit
// I can't use onclick handler
// I can't use JQuery.. I want to do only with javascript
}
</script>
<form onsubmit="verifyData(this);" method="post">
<input type="submit" value="submit1">
<input type="submit" value="submit2">
</form>
<button value="delete row" id="but1" onclick="disps()">delete row</button>
I want to do different actions based on the different submit buttons clicked.
It is not possible to check the button clicked through the onsubmit event. Instead move the call to verifyData() to the onclick handler of each button. Use return in the onclick call to cancel submission if false is returned by verifyData()
<script language="javascript" type="text/javascript">
function verifyData(button) {
// validate
switch (button.value) {
case "submit1":
// do somehting
break;
case "submit2":
// do somehting
break;
// ...
};
// submit the form
return true;
}
</script>
<form method="post">
<input type="submit" value="submit1" onclick="return verifyData(this);">
<input type="submit" value="submit2" onclick="return verifyData(this);">
</form>
How about putting an onclick event handler on both buttons which will set a variable to say which button was clicked?
like so:
<script language="javascript" type="text/javascript">
function verifyData(formdata) {
alert(btnClicked);
// Here I want to know from which submit button this function is triggered
// I can't use type button instead of submit
}
var btnClicked = 0;
function setSubmit(which) {
btnClicked = which; return true;
}
</script>
<form onsubmit="verifyData(this);" method="post">
<input type="submit" value="submit1" onclick="return setSubmit(1);">
<input type="submit" value="submit2" onclick="return setSubmit(2);">
</form>
Are you allowed to use the jQuery library?
If you can using this you can easily bind to each submit button based on an id.
For example:
<form id="form1" method="post">
<input type="submit" value="submit1" id="submit1">
<input type="submit" value="submit2" id="submit2" >
</form>
<script type="text/javascript">
$("#submit1").click(function(e)
{
// Do stuff when 1 is clicked.
$("#form1").submit();
});
$("#submit2").click(function(e)
{
// Do stuff when 2 is clicked.
$("#form1").submit();
});
</script>
you could also have the buttons as a type of button to avoid any issues, but you should be able to simply return false; to stop the button of type submit from... submitting
Here is how I would do it... Firstly I would use jQuery so you must include that in your document like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
It would also mean your HTML can be simplified to:
<form method="post">
<input type="submit" value="submit1"/>
<input type="submit" value="submit2"/>
</form>
Then you can use jQuery:
<script>
// When the document is ready
$(function(){
// Action performed when a submit button in the form is clicked
$("form[type='submit']").click(function(e){
// Get the value attribute
var val = $(this).val(),
validation_has_passed = false;
// If it is submit1
if(val == "submit1") {
// Validate submit 1
validation_has_passed = true;
// If it is submit2
} else if(val == "submit2") {
// Validate submit 2
validation_has_passed = true;
}
// If all validation is OK submit the form
if(validation_has_passed === true) {
$("form").submit();
}
// Ensure pressing these buttons doesn't submit the form
e.preventDefault();
});
});
</script>