<button type="submit" id="start-break" name="start" type="button" class="actv-btn-dft1 blbg" onClick="showhide('start-break', 'stop-break');return false;" title="Start Break">Start Break</button>
<button type="submit" id="stop-break" type="button" class="actv-btn-dft1 orbg" onClick="showhide('stop-break', 'start-break');return false;" style="display:none" title="Stop Break">Stop Break</button>
I am using something like a toggle button where click of start makes visible stop then on click of stop start button is visible.
I am using showhide('start-break', 'stop-break') JavaScript function as described below:
function showhide(hideid,showid)
{
document.getElementById(showid).style.display='block';
document.getElementById(hideid).style.display='none';
}
I want to know why I am not able to get the value of the start or stop in the controller.
-> If I remove that return false in the onclick I get it submitted but the UI gets disturbed (the button does not remain in the stop position when start is clicked).
The return false; is blocking the submit. When the form is submitted, the page will of course be refreshed with the response of the form submit request.
Just don't use JS to show/hide the buttons. Use the server side language for this (based on your profile and the edit history you're using "J2EE" and thus you're familiar with JSP):
<c:if test="${empty param.start}">
<button type="submit" name="start">Start</button>
</c:if>
<c:if test="${not empty param.start}">
<button type="submit" name="stop">Stop</button>
</c:if>
An alternative is to use Ajax to submit the form. But that's a completely different story.
Have you tried putting return false; at the end of the showHide() function as opposed to in the elements' onclick attribute? If I'm not mistaken, you're not supposed to have multiple javascript statements in one inline attribute.
If nothing happens, could it be that your function declaration is out of window scope? Your code works fine for me in http://jsfiddle.net/TZMkH/1/
Related
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.
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!
Background
Okay, I have a unique web application, and after reading around on SO and some great other questions, I am still scratching my head as to how I can accomplish this feat. The end result: I must add a cancel button to a form which has populated input fields dynamically after a link click... It is a third stage function which is being activated, and must be able to be run solely within the context of the dynamic form (because there are other modal form windows on the same page)... please follow below for the flow. Any suggestions are much appreciative.
Steps Followed that end input form is affected by
1) User clicks on a link.
2) Modal window opens with dynamically populated fields
3) AJAX/JSON method pulls information through mysql
4) div's and spans populated inside modal window
5) Edit links are added for corresponding fields... Registers event handler to listen to user either clicking "edit", or closing modal window.
6) If user clicks edit, input fields appear, as well as a submit button.
7) on submit,
a) deactivate all other event handlers on other "edit" links
b) send ajax/json
c) activate all other event handlers
d) hide all input fields and 'reset' the modal window for next item edit
html
<form id="updation_station" action=''>
<div class="view_info">
Test 1:<span class="view_test_1"></span>
Edit
<span class="edit_test_1_input"><input type='text' name='test_1_input' /></span>
</div>
<div class="view_info">
test_2:<span class="view_test_2"></span>
Edit
<span class="edit_test_2_input"><input type='text' name='test_2_input' /></span>
</div>
<input type="submit" name="update" id="change_btn" value="Save Changes" />
<input type="submit" name="cancel" id="cancel_btn" value="Cancel" />
</form>
In order to accomplish what I needed, I run $('.edit_link').on('click', doUpdate); to execute the function of the updater... as follows
function doUpdate(e) {
// show input fields, sets variables, etc....
// Turn off the event handler for all the other edit links
$('.edit_link').not(this).off('click', doUpdate);
//Now open the listener for the submit form
$('#updater').submit(function() {
//Now close the editing fields
//closes edit fields, etc...
$.ajax({//do something });
//Now reset the event handlers so the links are re-activated regardless of what was clicked
$.ajax().always(function() {
$('.edit_link').on('click', doUpdate);
});
return false;
});
// hides input fields, etc.... and tells client to go on merry way
};
Unfortunately, I am extremely weary to change the $('#updater').submit(function() { action itself due to complications with some other omitted functionality... I would prefer to only append functions to it and/or touch the html portion, such as..if ($submitted_value == "cancel") { //cancel} else {//act}, but that seems to be an issue because any submit button itself will activate the form itself.
Anyone have any ideas? Snippets That may help?
Hopefully the experts of SO will be a better guide on how I can go about this...
Thank you in advance.
May not be best practice.. but might work
anonymous call
<input type="button" name="cancel" id="cancel_btn" value="Cancel" onclick="$(this).parent().hide()" />
anonymous if two elements deep
<input type="button" name="cancel" id="cancel_btn" value="Cancel" onclick="$(this).parent().parent().hide()" />
hide by div id or class
<input type="button" name="cancel" id="cancel_btn" value="Cancel" onclick="$(".formDiv").hide()" />
I've got a button that calls a javascript function named "submit()". In that function I simply write document.getElementById('try').innerHTML="it worked"; to test out whether or not my button is passing data to the function or not.
The problem is "it worked" gets printed for about a half second before disappearing.
I made an entire form that printed processed data to the webpage perfectly using the same html page. The only difference is that I changed the structure of my form and moved my functions to a .js file.
Although now, even if I comment out the submit() function in the .js file and paste the function within the core html file the same thing happens. I can paste is above or below the form and the same thing results.
Here is my HTML:
<div class="formsection">
<button type="Submit" onclick="Submit()">Submit</button>
</div>
</form>
</div>
<div id="output">
<p> Try this: <span id="try"></span></p>
</div>
Here is my javascript function:
<script type="text/javascript">
function Submit(){
document.getElementById("try").innerHTML="It worked";
}
</script>
you are using submit button to test your code, it executes the JS code and submitted the form.
If you don't want the form to be submit use return false in submit()
<script type="text/javascript">
function Submit(){
document.getElementById("try").innerHTML="It worked";
return false;
}
</script>
and in html again use return
<button type="Submit" onclick="return Submit()">Submit</button>
In javascript when any event handler returns false that halts the event execution.
The issue you're experiencing is due to your markup, mainly this piece:
<button type="Submit" onclick="Submit()">Submit</button>
You've specified that the button should perform a form submission when clicked, hence the javascript fires, changes the text and the page is reloaded (post back occured).
To get around that, you implement one of the following changes:
Change your markup to just be a button that fires javascript:
<input type="button" onclick="Submit()">Submit</input>
Add a statement in your javascript that cancels the default action for your submit button:
event.preventDefault(); MDN Link
Your form is submitted, that's why you see "It worked" only for a second (if at all).
Your function isn't prevents form submission.
You can use onsubmit attribute of form to specify function which will be called before form is submitted and can decide whenever it allowed or not by returning Boolean value
Your form actually gets submitted:)
Use this:
<button type="Submit" onclick="Submit(); return false;">Submit</button>
I don't see the FORM tag but if you do something like:
<form action="javascript:" onsubmit="Submit()">
Your function Submit will be called, and nothing more.
The nice thing about using a input type="submit" is your user can submit a form by hitting Enter and don't have to manage it yourself.
I added a button that is supposed to open a calendar 'date-picker'. The button is in a form that is rendered inside an EXTJS TabPanel. When the button is clicked, it causes the EXTJS tab panel to reload. Even if I remove everything but the following (making it a dumb button) the page still reloads.
<button id="calendar-trigger">...</button>
Edited: derived from: http://www.dynarch.com/projects/calendar/doc/
<input type="text" id="id_activity_date" name="activity_date">
<input type="button" value="..." id="calendar-trigger">
<script type="text/javascript">
new Calendar({
trigger : "calendar-trigger",
inputField : "id_activity_date",
onSelect : function() { this.hide() }
});
</script>
I don't want the reload to happen and I can't figure out why the reload is happening. or how to stop it. Something is getting triggered beyond just the button click. I suspect that EXTJS is causing it, but I can't figure out why.
I would like to start by killing all code that is triggered by this button. I want to make this a dumb button that doesn't do anything when clicked.
What is likely going on here? and How can I fix it?
Try this instead:
<input type="button" id="calendar-trigger" value="Button Label">
I've had trouble with <button> tags trying to submit forms and what not when they should not. Using an <input> tag with a type of "button" seemed to help me - maybe it will work for you as well.
If you have a <button> tag on a form which does not have a submit button (<input type="submit">), the <button> becomes the input button by default, apparently.
In HTML, <button> has a type attribute. The default value for type is submit, meaning that unless you specify type="button" (or something else), the button will trigger the submission of the form it is associated with. That is probably what is causing your page to reload (because the form is being submitted).
Alternatively, you could use <input type="button" id="calendar-trigger" />.
I would recommend using <input> as opposed to <button>
<input type="button" value="Click Me" id="calendar-trigger" />
Typically the <input type="submit" /> will make a submit button when in a form, I suspect that is what the <button> tag is doing.