i m trying to submit my form without any user interaction,i don't know how to do that, do you have a lead for?
Thanks by advance
Below my code
Html form
<form id="myform" method="post">
<div>
<input type="hidden" name="print_names" id="print_names" value="print_names" />
<input type="submit" name="loginBtn" id="loginBtn" value="test" />
</div>
</form>
Ajax part for submit
$(document).ready(function(){
$('#myform').submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: 'form.php',
data: $(this).serialize(),
success: function(response)
{
Your form has no target action, in that caase you could use just:
document.forms.myform.submit();
Related
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() {
Is there a way to tell PHP which form has been submitted?
Form 1
<form id="factory" action="bullets.php" method="post">
<input type="submit" value="Kopen">
</form>
And form 2
<form id="localFactory" action="bullets.php" method="post">
<input type="submit" value="Kopen">
</form>
These forms are on one page.
My javascript code:
var url;
$('form').submit(function (event) {
event.preventDefault();
url = $(this).attr('action');
location.hash = url;
$.ajax ({
url: url,
method: 'POST',
data: $(this).serialize()
}).done(function (html) {
$('#content').html(html);
});
});
If i got an input i get a $_POST variable.
So i need to know which of the above forms has been submitted?
Thanks..
This will work:
var url;
$('form').submit(function (event) {
event.preventDefault();
url = $(this).attr('action');
location.hash = url;
var data = $(this).serialize();
data += "&formId=" + encodeURIComponent($(this).attr('id')); // if you have data in the form.
// do this if you don`t have data in the form:
// data = {formId: $(this).attr('id')};
$.ajax ({
url: url,
method: 'POST',
data: data
}).done(function (html) {
$('#content').html(html);
});
});
You can then get the forms Id from $_POST['formId']
Create a submit button with a name:
<form id="factory" action="bullets.php" method="post">
<button type="submit" value="factory" name="submit">Kopen</button>
</form>
This value is now posted:
if (!empty($_POST['submit']) && $_POST['submit'] == 'factory') {
}
By namespacing the input fields, you can easily identify which fields are from which form, and by extension which form was submitted.
<form id="factory" action="bullets.php" method="post">
<input type="text" name="form_1[my_input]">
<input type="submit" value="Kopen">
</form>
<form id="localFactory" action="bullets.php" method="post">
<input type="text" name="form_2[my_input]">
<input type="submit" value="Kopen">
</form>
Then it is as simple as:
if (isset($_POST['form_1'])) {
// This post variable is an array of each field.
}
If you want an html only solution, you could add a hidden input with the form id:
<form id="factory" action="bullets.php" method="post">
<input type="hidden" value="factory" name="formId"/>
<input type="submit" value="Kopen">
</form>
And then test it with:
if (isset($_POST['formId']) && $_POST['formId'] == 'factory') {
//Do what you want here
}
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
i have a small form chat like this and i want when click submit that form will not make the page refresh.
<form name="form1" method="post" id="formchat" action="forum_add_1313940.xhtml">
<input name="text" id="text2" max-lenght="1000"></input>
<input type="submit" name="submit" class="submit" value="Gửi" id="chats" />
</form>
and the js
<script language="JavaScript">
$('#formchat').submit(function ()
{
sendformchat(); return false;
});
</script>
But when i click "Gửi", the page gonna refresh.
How to make it when click "Gửi", the page not gonna refresh ?
If you want asynchronous behavior, you should handle the form in an AJAX style, you can read about AJAX here!
here is an example using jquery on your form:
var form = $('#form_chat');
form.find('input[type=submit]').on('click', function(e) {
e.prevetDefault();
$.ajax({
type: "POST",
url: form.attr('action'),
data: form.serialize(),
success: function(response) {
console.log(response);
}
});
});
Are there any jQuery/AJAX functions that when a form (or anything for that matter) is displayed, upon pressing a button the div containing the original form is replaced by a new form? Essentially, a multi-part form without having to reload the page.
Can I use something like this?
$('form#myForm').submit(function(event) {
event.preventDefault();
$.ajax({
type: '',
url: '',
data: $(this).serialize(),
success: function(response) {
$('#divName').html(response);
//somehow repopulate div with a second form?
}
})
return false;
});
I've used this before for adding items to a list, but I've never used it to totally repopulate it with different content. How can I direct it to the second form?
edit - I got it to work, but only when I write '#form2' for the replacement. I alerted the response and I get {"formToShow":"show2"}. I tried doing response.formToShow but it's undefined.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
</head>
<div id="divName">
<form method="POST" action = "#" id="form1">
<input type="textbox" name="textbox1" value="1"/>
<input type="submit" name="submit1"/>
</form>
<form method="POST" action = "#" id="form2" style="display: none">
<input type="textbox" name="textbox2" value="2"/>
<input type="submit" name="submit2"/>
</form>
</div>
<script>
$('form#form1').submit(function(event) {
event.preventDefault();
$.ajax({
type: 'JSON',
url: 'receiving.php',
data: $(this).serialize(),
success: function(response) {
$('#form1').hide(); //hides
//$('#form2').show(); //this will show
$(response.formToShow).show(); //this does not display form 2
}
})
return false;
});
</script>
Here is receiving.php. When I view this page {"formToShow":"show2"} is displayed
<?php
echo json_encode(array("formToShow" => "#form2"));
?>
Check the JQuery Load Function
This is personal preference, but I'd never send HTML through the response and display it like that, what I'd do is:
Send a JSON array back from the server, such as { formToShow: "#form1" }
Then you can simply do this:
success: function(response) {
$('form').hide();
$(response.formToShow).show();
}
Obviously, using this method, you'd also have to have the second form in your markup like this:
<form method="POST" action = "#" id="form2" style="display: none">
<input type="textbox" name="textbox2"/>
<input type="submit" name="submit2"/>
</form>
You'd also have to change (to pickup the array):
$.ajax({
type: 'JSON'
try this
$('form#myForm').submit(function(event) {
event.preventDefault();
$.ajax({
type: '',
url: '',
data: $(this).serialize(),
success: function(response) {
$('#divName').html(response);
$('#form1').hide();
$('#form2').show();
}
})
return false;
});
<form method="POST" action = "#" id="form1">
<input type="textbox" name="textbox1"/>
<input type="submit" name="submit1"/>
</form>
<form method="POST" action = "#" id="form2" style="dispay:none;">
<input type="textbox" name="textbox2"/>
<input type="submit" name="submit2"/>
</form>