Javascript alert box unnecessarily submits form - javascript

I have a simple javascript method to show an alert box. The method is called when a button is clicked (which is between the form tags). The alert is supposed to simply display a help dialog, but when the user presses the "ok" button on the alert box it submits the form! I cannot figure out how to prevent this. I've tried changing how I make the button and my alert method, but nothing seems to make a difference. Here is my code:
<script type="text/javascript">
function help(){
alert("Displaying help...");
}
</script>
Below is how I've created the button. I also tried creating the button with button tags, but the same problem occurred.
<form action="./go.php" method="post">
<input type="image" src="./help.png" name="help" width="25" height="25" onclick="help()">
.
.
.
</form>
Any help on how I can prevent the alert box from submitting the form is greatly appreciated. Thanks in Advance!

The best way to fix this would be to use a regular <img> tag
<img src="./help.png" name="help" width="25" height="25" onclick="help()" />
But returning false from your code would probably work too
function help(){
alert("Displaying help...");
return false;
}

Add a return false; in your function:
<script type="text/javascript">
function help(){
alert("Displaying help...");
return false;
}
</script>

Related

Refresh Captcha , but also refreshing whole register form

Javascript Code
<script language="javascript" type="text/javascript">
function refreshCaptcha()
{
$("#captchaimage").attr('src','captcha_image.php');
}
</script>
Image Code
<img src="captcha_image.php" id="captchaimage">
Button Code
<button name="submit" class="btnRefresh" onClick="refreshCaptcha();">Refresh Captcha</button>
When i tried to click on refresh captcha button , it will refreshed the whole page. Any idea which causing the problem ?
<button>
by default has the attribute type="submit" which causes the form to submit.
Hence, adding type="button" to the button will suffice.
Because your form has property action, button triggers action behavior,then redirecting to action's url.
You can remove action or change button to a,or use event.preventDefault.

onsubmit property fails to open new window

A quick question here regarding forms. I've searched the web and can't seem to figure out why what I've implemented isn't working.
The idea is simple. I have a form inside a JSP page. The form has an 'onsubmit' property defined to open a different jsp with some parameters. Inside the form I have a few buttons, one of which calls a JavaScript function, which in turn submits the form (under some conditions).
Here's the code:
JSP:
...
<form id='testForm' onsubmit="window.open('another.jsp')">
<input type="button" onclick="callJsFunction()" />
..
</form>
JavaScript:
function callJsFunction() {
if (launchNow == 1) {
var form = document.getElementById("testForm");
form.submit();
}
}
If I add target="_blank" to the form definition, a new window does open, but NOT the jsp I want to open. Ultimately, I want the form to perform a servlet action (using the action attribute) and then open the new jsp. Any ideas???
Thanks!
The solution to what I was looking for is found here: Javascript Post on Form Submit open a new window
Rather than setting target="_blank", I can set the target to the window I define and open. In my servlet, I redirect to the desired jsp, and it appears in the new pop-up window.
<form id='testForm' action='another.jsp' target='_blank'>
I might be wrong but is this what you are looking for?
Please see the working demo at this link: http://fiddle.jshell.net/vf6AC/show/light/ (don't work in the jsfiddle)
<form action="http://google.com" id="testForm">
<input type="submit" />
</form>​
<script type="text/javascript">
var testForm = document.getElementById("testForm");
testForm.onsubmit = function(e){
window.open("http://stackoverflow.com");
return true;
};​
</script>
See the jsfiddle here: http://jsfiddle.net/vf6AC/

How to show a hidden div with javascript when submitting a form?

I'm not really familiar with jquery, but am trying to get a simple animated gif to show when a form is submitted. When clicking 'submit' to upload an image I want to show gif so that users know that image is being uploaded. The submit button has an id="submit" and also an onClick="return confirm('message')"
I have the div code containing the gif:
<div id="loading" style="display:none">
<img src="images/hand_timer2.gif" alt="loading" />
</div>
which is hidden. And it does show if I remove the style. Fair enough. But when I try to show it with the following javascript it doesn't show:
<script type="text/javascript">
$(function(){
$('#submit').click(function(){
$('#loading').show();
});
});
I have
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"
type="text/javascript"></script>
in a separate PHP header file. As far as I can see it's the only reference to jquery library, but I do have other javascript codes that all work. I just can't get this one to work. Can anyone point out what I'm doing wrong and why I can't get the div to show gif when clicking submit?
I believe the problem could be that your inline onClick="return confirm('message')" prevent the click-event from reaching your click-event listener attached with jQuery - not sure though. Anyhow, instead of listening for a click-event on the submit-button, I would listen for the submit event on the form, that will fire when the form is actually submitted (a form can usually be posted by other means than clicking the submit button as well - through the Enter key for instance).
$('#idOfYourForm').on("submit", function () {
$('#loading').show();
});
Side note:
You don't close the style attribute properly on your loading div (notice that the > is blue):
<div id="loading" style="display:none>

