I want to trigger to buttons by clicking on a third button. One of my buttons submits data to a PHP file and the second one loads a bootstrap modal. When I run it, I feel that both are triggered, although the submit button works fine but the bootstrap modal disappears in a blink.
this is the code:
HTML
<button onclick="submitdata(); showbootstrapmodal();">Click to Trigger the two other buttons</button>
<button id="submit" name="submit" type="submit" form="#myform"></button>
<button id="modal" data-toggle="modal" data-target="#myModal"></button>
and here is the javascript code for the functions:
javascript
function submitdata(){
document.getElementById('submit').click();
return false;
}
function showbootstrapmodal(){
document.getElementById('modal').click();
return false;
Is there a flaw in my code?
Try removing 'return false;' from submitdata()
function submitdata(){
document.getElementById('submit').click();
}
Related
I am working on an asp.net application where I have button written like this:-
<button onclick='javascript:imagech(this);' class='close_product color_dark tr_hover'><i class='fa fa-times'></i></button>
I have also a client-side javascript function for the above button:
<script type="text/javascript">
function imagech() {
alert('image clicked.');
}
</script>
What I want that is whenever I click that function then the button click event should not fire page-load. The above object is not server control but it's event occurs page-load. I can also use another html control like this:
<input type='button' onclick='javascript:cartclicked(this);' value='X' class='close_product color_dark tr_hover' />
and this does not occurs page-load but I want icon also used as :
<i class='fa fa-times'></i>
inside <button> tag. but the <i> tag is not used in <input> tag. How I can <button> tag event without any page-load? Please help me someone here.
it seems you are using <button> inside a <form> element. By default a button acts as a submit button and it tries to submit your form on click.
In order to continue using button and avoid this issue you need to specify type as button as shown below
<button type="button" onclick='javascript:imagech(this);' class='close_product color_dark tr_hover'><i class='fa fa-times'></i></button>
If I understand you correctly the problem is that the button is inside a form (The main asp.net form) and the click event post the form to the server. That's why you the page load occurred.
The solution Just add to the button (it doesn't matter if you are using input or button) attribute type="button".
I have a button that triggers the below jquery function. Currently the function works and hides/shows the form element as desired. However it is tripping the html 5 validation (which I want on submit). Is there a reason it is triggering and a way I can prevent this? I experimented with having a return at the end of the function but no luck. Also neither form is required as part of the validation. I keep getting a pop up telling me previous items are required when I hide/show the form elements..
<button class="col-sm-2 btn btn-success" onclick ="hideFormField ()">Hide</button>
function hideFormField (){
if(!$("#trail").is(":visible"))
{
$("#trail").show();
$("#blazers").hide();
}else{
$("#trail").hide();
$("#blazers").show();
}
}
Try this:
<button class="col-sm-2 btn btn-success" onclick ="hideFormField ();return false;">Hide</button>
Try:
<button class="col-sm-2 btn btn-success" onclick="hideFormField();event.preventDefault();">Hide</button>
Jonathan Lonowski was correct in his comment. Buttons are submit-type by default so you need to explicitly define a button with type="button" attribute if you don't want any additional effects when the button is clicked.
A small example that illustrate the activation of HTML5 form validation through default button behavior is in this jsfiddle: http://jsfiddle.net/zk3jr9vn/
by default button is submit type so add Type to button
like
<button type="button" class="col-sm-2 btn btn-success" onclick ="hideFormField ()">Hide</button>
I'm working with html and javascript. My problems is, in one webpage a show a plot and a few button. When the user press any of this button I need show 3 or 4 options but in the same page without switching pages.
Below is my code
<form action="MyPage">
<button type="submit" value="More Options">
</form>
redirect to an other page.What I can do?
First of all, get rid of type="submit". That's what's causing the page to do stuff you don't want. The second thing is to add an onclick handler. It should return false to avoid behavior like "submit". The variable 'this' will pass the button to your function, which you might need in that code. Then fill in the body of addMoreStuff() with your code to, well, add more stuff!
<form action="MyPage">
<button onclick="addMoreStuff(this); return false; ">More Options</button>
</form>
<script type="text/javascript">
function addMoreStuff(button) {
/* your code here */
}
</script>
Drop the form (use the button alone), and look into jQuery. It's extremely easy to use, and it'll help you quickly build code your application.
HTML
<button type="submit" value="More Options" id="more">
JavaScript (jQuery)
// run "add_options" when someone clicks on the button
jQuery('button#more').on('click', add_options)
function add_options() {
//code here to add more options
}
Ok so I have two submit buttons, a standard submit button, as well as a , etc, etc button.
Anyway, the second button is a delete button, but both of them go to the same function, because of onSubmit.
What I want to do is set up an if statement to see if the delete button was pressed.
Here's the code to generate the delete button (the value is generated by PHP):
<button type="submit" name="del" id="deletebutton" value="'.$org.'">Delete</button>
Here's my idea so far:
if (document.getElementById('deletebutton').value != '') {
BLAHBLAHBLAH CODE HERE for delete button click;
}
else {
BLAHBLAHBLAH Code for non-delete button click;
}
but my IDE (NetBeans) seems to show an error when I try to do this. How would the correct way to do this be?
EDIT: DOH typo!
if (document.getElementById('deletebutton').value != '' {
You forgot the closing parenthasis, that is why you are getting an error:
if (document.getElementById('deletebutton').value != '') {
One thing you could consider, have both buttons have an onclick action which sets a hidden value in the form. You can then check that in your onsubmit function. Plenty of ways to do this.
you could create and assign a event handler to each of the form buttons and pass the reference to the function to determine which was fired, like this for example.
<script>
function whichButton(o){
if(o.id == "deletebutton"){
alert("delete was pressed");
//document.yourFormName.submit();
}else{
// document.yourFormName.submit();
alert("delete wasn\'t pressed");
}
return false
}
</script>
set up the button
<form name="yourFormName" action="" onsubmit="return false">
<button type="submit" name="del" id="notdeletebutton" value="'.$org.'" onclick="return whichButton(this)">Not Delete</button>
<button type="submit" name="del" id="deletebutton" value="'.$org.'" onclick="return whichButton(this)">Delete</button>
</form>
Suppose a form has multiple submit buttons:
...
<button type="submit" value="deletefoo">Delete Foo</button>
<button type="submit" value="deletebar">Delete Bar</button>
<button type="submit" value="Edit">Edit</button>
...
I am intercepting the clicks for only the 2 delete buttons and disabling the form submit to trigger a custom modal dialog which has OK and CANCEL buttons on it to confirm user choice. If user presses OK, I want to submit the form. If cancel, then dialog dismissed and nothing happens.
I have the first part wired up to trigger the dialog but I am at a loss on how to get the OK button in the dialog to trigger the form submit contingent on which original submit button was pressed (e.g. if Delete button pressed, I want to confirm with user they want to delete, then if so, submit the form as normal.
I've searched around and look at jQuery docs but haven't found the answer yet so I must be missing something really straightforward.
Update: I don't want to use JS confirm function. In my original question above I'm looking to use a custom modal dialog for various reasons.
Check out the JS confirm function and put it as an onclick event.
You have a nice example here.
Why not have them be regular buttons and then onclick set a variable to determine the action type and then when the form submits include this hidden variable and check that to find what you're supposed to do
First, you'd have to intercept both (all) the buttons, you could do this easily by fetching any of the submit buttons within a specific form, then you can ask your question and given you still have the current event handler, you can figure out what button was pressed and do the callback you'd like. For example:
<form id="myform">
<button type="submit" value="delete">Delete</button>
<button type="submit" value="Edit">Edit</button>
</form>
--
$(function() {
$("form#myform button[type='submit']").click(function(ev) {
ev.preventDefault();
if (confirm("you sure")) {
var action = $(ev.currentTarget).val();
console.log(action);
}
});
});
JSLint is here: http://jsfiddle.net/r48Cb/
Basically, console.log(action) will output either "delete" or "Edit" based on the original click. How you handle that value is up to you. A switch statement, a simple if block could work, but it's up to you, I don't know the scope of your app.
The window.confirm function returns a true if the user selects okay and a false if the user cancels. Using this logic you could do something like this:
<button id="delete" type="submit" value="delete">Delete</button>
<button type="submit" value="Edit">Edit</button>
var question;
$("#delete").click(function(){question=window.confirm("Are you sure?");)
if (question){
//Submit the form here
}
else{
alert("Not deleted!");
}
I think you are making it too complex, you can do something as simple as:
<form >
<input name="foo" value="foo">
<button name="sub0" value="sub0" onclick="
return window.confirm('sure?');
">submit 0</button>
<button name="sub1" value="sub1" onclick="
return window.confirm('sure?');
">submit 1</button>
</form>
If the user clicks OK on the confirm dialog, the form submits from whichever button was pressed. If not, it doesn't.
My 2c:
... (edited: removed the value parameter. buttons don't need that)
<button onclick='deleteFoo(); ' >Delete Foo</button>
<button onclick='deleteBar(); ' >Delete Bar</button>
<button onclick='allowEdit(); ' >Edit</button>
...
function deleteFoo() {
do-your-modal-whichever-way-you-want;
if confirmed,
$('#form-id').attr('action','your-action-for-delete-foo');
$('#form-id').submit();
else-just-return
}
function deleteBar() {
do-your-modal-whichever-way-you-want;
if confirmed,
$('#form-id').attr('action','your-action-for-delete-bar');
$('#form-id').submit();
else-just-return
}
function allowEdit() {
whatever
}