I had many forms with the same id on a page. When I press the submit button of any form, first the first will submit, after the second click the second ... . But I want when I press the submit button, the form will submit where the button belongs to. How can I do that.
Here my JS Code:
$(document).on('submit','#ajax_form',function(e) {
var form = $('#ajax_form');
var data = form.serialize();
$.post('game/write.php', data, function(response) {
console.log(response);
$('#power').replaceWith(response);
});
return false;
});
Here the HTMl Code:
<div id="power">
<div class="span4">
<form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="1" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form>
<form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="4" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form>
<form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="7" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form>
</div>
<div class="span4">
<form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="2" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form>
<form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="5" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form>
<form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="8" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form>
</div>
<div class="span4">
<form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="3" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form>
<form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="6" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form>
<form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="9" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form>
</div>
This is where your problem begins:
var form = $('#ajax_form');
It selects the first form, not the one that was submitted. Simply replacing it with
var form = $(this);
would solve your problem, but I still suggest not using duplicate id's.
If you're not bothered about know which form is being submitted and simply want to handle the submit for all of them with one piece of code, then this will do it...
$(document).on('submit','form',function(e) {
var form = $(this);
var data = form.serialize();
$.post('game/write.php', data, function(response) {
console.log(response);
$('#power').replaceWith(response);
});
return false;
});
<div id="power">
<div class="span4">
<form action="game/write.php" method="post"><input type="hidden" value="1" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form>
<form action="game/write.php" method="post"><input type="hidden" value="4" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form>
<form action="game/write.php" method="post"><input type="hidden" value="7" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form>
</div>
<div class="span4">
<form action="game/write.php" method="post"><input type="hidden" value="2" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form>
<form action="game/write.php" method="post"><input type="hidden" value="5" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form>
<form action="game/write.php" method="post"><input type="hidden" value="8" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form>
</div>
<div class="span4">
<form action="game/write.php" method="post"><input type="hidden" value="3" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form>
<form action="game/write.php" method="post"><input type="hidden" value="6" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form>
<form action="game/write.php" method="post"><input type="hidden" value="9" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form>
</div>
As everyone has previously mentioned, you can't use an ID for more than one element. The above code assigns the submit event handler to all forms, and uses $(this) to reference the form that was submitted. It should do the trick :)
Try this:
$(document).on('click','button.btn',function(e) {
//you will trigger this function when you click a button
//this will select the parent, i.e., the form
var form = $(this).parent();
var data = form.serialize();
$.post('game/write.php', data, function(response) {
console.log(response);
$('#power').replaceWith(response);
});
return false;
});
ID's must be unique across the entire DOM.
Only one element can have the same id. Set your function up to pass the id of the correct form you want to submit.
Better use class="ajax_form" instead of ID, then apply $(this).
$(document).on('submit','.ajax_form',function(e) {
var form = $(this);
var data = form.serialize();
// other code
return false;
});
Related
I'm having issues with my code not submitting a checkbox value when checked on form.
<form action="codetest.php" method="get">
<div class=" form-check">
<input class="form-check-input" type="checkbox" id="new-shooter" value="New"/>
<label class="form-check-label" for="new">
New
</label>
</div>
<button name="register" type="submit" value="Register" class="btn btn-primary"><strong>Register</strong></button>
<button name="register" type="submit" value="Clear" class="btn btn-primary"><strong>Clear</strong></button>
<button name="back" type="submit" formaction="registration.php" class="btn btn-primary"><strong>Back</strong></button>
</form>
When I click the checkbox then Register I get this in the address bar:
codetest.php?register=Register
Can't find any thing wrong with my code.
I'm also using bootstrap 4 for my css.
Just give your checkbox a name, say, name = "checkbox".
<form action="codetest.php" method="get">
<div class=" form-check">
<input class="form-check-input" name="checkbox" type="checkbox" id="new-shooter" value="New"/>
<label class="form-check-label" for="new">
New
</label>
</div>
<button name="register" type="submit" value="Register" class="btn btn-primary"><strong>Register</strong></button>
<button name="register" type="submit" value="Clear" class="btn btn-primary"><strong>Clear</strong></button>
<button name="back" type="submit" formaction="registration.php" class="btn btn-primary"><strong>Back</strong></button>
</form>
I have following code I want to use to pass an id to my new form but I'm getting error that resource is not available.
<form action="~/Views/Admin/AdminDemandeurs.cshtml" method="GET">
<button type="submit" class="btn btn-primary">Ajouter</button>
<button type="submit" class="btn btn-primary" id="btnModif" disabled>Modifier</button>
<button type="submit" class="btn btn-primary" id="btnSupp" disabled>Supprimer</button>
<input type="text" name="action" id="enregID" />
</form>
I'm using MVC and my view does have an entry in my controller
public ActionResult AdminDemandeurs()
{
return View();
}
Does someone has an idea?
You should submit your form to your action method,not the view.
You may use the Url.Action helper to generate the correct relative path to the action method.
<form action="#Url.Action("AdminDemandeurs","Admin")" method="GET">
<button type="submit" class="btn btn-primary">Ajouter</button>
<button type="submit" class="btn btn-primary" id="btnModif" disabled>Modifier</button>
<button type="submit" class="btn btn-primary" id="btnSupp" disabled>Supprimer</button>
<input type="text" name="action" id="enregID" />
</form>
Both of these methods successfully send the data, but refresh the form (I'm trying to keep it hidden via jquery after clicking submit)
#1) <button type="submit" class="btn btn-info" value="Submit" id="submit">SUBMIT</button>
#2) <input type="submit" class="btn btn-info" value="Submit" id="submit">
Based on other solutions, I tried these 2 approaches. While they don't refresh the form, they don't send the data either.
#3) <button type="submit" class="btn btn-info" value="Submit" id="submit" onclick="return false;">SUBMIT</button>
#4) <input type="submit" class="btn btn-info" value="Submit" id="submit">
Entire code:
<?
if (!empty($_POST)) {
include_once 'form.php';
$message = 'Thank You';
}
?>
-----------
<script>
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'other_radio') {
$('#other').show();
} else {
$('#other').hide();
}
});
});
</script>
-----------
<div class ="form-hide">
<form method="post" role="form" id="survey">
<div class="form-group">
<label>How did you hear about us?</label>
<div class="radio">
<label><input type="radio" name="howdidyouhearaboutus" value="Facebook">Facebook</label>
</div>
<div class="radio">
<label><input type="radio" name="howdidyouhearaboutus" value="Online Ad">Online Ad</label>
</div>
<div class="radio">
<label><input type="radio" name="howdidyouhearaboutus" value="TripAdvisor">TripAdvisor</label>
</div>
</div>
<div class="form-group">
<input type="submit" class="btn btn-info" value="Submit" id="submit" onclick="return false;">
</div>
</form>
<? if ($message): ?>
<div class="text-center alert alert-success">
<?= $message ?>
</div>
<? endif; ?>
</div>
--------------------
<script>
$('#submit').click(function(){
$('.form-hide').hide();
});
</script>
And form.php is for Google Sheets API integration, not sure if I need to include that here?
$client = new Google_Client();
try {
$client->setAuthConfig('account.json');
} catch(Exception $ex) {
exit('account.json not found.');
}
$client->setScopes(['https://www.googleapis.com/auth/drive','https: //spreadsheets.google.com/feeds']); ........
Basically I need a to be able to submit the form via POST.
here is my current form.
<form action="process.php" method="post">
<button type="submit" class="btn btn-success" role="link" name="item" value="1">Item 1</button>
<button type="submit" class="btn btn-success" role="link" name="item" value="2">Item 2</button>
<button type="submit" class="btn btn-success" role="link" name="item" value="3">Item 3</button>
</form>
I just need it to work like if I click item 1, it will POST a value of 1 to the process.php. and if I click item 2, it will POST 2. The problem is, no matter which button I press, the value will be "1". If I change it to GET, there are no problems.
I've also tried this but it doesn't seem to work
<form action="process.php" method="get">
<button type="submit" name="item" value="3" formmethod="post" formaction="process.php">Item 3</button>
</form>
Any ideas?
An upgrade from m1xolyd1an's answer:
put this on your process page
<?php
if(isset($_POST["product1"])) {
$product = 1;
}
if(isset($_POST["product2"])) {
$product = 2;
}
if(isset($_POST["product3"])) {
$product = 3;
}
?>
And put this on your form
<form action="process.php" method="post">
<input type="submit" class="btn btn-success" name="product1" value="Order Now">
<input type="submit" class="btn btn-success" name="product2" value="Order Now">
<input type="submit" class="btn btn-success" name="product3" value="Order Now">
</form>
then use $product to get your value.
Personally I would handle this a bit differently. For your form I would use input type submit instead of button and then give each one a name field that will be logged to $_POST.
<?php
if(isset($_POST['buttonName1'])){
$_POST['someVariable'] = 1;
}
if(isset($_POST['buttonName2'])){
$_POST['someVariable'] = 2;
}
if(isset($_POST['buttonName3'])){
$_POST['someVariable'] = 3;
}
?>
<form action="process.php" method="post">
<input type="submit" name="buttonName1" class="btn btn-success" value="1">
<input type="submit" name="buttonName2" class="btn btn-success" value="2">
<input type="submit" name="buttonName3" class="btn btn-success" value="3">
</form>
Then in your process.php file you can call your variable to find out which button the user clicked on the first page.
$callingVariable = $_POST['someVariable'];
In html you can pass in the array to PHP. Since you are using the same name for each button type, you can just do something like,
<form action="process.php" method="post">
<button type="submit" class="btn btn-success" role="link" name="item[]" value="1">Item 1</button>
<button type="submit" class="btn btn-success" role="link" name="item[]" value="2">Item 2</button>
<button type="submit" class="btn btn-success" role="link" name="item[]" value="3">Item 3</button>
</form>
and then $_POST will then contain an array for item with all values from the input elements and you can loop through each or do whatever your logic is that you want.
i have a form and can submit it one time with Ajax. As response comes a form too and it replaces the old. But when i then press the submit Button the form doesn't submit with Ajax and goes with the normal method. Why?
Here my JQuery-Code:
<script>
$(document).ready(function () {
$('#ajax_form').submit(function(e) {
var form = $('#ajax_form');
var data = form.serialize();
$.post('game/write.php', data, function(response) {
console.log(response);
$('#power').replaceWith(response);
});
return false;
});
});
</script>
The form:
<div id="power">
<div class="span4">
<form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="1" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form>
<form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="4" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form>
<form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="7" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form>
</div>
<div class="span4">
<form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="2" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form>
<form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="5" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form>
<form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="8" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form>
</div>
<div class="span4">
<form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="3" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form>
<form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="6" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form>
<form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="9" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form>
</div>
This for comes also back, only the Buttoncolors are different.
You need event delegation -
$(document).on('submit','#ajax_form',function(e) {
Try this -
$(document).on('submit','#ajax_form',function(e) {
var form = $('#ajax_form');
var data = form.serialize();
$.post('game/write.php', data, function(response) {
console.log(response);
$('#power').replaceWith(response);
});
return false;
});
event.preventDefault()
Documentation : http://api.jquery.com/event.preventDefault/
Now updated your code like bellow
<script>
$(document).ready(function () {
$('#ajax_form').click(function(event) {//use click instead of submit
event.preventDefault() // then use even.preventDefault()
var form = $('#ajax_form');
var data = form.serialize();
$.post('game/write.php', data, function(response) {
console.log(response);
$('#power').replaceWith(response);
});
return false;
});
});
</script>
add event.preventDefault() [ If this method is called, the default action of the event will not be triggered. ]