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.
Related
Suppose that I have the below form in an angular component. How do I focus on the Log in button after clicking on enter key?
<form class="mt-4" #contactform="ngForm">
<input type="text" class="form-control" aria-describedby="emailHelp" placeholder="" [(ngModel)]="model.eMail" required>
<input type="password" class="form-control" placeholder="" [(ngModel)]="model.password" required>
<button type="button" class="btn btn-primary btn-lg btn-block" (click)="onClickSend(contactform)">Log in</button>
<button type="button" class="btn btn-primary btn-lg btn-block">Clear</button>
</form>
Thanks in advance.
Change the login button to type "submit" - and the enter key will trigger it.
<button type="submit" class="btn btn-primary btn-lg btn-block" (click)="onClickSend(contactform)">Log in</button>
You can also use ngSubmit on the form tag instead of click:
<form class="mt-4" #contactform="ngForm" (ngSubmit)="onClickSend(contactform)">
<button type="submit" class="btn btn-primary btn-lg btn-block">Log in</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>
I have a required input, with two buttons "submit" and "goBack". On clicking "goBack", I don't want to require check for the input field.
Belpw is the code I tried,
<input type="text" class="form-control" id="formGroupExampleInput" name="nameofcontract" placeholder="Name of Contract" required></form>
<button class="btn btn-danger btn-lg" type="submit">Submit</button>
<button class="btn btn-warning btn-lg " onclick="goBack()">Go Back</button>
Have a look at this lines. I hope this is what you like to achieve:
function goBack() {
if (!formGroupExampleInput.value) return;
console.log("goBack")
}
<input type="text" class="form-control" id="formGroupExampleInput" name="nameofcontract" placeholder="Name of Contract" required>
<button class="btn btn-danger btn-lg" type="submit">Submit</button>
<button class="btn btn-warning btn-lg " onclick="goBack()">Go Back</button>
set Id of both button and check blank on click
$('#Submit').click(function(){
if($('#formGroupExampleInput').val()=='')
{
alert('can not blank')
return false;
}
else
{
alert('ok')
return true;
}
})
$('#goback').click(function()
{
window.location.href='your url';
})
by default a button is submit, so a click validates the form
change the type to "button" to change the behaviour
<button class="btn btn-warning btn-lg" type="button" onclick="goBack()">Go Back</button>
reducing your example to what is required
<html>
<body>
<script>
function goBack() {
window.location.href = "https://google.com/"
}
</script>
<form>
<input type="text"
name="nameofcontract" placeholder="Name of Contract" required>
<button type="submit">Submit</button>
<button type="button" onclick="goBack()">Go Back</button>
</form>
</body>
</html>
I have two buttons, save button and delete button. I need to add onclick event to both of the button. The onclick event function for delete button is working but I don't know how to onclick event to my save button.
This is my code.
<div class="form-group last">
<div class="col-sm-offset-3 col-sm-9">
<input class="btn btn-info" id="savebutton" type="submit" name="save" value="Update" >
<input class="btn btn-default" id="delete" type="submit" name="delete" value="Delete" onclick="return confirm('Are you sure to delete?');">
</div>
What I want to do is when I click the save button, the record will be save into database and something alert box will display and if I click 'OK', it will go back to the previous page.
I don't know why it is not working for you or what exactly you are looking for but it should be the same way as you did for delete. Check the snippet :)
function update(){
//databases work to save
alert("saved");
//address to the page where to want to redirect
location.href = "www.yoursite.com";
}
<div class="form-group last">
<div class="col-sm-offset-3 col-sm-9">
<input class="btn btn-info" id="savebutton" type="submit" name="save" value="Update" onclick="update();">
<input class="btn btn-default" id="delete" type="submit" name="delete" value="Delete" onclick="return confirm('Are you sure to delete?');">
</div>
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;
});