Here I just want to use two submit button in a single page, but its not sending any data through post?
<form name="form_post" id="form-post" method="post">
<label>
<span>Title *</span>
<input type="text" name="post_name" id="post-name" placeholder="Post title...." required>
</label>
<label>
<span>Body *</span>
<input type="text" name="post_body" id="post-body" placeholder="Post body...." required>
</label>
<input type="submit" id="submit_post" value="Submit Post">
</form>
Here is another form:
<form id="form_comment" method="post">
<!-- need to supply post id with hidden fild -->
<input type="hidden" name="postid" value="<?php echo $post_id ?>">
<label>
<span>Name *</span>
<input type="text" name="comment_name" id="comment-name" placeholder="Your name here...." required>
</label>
<label>
<span>Your comment *</span>
<textarea name="comment" id="comment" cols="30" rows="10" placeholder="Type your comment here...." required></textarea>
</label>
<input type="submit" id="submit_comment" value="Submit Comment">
</form>
this my script but not working? where I'm sending my request. I want to active such scrpts fro particuler submit, is there any way?
$(#form_post).submit(function(){
var form = $(form);
var submit = $('#submit_post');
form.on('submit', function(e) {
// prevent default action
e.preventDefault();
// send ajax request
$.ajax({
url: 'ajax_post.php',
type: 'POST',
cache: false,
data: form.serialize(), //form serizlize data
beforeSend: function(){
// change submit button value text and disabled it
submit.val('Submitting...').attr('disabled', 'disabled');
},
success: function(data){
// Append with fadeIn see http://stackoverflow.com/a/978731
var item = $(data).hide().fadeIn(500);
$('.wrap').append(item);
// reset form and button
form.trigger('reset');
submit.val('Submit Post').removeAttr('disabled');
},
error: function(e){
alert(e);
}
});
});
});
$(#form_comment).submit(function(){
var form = $(form);
var submit = $('#submit_comment');
form.on('submit', function(e) {
// prevent default action
e.preventDefault();
// send ajax request
$.ajax({
url: 'ajax_comment.php',
type: 'POST',
cache: false,
data: form.serialize(), //form serizlize data
beforeSend: function(){
// change submit button value text and disabled it
submit.val('Submitting...').attr('disabled', 'disabled');
},
success: function(data){
// Append with fadeIn see http://stackoverflow.com/a/978731
var item = $(data).hide().fadeIn(500);
$('.comment-block').append(item);
// reset form and button
form.trigger('reset');
submit.val('Submit Comment').removeAttr('disabled');
},
error: function(e){
alert(e);
}
});
});
});
you miss some "
it should be $("#form_comment") and $("#form_post") ...
This works for me:
$('#form_post').on('submit', function(event){
event.preventDefault();
$.ajax({
...
...
...
});
});
$('#form_comment').on('submit', function(event){
event.preventDefault();
$.ajax({
...
...
...
});
});
Use submit events like this,
$('body').on('submit', '#form_comment', function(){
e.preventDefault();
$.ajax({
...
...
...
});
});
$('body').on('submit', '#form_post', function(){
e.preventDefault();
$.ajax({
...
...
...
});
});
Related
I have a form with 2 submit buttons:
<form id="drinksForm" action="drinksHandler.php" method="POST">
<label for="drinks">Number of drinks</label>
<input type="number" class="form-control" name="drinks" min="1" max="30" required="required">
<input type="submit" name="buttonDrinks" class="btn btn-success" value="Got drinks">
<input type="submit" name="buttonDrinks" class="btn btn-danger" value="Didn't get drinks">
</form>
I use ajax to print a instant feedback message:
$('#drinksForm').submit(function(event){
event.preventDefault();
var form = $('#drinksForm');
$.ajax({
type : 'POST',
url : form.attr('action'),
data : form.serialize(),
})
.done(function(data){
$('#result').html(data);
})
.fail(function(data){
$('#result').html(data);
})
});
In drinksHander.php I want to see which button is pressed. If I delete
event.preventDefault();
I can see with
$_POST["buttonDrinks"]
which button is pressed. But because of the
event.preventDefault();
$.ajax({
type : 'POST',
url : form.attr('action'),
data : form.serialize(),
})
It doesn't send which button is pressed. So how can I send a variable to drinksHandler.php which shows which button is pressed.
Remove the buttons name attr and add dynamically an input before submit.
Also change the submit function to an on click button so the preventDefault should work.
Something like this
$('body').on('click', '.btnSubmit', function(event){
event.preventDefault();
var form = $('#drinksForm');
form.append('<input type="hidden" name="buttonDrinks" value="'+$(this).val()+'">');
var formData = form.serialize();
console.log(formData);
$.ajax({
type : 'POST',
url : form.attr('action'),
data : formData,
})
.done(function(data){
$('#result').html(data);
})
.fail(function(data){
$('#result').html(data);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="drinksForm" action="drinksHandler.php" method="POST">
<label for="drinks">Number of drinks</label>
<input type="number" class="form-control" name="drinks" min="1" max="30" required="required">
<input type="submit" class="btn btn-success btnSubmit" value="Got drinks">
<input type="submit" class="btn btn-danger btnSubmit" value="Didn't get drinks">
</form>
Hello guys i don't know to submit a form without page refresh.
This is my code:
My form:
<form method="POST" id="post123" action="" enctype="multipart/form-data">
<input class="form-control input-lg" name="book_name" id="inputLarge" type="text">
<input class="form-control" name="book_price" type="number">
<textarea class="form-control" id="exampleTextarea2"
name="book_description" maxlength="100" rows="7"></textarea>
<textarea class="form-control" name="book_content" id="exampleTextarea4" maxlength="200" rows="7"></textarea>
<input type="file" name="file" id="imgInp44" >
<button type="submit" name='action' id="sendbutton21" value="post1" class="btn btn-primary">
Submit
</button>
</form>
Javascript:
$("#sendbutton21").click(function() {
var url = "http://localhost:5000/magazin_insert"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#post123").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
});
How i can modify my code to submit along with text a file towards the mysql db?
Your first issue is in this line:
<button type="submit" name="action" ... />
You have two possibilities:
change type="submit" to type="button"
use event.preventDefault() in your $("#sendbutton21").click(function() {
After, your ajax call can be changed in order to include the file:
var form = document.getElementById('post123');
var formData = new FormData(form);
$.ajax({
url: url,
data: formData,
type: 'POST',
processData: false,
success: function(data) {
alert(data);
}
});
$("#sendbutton21").click(function() {
var url = "http://localhost:5000/magazin_insert"; // the script where you handle the form input.
// for testing...
url = 'https://api.github.com/repositories';
var form = document.getElementById('post123');
var formData = new FormData(form);
$.ajax({
url: url,
data: formData,
type: 'GET',
processData: false,
success: function (data) {
console.log(data[0].id);
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form method="POST" id="post123" action="" enctype="multipart/form-data">
<input class="form-control input-lg" name="book_name" id="inputLarge" type="text">
<input class="form-control" name="book_price" type="number">
<textarea class="form-control" id="exampleTextarea2"
name="book_description" maxlength="100" rows="7"></textarea>
<textarea class="form-control" name="book_content" id="exampleTextarea4" maxlength="200" rows="7"></textarea>
<input type="file" name="file" id="imgInp44" >
<button type="button" name='action' id="sendbutton21" value="post1" class="btn btn-primary">
Submit
</button>
</form>
Try https://jquery-form.github.io/form/ plugin to easily send form via ajax sample code:
$('#post123').ajaxForm(function() {
// SUCCESS CALLBACK
});
To submit a form without refresh, use event.preventDefault().
$("#sendbutton21").click(function(event) {
event.preventDefault();
var url = "http://localhost:5000/magazin_insert"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#post123").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
});
Instead of
$("#sendbutton21").click(function() {
use
$("#post123").submit(function() {
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
I have trouble, my code doesn't work, because my server script side need a name from the submit button. I'm using Ajax method, and I'm using data: serialize, when I have Click on Submit, it doesn't work. Here is my JavaScript code:
$(function(){
$('#buy_product').submit(function(e){
e.preventDefault();
var submitData = $('#buy_product').serialize();
submitData.push({ name: this.name, value: this.value });
$('.loading').html('{{HTML::image('img/ajax-loader.gif')}}');
$.ajax({
type: "POST",
data: submitData,
url: "{{URL::base()}}/products/view/{{$products->id}}/{{Str::slug($products->name_product, '_')}}",
success: function(msg){
$('#qty').val('');
$('.loading').html(msg);
}
});
});
});
If you have clue, please tell me, I'll be glad.
My button is like this:
<input name="update" id="update" type="submit" value="update">
<input name="empty" id="empty" type="submit" value="empty">
I believe you can't do that but you can use a hidden field
<input type="hidden" name="any_name" value="any_value" />
Try this:
Java Script Code:
<script type='text/javascript'>
$(function(){
$('#form').submit(function(e){
e.preventDefault();
var submitData = $('#form').serialize();
var btnName = $('#submit').attr('name');
var btnVal = $('#submit').val();
var btn = '&'+btnName+'='+btnVal;
submitData += btn;
alert(submitData);
});
});
</script>
HTML Code:
<form action="" id="form" type='post'>
<input type="text" name="name" id="name" value='Scott'/>
<input type="submit" name="submit" id="submit" value='POST'/>
</form>
or use:
var submitData = $('#buy_product').serialize();
submitData += '&btnName=' + $('#your_submitbtn_id').attr('name') + '&btnValue='+ $('##your_submitbtn_id').attr('value');
How do I clear a form data once the submit succeed in jquery?
$(document).ready(function () {
$('#submit').click(function () {
$.ajax({
type: "POST",
url: 'final.php',
data: "user=" + $('#user').val() + "&comment=" + $('#comment').val(),
success: function (data) {
$('#status').html(data);
}
});
});
});
HTML... I need to clear the form data once the form is submitted....Any help would be appreciated.
<input type="text" name="user" id="user">
<input type="text" name="comment" id="comment">
<input name="submit" type="submit" id="submit">
<div id="status">
$('#formId').trigger('reset');
$('form').find('input[type=text]').val('') should do
Call this in the success callback of your Ajax