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
Related
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
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>
I am using jquery form plug-in for posting my form ajax way.
Post is working fine with default button.But it is not working when I am using custom bootstrap button as below . Please let me know what i am missing here?
http://jquery.malsup.com/form/#validation
Working case :
<input name="Update" value="Update" type="submit">
Not working case:
<a class="btn btn-sm btn-bitbucket" name="Update" value="Update" type="submit">
<i class="demo-icon icon-ccw fa-fw" style="font-size:1.3em;"> </i> Update
</a>
I've just removed my comment as any of these should work:
<input name="Update" value="Update" type="submit" class="btn btn-sm btn-bitbucket">
<button class="btn btn-sm btn-bitbucket" name="Update" type="submit">
<i class="demo-icon icon-ccw fa-fw" style="font-size:1.3em;"></i> Update
</button>
An anchor can't (by default) be used to submit the form, hence why it isn't working. However Bootstrap allows you to use the button classes on input and button tags.
Sorry for the ghost comment now!
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 :)