Onclick events for button - 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>

Related

Redirection to form fails with error HTTP 404. The resource you are looking for

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>

Make button validate form and open a link

I want with a simple button in a form, validate the form and at the same time, open a new tab with "link.com". But when I click on the button, the form is validate but the the "link.com" does't open. I don't know how to do that correctly ... Thank you
<form class="form-row" action="mail.php" method="post">
<div class="col-12 col-md-12 mb-2 mb-md-0">
<input type="email" class="form-control form-control-lg" id="inlineFormInputGroup" placeholder="email..." name="mail" required>
</div>
<div class="col-12 col-md-6">
<button type="submit" class="btn btn-block btn-lg btn-primary btnoffre">Je veux en recruter !</button>
</div>
<div class="col-12 col-md-6">
<button type="submit" class="btn btn-block btn-lg btn-primary btnoffre">Je veux ĂȘtre recrutĂ©.e !</button>
</div>
</form>
You could just add onsubmit to your form:
<form class="form-row" action="mail.php" method="post" onsubmit="window.open('http://www.google.com', '_blank')" >
I guess you want one button that does 2 things?
Maybe some JavaScript piece would help here? :
Get the correct BUTTON element - one inside :
const BUTTON = document.querySelector("div button");
And listen for click event, when it goes, trigger function that opens new tab? :
BUTTON.addEventListener('click', function(){ window.open(link.com, '_blank');
win.focus(); }, false);
Wonder if sth like this would help with this?

Submit button doesn't work in bootstrap btn-group class

Could you please advise how to implement the bootstrap btn-group element which consists of one submit button and the rest of buttons work as checkboxes. Actually I've created the mentioned but my submit button doesn't work and when it is pressed, nothing happens.
Here is what I have now:
<form class="form-group" action ="" method = "get" novalidate>
<div class="btn-group-vertical" data-toggle="buttons">
<button type="submit" class="btn btn-success">Search</button>
<label class="btn btn-primary">
<input type="checkbox" name="select_tag" value="2" id="id_select_tag_0" /> Mysql
</label >
<label class="btn btn-primary">
<input type="checkbox" name="select_tag" value="3" id="id_select_tag_1" /> Disk health
</label2>
</div>
</form>
And the block looks like this
If I put submit button out of the btn-group block it works:
<form class="form-group" action ="" method = "get" novalidate>
<button type="submit" class="btn btn-success">Search</button>
...
However, it looks ugly
So is it possible to have a lot of buttons work as checkboxes and one which work as submit in one bootstrap button group?
you can do it with javascript :
<form class="form-group" action ="" method = "get" novalidate>
<div class="btn-group-vertical" data-toggle="buttons">
<button type="button" onClick="javascript:document.forms[0].submit();" class="btn btn-success">Search</button>
<label class="btn btn-primary">
<input type="checkbox" name="select_tag" value="2" id="id_select_tag_0" /> Mysql
</label >
<label class="btn btn-primary">
<input type="checkbox" name="select_tag" value="3" id="id_select_tag_1" /> Disk health
</label2>
</div>
</form>
Looks like you've some weird spaces in your form element and didn't set an action.
Try replace:
<form class="form-group" action ="" method = "get" novalidate>
With
<form class="form-group" action="#" method="get" novalidate>
just remove data-toggle="buttons"
Try this - Change your button's class:
class="btn btn-success submit"

HTML button with POST

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.

Bootstrap form action submit issue

Iam new to bootstrap and I am trying to add an action="doform.php" to a form but I cant get it to work, where in this code should I add action?
<form class="form-inline">
<div class="form-group">
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
I have tried the following but it doesnt do anything...
<form class="form-inline">
<div class="form-group">
<form id="back" action="doit1.php" method="post">
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
</div>
<div class="form-group">
<form id="back" action="doit1.php" method="post">
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
</div>
</form>
Inside the form tag.
And don't forget the method. I assume you'll want to use POST
<form action="doAction.php" method="POST">
Oh, and you only need one submit button.