I am trying to get this ajax o work on the first button, on the second button I am just trying to see if I at least hit the jquery but this is not happening for some reason, my code is as follows.
<form id="postform" >
<input class="btn btn-lg" style="border: 1px solid gray;" name="email" id="email" type="email" placeholder="Enter Your Email" required>  
<button class="btn btn-info btn-lg" id="emailbutton" onsubmit="submitting()" type="submit">Submit</button>
<input class="btn btn-info btn-lg" type="submit" id="#inputbutton" value="Shooter" ></input>
</form>
<script>
(function ($) {
function submitting(e)
{
e.preventDeafault();
$('#emailbutton').on('submit', (function () {
alert("Clicked");
$.ajax
({
type: 'POST',
url: 'bootstrap/php/form.php',
data: $(this).serialize(),
success: function (result) {
console.log(result);
$('#postform').html(result);
}
});
}));
}
function subshooter() {
$('#inputbutton').click(function() { alert('testbutton clicked'); });
}
});
</script>
My main aim to get the ajax working so when people submit their email address on a form the resulting ajax will process a php file and the html will change to something like "Thank You" without refreshing the entire page.
Modified Html
<form id="postform" >
<input class="btn btn-lg" style="border: 1px solid gray;" name="email" id="email" type="email" placeholder="Enter Your Email" required>  
<button class="btn btn-info btn-lg" id="emailbutton" type="submit">Submit</button>
<input class="btn btn-info btn-lg" type="submit" id="inputbutton" value="Shooter" ></input>
</form>
your script have so many errors that is the reason why it is failed... in future always check browser console...
corrected js:
<script src="https://code.jquery.com/jquery-1.10.2.js" ></script>
<script>
$(document).ready(function (){
$('#inputbutton').on('click',function() { alert('testbutton clicked'); });
$('#postform').on('submit',function(e){
e.preventDefault();
alert("Clicked");
$.ajax({
type: 'POST',
url: "bootstrap/php/form.php",
data: $(this).serialize(),
success: function (result) {
console.log(result);
alert("success");
$('#postform').html(result);
},
error: function (){
alert("Unable To post");
}
});
});
});
</script>
When submitting gets called, it is attaching a click event to the button, but that event has already happened, so it would not get called again until the Submit button has been clicked again.
Likewise, preventDeafault is misspelled and most likely causing execution to stop.
Another problem is that you are not passing in an event to submitting, so e will be undefined.
Since you are using jQuery, you should attach the event using jQuery, which will give you access to the event and the preventDefault function:
$('form').submit( function (e) {
e.preventDefault();
});
You should use the below code:
<script>
(function ($) {
$('#inputbutton').click(function() {
alert('testbutton clicked'); });
});
function submitting(e)
{
e.preventDefault();
$('#emailbutton').on('submit', (function () {
alert("Clicked");
$.ajax
({
type: 'POST',
url: 'bootstrap/php/form.php',
data: $(this).serialize(),
success: function (result) {
console.log(result);
$('#postform').html(result);
}
});
}));
}
</script>
Mistakes that you made:
the function to prevent default is e.preventDefault();
In jquery you should bind the click event to the button on page load.
Since submitting(e) is a function it should be outside the onbody load event i.e document.ready({ ... }) function.
Related
I’m trying to figure out why $("#submitButton").submit(function() {}); is not working.
I have this <form>:
<div class="card p-2">
<form>
<div class="input-group">
<label for="inputPasswordAgain" class="sr-only">Password</label>
<input type="password" id="inputPasswordAgain" class="form-control" placeholder="Please enter your password again!" required>
<div class="input-group-append">
<button type="submit" id="submitButton" name="submitButton" class="btn btn-secondary btn-block">Submit Changes</button>
</div>
</div>
</form>
</div>
I’ve written this AJAX code in jQuery to pass values to the server.
<script type="text/javascript">
$(document).ready(function() {
$("#submitButton").click(function() {
var data = {};
var i;
for (i = 0; i < $("#sessionQuantity").html(); i++) {
data[i] = $("#" + i).val();
}
$.ajax({
type: "POST",
url: "updateViewing-helper.php",
data: data,
success: function() {}
});
});
});
</script>
Everything works fine if I use .click(function(){…}), but this will call the updateViewing-helper.php without submitting the form with the <input> and <button> elements. This means the user can skip putting their password in, and just click the button.
I tried to use .submit(function(){…}), then use e.preventDefault(), then pass all values into AJAX, then call the updateViewing-helper.php via AJAX, then I can check for the password matching server-side.
But the .submit event is not working: there is not alert or anything.
Call submit on form not on the button
First give id to form
<form id="myForm">
Then call submit on this id
$( document ).ready(function() {
$("#myForm").submit(function(){
});
});
This is function handle() which is called by onclick event.
function handler(identifier, e) {
var datastring = $('form').serializeArray();
$.ajax({
url: "core.php?type=" + identifier,
data: datastring,
method: "POST",
success: function(data) {
alert('ok');
}
});
e.preventDefault();
}
And whenever I'm submitting my form ajax call in not working.
<form>
<input type="text" name="username" placeholder="username">
<input type="password" name="password" placeholder="password">
<input type="submit" name="submit" onclick="handler('login')">
</form>
Try an onsubmit handler on the form itself and let us know how you get on.
EDIT: I notice that you are also not passing the event to your event handler, you can do so with the following: onclick="handler('login', event)"
Been beating my mind at this but its now time for me to ask for help (ask i got work tomorrow and dont want to be on this all night)
My form is inside a modal and this is my script
$(function() {
$("#applyForm").on('submit' , function(e) {
$.ajax({
type: 'POST',
url: $("#applyForm").attr("action"),
data: $('#applyForm').serialize(),
success: function(data){
alert('successfully submitted')},
error: function(data){
alert('something went wrong')
}
});
});
});
It all works, It fires up the script and submits to the backend with a success message but as soon as you close the popup sucess message it redirects to the action "apply-now" page.
How can i prevent this without it breaking the submit, As i've tried return false and preventDefault.
Heres the form
<form action="/apply-now/" enctype="multipart/form-data" id="applyForm" method="post" name="applyForm" class="form">
<input name="is_data_submitted" type="hidden" value="1">
<input name="listing_id" type="hidden" value="{$listing_id}">
MY FORM DATA
<button type="submit" id="submit" class="btn btn-warning">Apply now</button>
Any help would really be appreciated !
Thanks
J
The form is being submitted twice. Once with the form action and the other time with the ajax call. If you prefer to have only the ajax call sent, returning false outside the ajax function should do the trick. When to use PreventDefault( ) vs Return false?
$(function () {
$("#applyForm").on('submit', function (e) {
//e.preventDefault();
$.ajax({
type: 'POST',
url: $("#applyForm").attr("action"),
data: $('#applyForm').serialize(),
success: function (data) {
alert('successfully submitted')
},
error: function (data) {
alert('something went wrong')
}
});
return false;
});
});
Try this if you want the page not to reload:
$(function() {
$("#applyForm").on('submit' , function(e) {
e.preventDefault();
//... the rest of your code
//or add return false;
return false;
});
});
As you catch the actual submiting the "normal" process will happen, you don't wan't that. So you have to stop it by e.preventDefault(). You can read the documentation about it here.
Or look right here for an example where it stays on the same page.
$("#form").submit(function(e){
e.preventDefault();
$(this).append("The page is staying here");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="form">
<input type="text" name="first" id="first">
<input type="submit" value="enter">
</form>
Hopefully this helps you.
I Hope this work.
1) <button type="submit" id="submit" class="btn btn-warning">
Apply now</button> with preventDefault method
2) button type="button" id="submit" class="btn btn-warning">Apply now</button>
change the type="submit" to type="button"
Example
<form action="/apply-now/" enctype="multipart/form-data" id="applyForm" method="post" name="applyForm" class="form">
<input name="is_data_submitted" type="text" value="1">
<input name="listing_id" type="text" value="999">
MY FORM DATA
<button type="button" id="submit" class="btn btn-warning">Apply now</button>
</form>
$(document).ready(function(){
$("#applyForm").on('click','#submit' , function() {
alert("Click check")
console.log($('#applyForm').serialize())
});
});
You're not preventing the default form submission behavior. To fix up, add the following immediately before your Ajax call:
e.preventDefault();
Extra tip: to ensure the form only gets submitted once per "submit" click, stop the propagation of the click event from bubbling up through the DOM.
Immediately following the preventDefault, put this:
e.stopPropagation();
In my webapp, the Ajax request is executed 3 times, and I have no idea why this is happening.
Can someone please help here?
My Javascript:
$(document).ready(function() {
console.log("ready!");
$('form').on('submit', function(e) { //
e.preventDefault();
// on form submission ...
console.log("the form has beeen submitted");
// grab values
valueOne = $('input[name="perfid"]').val();
valueTwo = $('input[name="hostname"]').val();
valueThree = $('input[name="iteration"]').val();
console.log(valueOne)
console.log(valueTwo)
console.log(valueThree)
$.ajax({
type: "POST",
url: "/",
dataType:'json',
data : { 'first': valueOne,'second': valueTwo,'third': valueThree},
success: function(data) {
var res = data.AVG;
var p = '<p><pre>'+res+'</pre></p>';
$('#result').append(p);
},
error: function(error) {
console.log(error)
}
});
}); });
And my HTML is:
<form role="form" method="post" onsubmit="return false;">
<div class="form-group">
<input type="text" class="input-medium" id="perfid" name="perfid" placeholder="Enter a Perf ID" required style="height:30px;">
<input type="text" class="input-medium" id="hostname" name="hostname" placeholder="Enter a HostName" style="height:30px;">
<input type="text" class="input-medium" id="iteration" name="iteration" placeholder="Enter a Iteration" required style="height:30px;">
<button type="submit" class="btn btn-default" style="height:30px;">Get Data</button>
</div>
</form>
I have written the code for only one AJAX POST request,
EDIT:
This is the console output:
Please make sure you have included the js file only once,
and add a return false at the end of the submit event callback
look at the selector
$('form').on('submit', function(e) {
if the page has 3 forms, the above selector will execute 3 times
Try to add id to the form like this. sorry about my bad english
Though a common question I searched around and tried all hit and trial .. but no avail .. still the issue for jquery validation persist before ajax call.. The form is getting submitting without any validation
Please provide any info where i may be getting wrong
<script type="text/javascript">
$(document).ready(function () {
$('#myform').validate({
rules: {
objective: {
required: true,
minlength: 150
},
},
submitHandler: function ()
{
var dataString = $("#myform").serializeArray();
$("#flash").show();
$.ajax({
url: "xyz.php",
type: "POST",
data: dataString,
cache: false,
async: false,
error: function (jqXHR, textStatus, errorThrown) {
alert('error');
},
success: function (data) {
$("#flash").hide();
$('#info').html(data.objective);
$('.success').fadeIn(200).show();
$("#objective").focus();
}
});
return false;
}
});
});
</script>
html
<form class="form-horizontal " name="myform" id="myform" action="include/process.php" method="post">
<div class="form-group">
<label for="objective" class="col-lg-3 control-label">Objective</label>
<div class="col-lg-9">
<textarea class="form-control" rows="6" id="objective" name="objective" placeholder="Objective" ></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<button type="submit" id="editbtn" class="btn btn-sm btn-success pull-right hovertip" data-toggle="tooltip" data-original-title=" Add ">Add Data</button>
</div>
</div>
</form>
There are three more similar forms on the same page...
Add e.preventDefault in the beginning of your click handler.
$("#editbtn").click(function (e) {
e.preventDefault();
// rest of the code.
}
It will prevent your form from being sent without going through your js code.
You could do what #Romain said or change the HTML to:
<input type="button" id="editbtn" class="btn btn-sm btn-success pull-right hovertip" data-toggle="tooltip" data-original-title=" Add " value="Add Data" />
So the form doesn't submit
If you are going to trigger the submit via JavaScript, then you can type the button as 'button', instead of submit:
<button type="button" id="editbtn" class="btn btn-sm btn-success pull-right hovertip" data-toggle="tooltip" data-original-title=" Add ">Add Data</button>
This will prevent the default submit action from executing, and let you handle everything via your onclick method.