I have 3 buttons on my toolbar (delete,block,unblock). Сan i change form action dynamically
<form action="/users/groupUnblock" method="POST">
<button type="submit" class="btn btn-danger btn-sm">Delete</button>
</form>
Tried to write a func,but its not working
If you don't want to use JavaScript at all, this can be done with pure HTML5. You can specify the action of each button with the formaction attribute.
Example:
<form>
<button type="submit" formaction="http://firsttarget.com">Submit to first</button>
<button type="submit" formaction="http://secondtarget.com">Submit to second</button>
</form>
Read more about this attribute here
Related
i have a html form with two buttons , one to submit the data via post .. and other to invoke a javaScript function. but both when clicked results in submitting.
<button onclick="validateData()" class="btn btn-warning" > Get Price Ranges </button>
<button type="submit" class="btn btn-warning" >Search</button>
is it not possible have two buttons inside the same form ?
I dont know what code is inside your validateData() function but try once like this...
<button onclick="validateData(); return false" class="btn btn-warning" > Get Price Ranges </button>
But the best way is do like this..
<form action= "" onsubmit="validateData();return false" method="">
In action define URL and in method may be either post or get.by removing this
<button onclick="validateData()" class="btn btn-warning" > Get Price Ranges </button>
How can I add action = "/#" to a button without using <form>?
For example, I want to do
<button type="submit" action = "/logout" class="btn btn-default">Logout</button>
instead of:
<form action = "/logout">
<button type="submit" class="btn btn-default">Logout</button>
</form>
Here is the current code:
<div class="navbar-form navbar-right btn-group">
<button type="button" class="btn btn-default">Score</button>
<button type="button" class="btn btn-default" href="#menu-toggle" id="menu-toggle">Favorites</button>
<button type="submit" class="btn btn-default">Logout</button>
</div>
You can't use action attribute on a button it only works with HTML form. type="submit" is used on a form element to submit the form data. An element with this type will appear as a button by default.
If you don't want to use HTML form you can use anchor tag to send user on any page. You can also do it with JavaScript or jQuery
I have used Bootstrap and created form.my form Looks like
<form action="default_results.php" method="post" class="calculator" name="frmCalculator">
I have used this code in the beginning of my code and end of the page I have used three button Looks like
<div class="row">
<button id="button2" class="dont-compare shadow-inset" value="reset" >
Reset</button>
<button id="button3" data-toggle="pop" class="dont-compare shadow-inset" class="update" >
Update MI</button>
<button id="Button4" class="dont-compare shadow-inset" class="calculator" >
Calculate Scenarios</button>
</div>
I have another page its called default_ results.php page. I want to load that page when I click Calculate Scenarios button.I have used href tag for that button. But that three button also load default_results page.
How to set particular button? please any idea about it?
Your question is not about bootstrap, but HTML. Default type for buttons is submit. When you want only one button should submit the form, add them explicity type="submit" and to the others add type="button".
For example button4 will submit forms, other redirect on click.
<button type="button" onclick="location.href = '/some_page_1.php';" id="button2" class="dont-compare shadow-inset" value="reset" >Reset</button>
<button type="button" id="button3" data-toggle="pop" class="dont-compare shadow-inset" class="update" >Update MI</button>
<button type="submit" id="button4" class="dont-compare shadow-inset" class="calculator" >Calculate Scenarios</button>
or more elegant way to redirect:
<script>
document.getElementById("button3").onclick = function () {
location.href = "/some_page_2.php";
};
</script>
It's because your button is in the form,
you can make (in Jquery or Javascript) :
$('#Button').click(function(e){
e.preventDefault();
});
To avoid the form post.
And after make :
window.location.href('your_url');
To redirect browser to your url
use this css class with buttons through php if condition
.hide {
display: none;
}
I am very new in JavaScript and I have the following problem.
I have this form:
<form id="actionButton" action="salwf.do?serv=1" method="post">
<button id="accept" name="ctrl" value="Accept" type="submit" class="acceptButton" onclick="sottometti(this)">ACCEPT ICON BUTTON</button>
<button id="cancel" name="ctrl" value="Cancel" type="submit" class="cancelButton" onclick="sottometti(this)">CANCEL ICON BUTTON</button>
<button id="sap" name="ctrl" value="SAP" type="submit" class="sapButton" onclick="sottometti(this)">SAP ICON BUTTON</button>
<input id="testId" name="test" type="hidden">
</form>
As you can see this form contains 3 different button. Clicking on one of this button it is performed the sottometti(this) Javascript script, that have the following code:
function sottometti(obj){
//document.getElementById('testId').value = obj.value;
document.getElementById('testId').value = obj.value[id]
document.getElementById('actionButton').submit()
}
This script should submit the previous form (the id of the clicked button) but it don't work. Why?
I think that it is trying to retrieve an actionButton that is not present in my form code.
Can you help me to make it work?
replace obj.value[id] with obj.id.
Try this alternative:
<form id="actionButton" action="salwf.do?serv=1" method="post">
<button name="ctrl" value="accept" type="submit" class="acceptButton">ACCEPT ICON BUTTON</button>
<button name="ctrl" value="cancel" type="submit" class="cancelButton">CANCEL ICON BUTTON</button>
<button name="ctrl" value="sap" type="submit" class="sapButton">SAP ICON BUTTON</button>
</form>
I have basically just removed all the JavaScript and the hidden input.
Now, on the server side, test it by simply outputting the value of the ctrl POST variable.
You should clearly see accept, cancel or sap according to the button that the user clicked. No JavaScript required, it's built-in, default functionality :)
This question already has answers here:
Submit form using a button outside the <form> tag
(15 answers)
Closed 8 years ago.
I want to place a submit <button> outside of a <form> block. How to make a submit that can execute method="post" action="/order/setup" from form block`?
<form id="order-form" role="form" method="post" action="/order/setup">
<input type="text name="first_name" />
</form>
<div class="details-section-button row">
<button type="submit" class="btn btn-block btn-dark right shadow arrow">Next <i class="icn btn-right-arrow"></i></button>
</div>
In browsers that support the new form attribute from HTML 5:
<button form="order-form">…</button>
… but don't. Adjust your design so that form controls are inside the form they are associated with. It doesn't make semantic sense to split them up.
$("form#order-form").submit();
http://api.jquery.com/submit/
Try something like this, giving your submit button an id of submitButton:
<div class="details-section-button row">
<button id="submitButton" type="submit" class="btn btn-block btn-dark right shadow arrow">
Next
<i class="icn btn-right-arrow"></i>
</button>
</div>
Then with jQuery:
$("#submitButton").on("click", function () {
$("form#order-form").submit();
});