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 :)
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
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 have been creating my site in bootstrap and I have come across a weird problem, when I hit a button that has this in it
<form action="javascript:$('#modal .modalbody').load('/controllers/forums/create_topic_modal.php?id='.$forumName['id'].'',function(e){$('#modal').modal('show');});">
<input type="submit" class="btn btn-primary btn-md" value="Create New Post" />
</form>
all I get in firefox is a browser page that says [object Object] and the URL says
javascript:$('#modal .modal-body').load('/controllers/forums/create_topic_modal.php?id=1',function(e){$('#modal').modal('show');});
Any idea whats happening? Works fine in Chrome.
You have to use onsubmit attribute (fires when a form is submitted).
If you add return false; at the end of onsubmit, the form will not trigger a basic behavior (eq. get request/"page refresh").
<form onsubmit="$('#modal .modalbody').load('/controllers/forums/create_topic_modal.php?id='.$forumName['id'].'',function(e){$('#modal').modal('show');}); return false;">
<input type="submit" class="btn btn-primary btn-md" value="Create New Post" />
</form>
On my web app I would like a page to have particular buttons hidden until certain events are triggered. I want "Save Changes" button to appear when "edit record" button has been clicked. How can I do this in JS or JQuery?
<input type="button" value="edit" id="editbutton" onclick="showbutton()" />
<input type="button" value="Save changes" id="savebutton" />
You can use JQuery('#editbutton').hide();
in the doccument.ready{}function
You need a trigger function which will invoke on the edit button click.
Now this function will make the save changes button visible
function showbutton()
{
JQuery('#savebutton').show();
}
<button id="b1" onclick="document.getElementById('b2').style.display='inline';">Edit Record</button>
<button id="b2" style="display:none;">Save Changes</button>
Demo: http://jsfiddle.net/74CxP/