I just found out that every time onclick event for my <button> placed inside <form> tag triggers, form submits it's data as if i clicked <input type='submit'>.
I don't want that. Buttons inside my form serve other task, form shouldn't submit data after i clicked one of them.
To be more clear, i want this code:
<form action="http://www.google.com" method="POST">
<button onclick="alert('hi!')">Button</button>
<br>
<input type="submit" value="submit"/>
</form>
to show alert "hi!" when i click on the Button and it shouldn't open Google after that. It should only show Google when i press "submit".
Specify type="button":
<button type="button" onclick="alert('hi!')">Button</button>
From the linked article:
This [submit] is the default if the attribute is not specified
Try this..
onclick="alert('hi!'); return false;"
With jQuery use a span rather than an input, put use the .button call and then set a click event.
Related
When I attempt to call a function my this page using the below code. I just seems to refresh the page and not call the script.
<form role="search" name="locationForm">
<div class="form-group">
<input id="locationInput" type="text" class="form-control" placeholder="Search">
</div>
<button class="btn btn-primary btn-lg" type="submit" onclick="start();">Submit</button>
</form>
If I add a '#' to the end of the url, reload the page, then the onlcick event works as it is suppose to.
As far as I knew these were Anchor tags and I have no idea why they would be required in the calling of a function.
How do I correct this? As I don't want to have to use the #.
You are using a button element, whose default behavior, when clicked, submits its parent form. return false will stop the form from submitting:
<button class="btn btn-primary btn-lg" type="submit" onclick="start(); return false;">Submit</button>
If you don't want the button to automatically submit, you could change its type to button. Then, all it will do is run its onclick code. (You can still have that code submit the form manually)
I suppose you want to run the start() function when you submit the form?
You said you're working with an click event listener.
Try to listen for the submit event, instead.
$('#your_form_id').on('submit', function(e) {
e.preventDefault();
your script...
});
The code above basically does this.
Furthermore, the preventDefault keeps the form from actually submitting itself.
You could access the form data with
$('#your_form_id').serialize();
I hope this pushes you into the right direction!
How can I specify which submit button to submit with?
The current example just submits the first submit button, with $("form").submit(); but how can I make it so it chooses the submit button by id or name?
<html>
<script>
$("form").submit();
</script>
<form action="<?=$_SERVER['PHP_SELF']?>" method="post" />
//other inputs
<input type="submit" value="Enter" name="enter" id="enter">
<input type="submit" value="Void" name="void" id="void">
<input type="submit" value="Refund" name="refund" id="refund">
</form>
</html>
Simulate a click to that element:
$("#circle2").click();
Also, you don't need action="<?=$_SERVER['PHP_SELF']?>". Forms submit to the current page by default.
First of all, why do you want to submit the same form with 3 different buttons?
It is a bad structure. Your code also has all the 3 buttons with the "id" attribute which is included in the <input> tag twice.
Based on your question, I could figure out you would want the submit button to say different things under different conditions.
Have a single button like this :
<input type="submit" name="submit" value="Enter">
You could always change what your button says, or how it looks like with JQuery :
if(condition){
$('#submit').val('.....');
// You can also change more stuff as you want.
}
Then you would want to submit the form
$('#submit').click(function(e)){
e.preventDefault();
$('form').submit();
}
By id
You can select the element by id easily with $('#my_btn') and you can click on it using the jQuery method click().
By name (or any other attribute
Other attributes are a bit harded (but not complex)
You select the element with $('input[name=some_name]')
Examlpe using your code
Here is an example which shows how you can get elements by name and click on them, click the submit buttons to see what happens: http://jsfiddle.net/nabil_kadimi/99v93/2/
I have used jquery wizard plugin to create this form.
The form get submitted when I use the ID = "next" submit button.
when I use the ID = "quick" button it will redirect to the Feedback.Form but it will not submitted properly. (I cant see the db has been updated properly.)
$j("#quick").click(function(){
$j('#feedbackForm').submit();
});
<form id="feedbackForm" method="post" action="<openmrs:contextPath/>/module/feedback/addFeedback.form" class="bbq" enctype="multipart/form-data" >
<div id="bottomNavigation">
<input id="back" value="Back" type="reset" />
<input id="next" value="Next" type="submit" />
<input id="quick" value="Just submit now with all the defaults!" type="button" />
</div>
Please can any one help me on this?
Thanks,
Harsha
Full source : https://gist.github.com/3227043
Convert the "next" button to normal button and add and if or switch selection into the jquery code. So both buttons were normal and Jquery will decide which ones takes to submit getting the name of the button who calls the click event. Or you can do it trough a javascript function, well, you can do it in any way as you want, but both buttons must be "button" type
I just found out that every time onclick event for my <button> placed inside <form> tag triggers, form submits it's data as if i clicked <input type='submit'>.
I don't want that. Buttons inside my form serve other task, form shouldn't submit data after i clicked one of them.
To be more clear, i want this code:
<form action="http://www.google.com" method="POST">
<button onclick="alert('hi!')">Button</button>
<br>
<input type="submit" value="submit"/>
</form>
to show alert "hi!" when i click on the Button and it shouldn't open Google after that. It should only show Google when i press "submit".
Specify type="button":
<button type="button" onclick="alert('hi!')">Button</button>
From the linked article:
This [submit] is the default if the attribute is not specified
Try this..
onclick="alert('hi!'); return false;"
With jQuery use a span rather than an input, put use the .button call and then set a click event.
I have two submit buttons in a form that Lets user Update/ Delete content. I want a confirm pop only if the user clicks Delete button.
<html>
<head>
<script type="text/javascript">
function confirmation() {
// I need to know which submit button was pressed.
if (value==Delete){
var answer = confirm("Cancel?")
if (answer){
return true;
//Continue as intended
}
else{
return false
}
}
}
</script>
</head>
<body>
<form id="Edit_Data">
//form input fields go here
<input name="action" type="submit" onclick="confirmation()" value="Update">
<input name="action" type="submit" onclick="confirmation()" value="Delete">
</form>
</body>
</html>
Any Ideas?
First of all you have several problems with your code. The value in your if statement is an undefined variable secondly you need to put quotes around the delete. Here is working fiddle http://jsfiddle.net/SMBWd/ and the relevant code change. Also, I would encourage you to look how to do this without using javascript in your HTML.
function confirmation(e) {
// I need to know which submit button was pressed.
if (e.value=='Delete'){
and in the HTML
<input name="action" type="button" onclick="confirmation(this)" value="Update">
<input name="action" type="button" onclick="confirmation(this)" value="Delete">
For your onclick event definition in the html tag, why not call separate functions?
The simplest way would be to NOT call the javascript on the Update button.
If your form is static, then you do this in your IDE. If it's dynamic, then the dynamic code can create the form element accordingly.
If the form elements are generated automatically, then you should setup an event handler in JavaScript dynamically. Find all elements of type input with type attribute button or submit, and assign
elems[i].onclick = confirmation;
You'd then get the event object as a method parameter, and you could query that for the value of the button.