I have a lot of forms and i want to submit one form per click.
I use this code.
$(document).ready(function(){
$("form").submit(function(){
var str = $(this).serialize();
$.ajax({
type: "POST",
url:"function.php",
data: $(this).serialize(),
success: function(html) {
alert(html);
window.location.reload();
}
});
return false;
});
});
All my forms are same like this
<form method='post' id='title' name='title'>
<input type='hidden' name='test' value='test' >
<button type='submit' name='submit'></button>
</form>
My script works fine! --until--
I add in my page a different form. For this form i dont want use javascript.
When i click this different form javascript shows up!
Any help?
Give your forms a unique ID then only the forms you want to submit, will be submitted using the javascript you want to use. e.g.
$(document).ready(function(){
$("form#title").submit(function(){ /* <-- notice form#title */
var str = $(this).serialize();
$.ajax({
type: "POST",
url:"function.php",
data: $(this).serialize(),
success: function(html) {
alert(html);
window.location.reload();
}
});
return false;
});
});
<!-- this form will attach to above JS -->
<form method='post' id='title' name='title'>
<input type='hidden' name='test' value='test' >
<button type='submit' name='submit'></button>
</form>
Related
how to clear form after submit the form and pass the data to php file without reloading page...the form data is pass the php file and it stored the data base.but i was unable to clear the form data after submit the form.if i reset the form using javascrip but data not pass the data base.if i pass the data to php the form is not clear.is there a way for me achive both target?thank you..
here my snipt code...
<iframe name="votar" style="display:none;"></iframe>
<form action="confirm.php" id="sfm" method="POST" target="votar">
<input type="text" placeholder="Name" name="name" value="" required/>
<input type="submit" value="Submit My Project " />
</form>
Using AJAX you can do this.
$('#submitBtn').click(function () {
$.ajax({
url: 'confirm.php',
data: $('#sfm').serialize(),
type: "post",
success: function (data) {
$('input[type="text"]').val('');
}
});
return false;
});
you can try this
in index.php
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'get',
url: 'ajax.php',
data: $('form').serialize(),
success: function (data) {
$('#name').val('');
alert('data');
//your return value in data
}
});
});
});
</script>
</head>
<body>
<form action="ajax.php" id="sfm" method="POST" target="votar">
<input type="text" placeholder="Name" name="name" id="name" value="" required/>
<input type="submit" value="Submit My Project " />
</form>
</body>
</html>
and in ajax.php
<?php
$name = $_GET['name'];
//do what you want to do using name
echo "what you need to return";
Have you thought about to use Ajax to handle the form submit?
Form submit with AJAX passing form data to PHP without page refresh
try making $_POST array empty after submitting and saving the form
$_POST='';
After getting success response you can clear form input
$('#sfm').submit(function () {
var form = $(this);
$.ajax({
url: 'phpfile.php',
data: form.serialize(),
type: "POST",
success: function (data) {
$('input[type="text"]').val('');
}
});
return false;
});
You can do like this, first get form inputs value and then reset
You can also able to reset after success response
$(function () {
$('form').on('submit', function (e) {
e.preventDefault();
var that = $(this);
var params = that.serialize();
that.get(0).reset();
console.log(params);
$.ajax({
type: 'GET',
url: 'submit.php',
data: params,
success: function (data) {
console.log(data);
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="confirm.php" id="sfm" method="POST" target="votar">
<input type="text" placeholder="Name" name="name" value="" required/>
<input type="submit" value="Submit My Project " />
</form>
SERVER SIDE
<?php
$name = $_GET['name'];
echo 'success';
exit();
?>
I am working with PHP and jQuery. I have 2 files
test.php
<script>
$(document).ready(function(){
$(".form-register").submit(function (e) {
var form_data = $(this).serialize();
e.preventDefault();
$.ajax({
type: "POST",
url: "test2.php",
data: form_data,
dataType: 'json',
success: function(){
alert(form_data);
}
});
});
});
</script>
<form class="form-register">
<input name="email" type="text"/>
<input name="name" type="text"/>
<input type="submit" name="register"/>
</form>
and the second file is test2.php:
<?php
if(isset($_POST['register'])){
echo json_encode('Message from test2.php');
}else{
echo json_encode('post no received');
}
It seems like I am unable to retrieve $_POST['register'] because when I check alert(form_data); only the email and the name are displayed.
Is there anyway for me to get $_POST['register']?
Add value attribute to submit button and use $('form').serializeArray() . Try:
$(".form-register").submit(function (e) {
var formData = $(this).serializeArray();
var name = $(this).find("input[type=submit]").attr("name");
var value = $(this).find("input[type=submit]").val();
formData.push({ name: name, value: value });
//now use formData, it includes the submit button
$.ajax({
type: "POST",
url: "test2.php",
data: formData,
dataType: 'json',
success: function(){
alert(form_data);
}
});
});
Neither .serialize() nor .serializeArray() will serialize the submit button value.
.serialize()
...No submit button value is serialized since the form was not submitted using a button.
.serializeArray()
...No submit button value is serialized since the form was not submitted using a button.
Only successful controls are serialized.
The input submit element is actually a successful control, but as mentioned above since the form is not submitted using the submit button, the input submit value attribute will not be included by jquery serialization.
If you want to use .serializeArray() just add the input submit elements name and value attribute values as an object to the serialized array like so.
$(document).ready(function(){
$(".form-register").submit(function (e) {
var form_data = $(this).serializeArray();
var $submit = $(this).find('input[type="submit"]');
form_data.push({name: $submit.prop("name"), value: $submit.val()});
console.log(form_data);
// do your ajax request here...
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-register">
<input name="email" type="text"/>
<input name="name" type="text"/>
<input type="submit" name="submit" value="register"/>
</form>
If you want to use .serialize() just add the values of the value and name attributes of the submit element to the text string created by the .serialize() method. Be careful, the string needs to be URL-encoded.
$(document).ready(function(){
$(".form-register").submit(function (e) {
var form_data = $(this).serialize();
var $submit = $(this).find('input[type="submit"]');
form_data = form_data + "&" + $submit.prop("name") + "=" + $submit.val();
console.log(form_data);
// do your ajax request here...
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-register">
<input name="email" type="text"/>
<input name="name" type="text"/>
<input type="submit" name="submit" value="register"/>
</form>
I'm trying to get post id and insert it into database after user click on add to favorite button.
The problem that all the post are return id 30 which is the last id in the database.
My php/html code
while($row = mysqli_fetch_array($get_posts)) {
<i style="float:right;" class="fa fa-pinterest-square">
<form id="pin_post" method="post"> ';
if (isset($_SESSION['user_id'])){
<input type="hidden" value="'. $_SESSION['user_id'].'" name="user_id" />
}
<input type="hidden" value="'.$row['post_id'].'" name="post_id[]" />
</form>
</i>
The jQuery / Ajax code
<script>
$(document).on("click",".fa-pinterest-square",function(e) {
$.ajax({
url: "includes/test.php",
type: "POST",
data: $('#pin_post').serialize(),
success: function(data) {
alert(data);
}
});
});
</script>
I'm getting last id in the database when I click any post.
Please help me to get the id of each post when I click on the
Since you are using #pin_post when serializing it you will get the last hit when jQuery is looking for #pin_post. Either you should use a unique id or something like this
$(document).on("click",".fa-pinterest-square",function(e) {
var form = $(this).find('form'); //Since the form is child to <i>
$.ajax({
url: "includes/test.php",
type: "POST",
data: form.serialize(),
success: function(data) {
alert(data);
}
});
});
I have the following code that i wish to use to submit form without reloading the page, but it reloads the entire page and when checked in console the script.php page is also not getting executed.
Code on index.php page
<script>
$(function() {
$(".submit").click(function() {
var name = $("#name").val();
var dataString = 'name=' + name;
console.log(dataString);
$.ajax({
type: "POST",
url: "script.php",
data: dataString,
success: function() {
$('#result').html(response);
}
});
return false;
});
});
</script>
<form method="post" name="form">
<input id="name" name="name" type="text" />
<input type="submit" value="Submit" class="submit" />
</form>
<div id="result"></div>
code on script.php page
<?php
$name=$_POST['name'];
echo $name;
?>
Can anyone please tell how i can submit the form without reloading the page and also display the result from script.php page on index.php page
update your function. pass event object in function. and use event.preventDefault() to prevent default submit action.
$(".submit").click(function(e) {
e.preventDefault();
try this
<script>
$(function() {
$(".submit").click(function(event) {
event.preventDefault();
var name = $("#name").val();
var dataString = 'name=' + name;
console.log(dataString);
$.ajax({
type: "POST",
url: "script.php",
data: dataString,
success: function() {
$('#result').html(response);
}
});
return false;
});
});
OR
<input type="button" class="submit" />Submit
You need to send the data from the script.php page back to your index.php page. Swich out the little bit of ajax for this:
$.ajax({
type: "POST",
url: "script.php",
data: "datastring",
dataType: "json",
success: function(dataType){
$("#result").html(dataType);
}
});
In your script.php:
<?php
$name=$_POST['name'];
echo json_encode($name);
?>
Do not mix form submit and button click.
If you are a click event of button then use type="button" and if you are doing $("form").submit() then use type="submit".
Also check for
$(".submit").click(function(e) {
e.preventDefault();
and check your ajax post data , do
$.ajax({
type: "POST",
url: "script.php",
//changes made here
data: { name: $("#name").val()},
//changes made here. you have not written response
success: function(response) {
$('#result').html(response);
}
});
Instead of listening to the input's click event, you should listen to the form's submit.
<script>
$(function() {
$("#name-form").on('submit', function(e) {
e.preventDefault(); // prevent form submission
var name = $("#name").val();
var dataString = 'name=' + name;
console.log(dataString);
$.ajax({
type: "POST",
url: "script.php",
data: dataString,
success: function(response) {
$('#result').html(response);
}
});
});
});
</script>
<form id="name-form" method="post" name="form">
<input id="name" name="name" type="text" />
<input type="submit" value="Submit" class="submit" />
</form>
<div id="result"></div>
Hi i want learn ajax but i have same problem. So i click (a11) button but my javascript alert 8, need to be 11. my other question i post data with ajax but say "no" thanks.!
<form action="" method="post" onclick="return false;" >
<input type="text" name="idh" value="'.$id.'"></input>
<button id="my_button" class="my_button" name="my_button" data-value="'.$id.'">'.$baslik.$id.'</button>
</form>
and my script
$('.my_button').click(function() {
var idm = $(this).attr('data-value');
var idh = $("input[name=idh]").val();
idh = $.trim(idh);
//alert (id);
$.ajax({
type: "POST",
url: "ajax.php",
data: idm,
success: function(cevapp){
alert (idh);
}
});
});
my ajax.php