Cannot focus on form tags in stuts2 div after submit

I have a struts2 project which uses a tabbed panel. The tabs are jsp pages within divs. When you first select the tab the javascript at the end of the page sets the focus on the desired input field. Once you hit submit though the tab comes back with no focus in the input field.
I have debugged it extensively to see what is happening, and I've noticed that the javascript at the end of the page is running, but it just cannot focus in the field. It can see the field through getElementById and even get it's value (i've tested this with alerts) but it cannot do anything TO the field. It cannot put text in either through javascript. If I click on another tab and then click back the script the focus is restored.
The submit and textfield in the tab are below:
<s:form id="myForm" action="myTabAction.do" method="post" validate="true" >
.
.
.
<s:submit name="submitz" value="Save" id="billbo"
formId="myForm" executeScripts="true"
href="myTabAction.do?submit=Save"
targets="myTab" showLoadingText="false"
theme="ajax" cssClass="buttonSmallClass"
indicator="loadingImage_case" />
.
.
.
<s:textfield name="testVal" maxlength="80" id="textField" cssClass="textClass" />
The javascript at the end of the tab jsp is as follows:
.
.
.
</s:form>
</table>
<script type="text/javascript">
var field = document.getElementById("textField");
field.focus();
</script>
</body>
</html>
The relevant parts of the parent page are:
<s:tabbedPanel selectedTab="%{selectedTabId2}"
id="CasePartyTabbedPanel" theme="ajax" requiredposition="left"
cssClass="subTabedpanelClass" cssStyle="width: 710px; height: 200px;" doLayout="false"
templateCssPath="includes/TabContainer.css">
.
.
.
<s:div label="My Label" id="myTab"
href="MyAction.do?param1=%{paramVal1}&param2=%{paramVal2}"
theme="ajax" cssStyle="display:none" refreshOnShow="true"
executeScripts="true" >
<p>Loading...
</s:div>
</s:tabbedPanel></td>
I am using struts 2.0.9 with dojo.
I really need to find out how to set the focus to the input field after a submit.
Any help would be greatly appreciated. Sorry if it is a bit long winded, but I wanted to be clear.
Thanks
Bill
Can you change the javascript at the bottom of the page as shown below and try? -
<script type="text/javascript">
dojo.ready(function(){
var field = document.getElementById("textField");
field.focus();
});
</script>
When the page loads, the < script > tag at the bottom of the page might get executed before the dojo completes initialization. That could be preventing the field from getting focus. So you can add the code to set the focus in dojo.ready(), which gets executed after dojo is initialized.
Simply use the attribute focusElement
<s:form focusElement="textField" />

Javascript/Jquery checkbox conditional hyperlink

I have a hyperlink/image button that uses javascript to submit a form,
<p>
<a href="#" onclick="checkOutFrm.submit();">
<img src="images/btn-checkout-basket.gif" width="169" height="28" alt="Checkout" border="0" />
</a>
</p>
and would like to add a checkbox that would disable the hyperlink until it is checked. How would I go about doing this?
Any help greatly appreciated, S.
You should not, in general:
Mix your JavaScript into your HTML markup (you should attach your logic handlers programmatically),
(ab)use anchor elements for JavaScript only (you should use a button, or put the onclick handler on the img directly), nor
place a form's submission handler on the click of a single element (you should instead handle the onsubmit event of the form).
I don't know the specifics of your situation, but I would do this in your HTML file:
<!-- Put a valid doctype here -->
<html><head>
<script type="text/javascript" src="submit.js"></script>
</head><body>
<form id="myform" ...>
<label>
<input type="checkbox" name="accept" id="accept-box" />
I accept
</label>
<button type="submit" id="submitter" disabled="disabled">
<img src="..." />
</button>
</form>
</body></html>
...and this in your submit.js file:
window.onload = function(){
var accept = document.getElementById('accept-box');
var submit = document.getElementById('submitter');
accept.onclick=function(){
submit.disabled = !accept.checked;
};
document.getElementById('myform').onsubmit = function(){
// Prevent form submission by any means unless
// the accept button is checked.
return accept.checked;
};
};
(Well, actually, I personally would use jQuery for handling the JS side of things :)
$(function(){
$('#accept-box').click(function(){
$('#submitter').attr('disabled',!this.checked);
});
$('#myform').submit(function(){
return $('#accept-box').attr('checked');
});
});
You can use CSS to style away the button surrounding the image, if you like:
#submitter { border:0; padding:0 }
Before submitting data, you can check the value of the checkbox first.
<a href="javascript: if(getElementById('CheckBoxID').checked) { checkOutFrm.submit(); } else { return false; }">
If you use jQuery you'd rather do it this way:
$(function(){
$("a").click(function(e){
e.preventDefault();
$("#CheckBoxID").val() && $("form").submit();
});
});
You can use Jquery Validator http://bassistance.de/jquery-plugins/jquery-plugin-validation/ to force it.

Categories