I want to display a confirmation dialog box like "Do you want to continue?" If "yes", I want to popup a message displaying form output, if "No" I want to stay on the same page.
In the code shown below I am navigating to facto.html for displying the output, but I want to show a popup with its contents instead. How can I do that?
My index.html:
<!DOCTYPE html>
<html>
<head>
<title>Lift From Scratch</title>
<script type="text/javascript">
<!--
function getConfirmation(){
var retVal = confirm("Do you want to continue ?");
if( retVal == true ){
<!--document.write("continue")-->
<!--window.location.href = '/facto.html';-->
return true;
}
else{
alert("Don't continue")
<!--window.location.href = 'index.html';-->
return false;
}
}
//-->
</script>
</head>
<body>
<h1>Finding Factorial</h1>
<div id="main" class="lift:surround?with=default&at=content">
<form method="post">
<table>
<tr><td> Enter a Number:</td> <td><input name="num" type="number"></td></tr>
<tr><td><input type="submit" value="Submit" onclick="getConfirmation();" formaction="facto"></td>
<td><input type="reset" value="Reset"></td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
facto.html:
<div data-lift="factorial">
<p>Factorial is: <span name="paramname"></span></p>
</div>
Try something like this:
function validateMyForm()
{
if( confirm('Are you sure?') )
return true; // will submit the form
else
return false; // do not submit the form
}
<form name="myForm" onsubmit="return validateMyForm();">
<input type="submit" value="Submit" />
</form>
You're going to probably want to fall back to JavaScript for this one, to be honest. You can make the form an AJAX form using Lift's SHtml.makeFormsAjax helper, then you can bind your submit button using SHtml.ajaxSubmit. The callback you pass to ajaxSubmit should return a JsCmd. That JsCmd can trigger the display of the popup. You can even render the popup's contents by using SHtml.idMemoize.
If you describe this question in a little more detail on the Lift group, you will probably find folks willing to help you with some of the more specific aspects of it.
Related
I need to show message "Please wait Processing" on click of Submit button using a hidden DOM element which contains the message and make it visible, but the message is not showing.
My html for the form and my validate function are given below.
<form name="siteSearchForm" method=post action="<%=request.getContextPath()%>/servlet/visibilityController" onsubmit="javascript:return validate();on_load()">
<td align="center" width="10%"><input type=submit name="siteSearchSubmit" value="SUBMIT" > <input type="RESET" name="clearTN" value="RESET"></td>
</form>
I tried the below code by calling on_load on form tag during onsubmit but it is not showing message
<head>
<script type="text/javascript">
function on_load(){
var y = document.getElementById("txtHiddenUname");
y.type= "text";
}
</script>
</head>
<body>
<input type="hidden" id="txtHiddenUname" value="invalid input" />
</body>
Becuase the return statement will exit the function call and nothing after it will run. You would need to add it BEFORE the return.
onsubmit="on_load(); return validate();"
or you can do
onsubmit="return validate() && on_load();"
but your on_load function needs to return true.
function on_load(){ return true; }
Also why are you using an input to display a message? Seems like you should be using a paragraph with display none/block. javascript: is not needed in event handlers, and on_load seems like it should be called on window load, not a form submission.
Also add the following line :
y.style.display = "block";
I'll cut to the chase. I wish to have two separate buttons that does two unique functions. However, acquiring data from the same form. The current problem that I'm facing is onSubmit() will always be executed with whatever buttons I attach to the form instead of its own function.
checkUser.js: Acquires username from the input field and tries to match it with the database (Oracle)
Update 1:
I have changed them accordingly. However, pressing Check still forwards me to StaffRegAuth.jsp instead of executing checkUser and then opening a new window.
<form action="StaffRegAuth.jsp" name="form" method="post">
...
<button onClick="return validStaffReg();">Register</button>
<button onclick="return checkUser()">Check</button>
</form>
Update 2:
Updated my checkUser.js as it seems to be the problem
StaffReg.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Staff Registration</title>
<%-- Javascript --%>
<script type="text/javascript" src="JS/validStaffReg.js"></script>
<script type="text/javascript" src="JS/preventSpace.js"></script>
<script type="text/javascript" src="JS/checkUser.js"></script>
</head>
<body>
<%response.addHeader( "Cache-Control", "no-cache"); response.addHeader( "Pragma", "no-cache"); response.addHeader( "Expires", "0"); %>
<h1 align="center"> Account Registration: </h1>
<form action="StaffRegAuth.jsp" name="form" method="post">
<div align="center">
<table style="width = 30%">
<tr>
<td>User Name:</td>
<td>
<input type="text" name="username" onKeyDown="preventSpace(this)">
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input type="password" name="password" onKeyDown="preventSpace(this)">
</td>
</tr>
<tr>
<td>User Group:</td>
<td>
<select name="userGroup">
<option value="1">Administrator
</optin>
<option value="2">Clerk
</optin>
<option value="3">Operations
</optin>
<option value="4">Sales
</optin>
</select>
</td>
</tr>
<tr>
<td>
<button onClick="return validStaffReg(form)">Register</button>
</td>
<td>
<button onClick="return checkUser(form)">Check</button>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
validStaffReg.js
// JavaScript Document
function validStaffReg(form) {
if (document.form.password.value == "" && document.form.username.value == "") {
alert("Please enter a Password and Login ID.");
document.form.password.focus();
return false;
}
if (document.form.username.value == "") {
alert("Please enter a Login ID.");
document.form.username.focus();
return false;
}
if (document.form.password.value == "") {
alert("Please enter a Password.");
document.form.password.focus();
return false;
}
return true;
}
checkUser.js
function checkUser(form) {
if (document.form.username.value != "" || document.form.username.value != null) {
var myWindow = window.open("checkUser.jsp", "MsgWindow", "width=200, height=100");
myWindow.document.write("<p>This is 'MsgWindow'. I am 200px wide and 100px tall!</p>");
document.form.username.focus();
return false;
}
return true;
}
Don’t use submit.
I.e., don’t use <input type="submit">.
Instead, make two separate buttons and call different functions onclick. Mind you that you can still get the form values.
I.e.,
<button onclick="return reqfunc()">
Use return, and now you can use the function. If you want to return to the form back without going to the next page then just return false in the JavaScript code.
Use <button onclick='YourFunction()'>Button Text</button>.
One of the tricks I use regularly is something like the following.
<form action="submit.jsp">
<button type="submit" name="submit_form" value="1" class="hiddenSubmit">Submit</button>
...
<button type="submit" name="clear_form" value="1">Clear</button>
<button type="submit" name="submit_form" value="1">Submit</button>
</form>
By giving the buttons different names, you can have the form do whatever processing is consistent and let the server manage any button-specific processing. Of course, you can also attach event handlers to the separate buttons.
Why does it have two [name="submit_form"] buttons? The first one has a class that you would style to make it active yet invisible (e.g., position: absolute; top: -1000px; left: -1000px) so that a keyboard <Enter> will fire that button instead of the other button[name="clear_form"].
I have some javascipt code here that validates a user form. When the user inputs the correct answer it tells them and gives them the link to the next question. At least, that's what it is supposed to do. When i click the form it reloads the page but it should not because i added return false.
the div tra holds 35
and the div usermsg is the user inputted value.
<script>
$("#submit").click(function(){
var clientmsg6 = $("#usermsg").val();
var rightanswer = $("#tra").val();
if (clientmsg6<>rightanswer)
{
$("#confirm").html("<h2>Sorry, wrong answer.</h2>");
}
else
{
$("#confirm").html("<a href='#' onclick='play();' style='font-size:20px;' id='new1'>Click here for Question 2</a>");
}
return false;
});
</script>
Any ideas why this is not working?
It should be
if (clientmsg6 != rightanswer)
not
if (clientmsg6<>rightanswer)
To prevent a form submission, you need to return false on the form itself instead of on the submit button. Your code should become:
HTML
<form action="page.php" method="post">
<input id="usermsg" type="text" name="answer" />
<input id="submit" type="submit" value="Submit" />
</form>
JS (please note the line where you have clientmsg6, you have a syntax error)
$("#myform").on('submit', function(){
var clientmsg6 = $("#usermsg").val();
var rightanswer = $("#tra").val();
if (clientmsg6 != rightanswer) { //This line was also wrong, should be != instead of <>
$("#confirm").html("<h2>Sorry, wrong answer.</h2>");
}
else {
$("#confirm").html("<a href='#' onclick='play();' style='font-size:20px;' id='new1'>Click here for Question 2</a>");
}
return false;
});
Alternatively, you can keep your existing code by changing your submit button to be just a plain old button, but you will lose the extra functionality of the user being able to hit the enter key and performing the same action.
<form action="page.php" method="post">
<input id="usermsg" type="text" name="answer" />
<input id="submit" type="button" value="Submit" />
</form>
Instead of using .html(), try using .text()
if #submit is a link tag otherwise use the form ID and the submit event
$("#submit").click(function(e){
e.preventDefault()
...
...
...
});
You need to attach handlers once the document has finished loading.
Wrap your script in the following
<script>
$(function() {
// script
});
</script>
I have a jsp page which has a form embedded and I'm submitting the form via JavaScript.
When the page has say aroung 10-50 items the submit is working fine but if the page has aroud 500 items or more its not submitting.
After I click the submit button the page just stays in the current page and it just keeps loading.
How can I solve this issue.
A sample code is shown below:
<html>
<script type="text/javascript">
function submitChecked() {
var approveStr="";
var approveArr=new Array();
if(document.frmReleaseDetail.checkBoxVer.length != undefined)
{
for(var i=0; i < document.frmReleaseDetail.checkBoxVer.length; i++)
{
if(document.frmReleaseDetail.checkBoxVer[i].checked)
{
approveStr +=document.frmReleaseDetail.checkBoxVer[i].value + ",";
approveArr.push(document.frmReleaseDetail.checkBoxVer[i].value);
}
}
if(approveStr=="")
alert("Please make a selection by clicking atleast one checkbox");
else
{
document.getElementById("passCheckVerVal").value=approveArr;
document.forms["newForm"].submit();
}
} //end of if checking multiple checkboxes
else //if the page has only one checkbox(version)
{
if(document.frmReleaseDetail.checkBoxVer.checked)
{
window.location = "process.jsp?passCheckVer="+document.frmReleaseDetail.checkBoxVer.value+'&u_trackingRequestID=<%=request.getParameter("u_trackingRequestID")%>';
}
else
alert("Please make a selection by clicking atleast one checkbox");
}
}
</script>
<body>
<%
String newTrackingReqId=request.getParameter("u_trackingRequestID");
%>
<form name=frmReleaseDetail>
//jdbc code
//100's checkbox named checkBoxVer
//button to invoke submitChecked javascript function
</form>
<form name=newForm" id="newForm" action="process.jsp" method="post">
<input type="hidden" name="passCheckVer" id="passCheckVerVal"/>
<input type="hidden" name="u_trackingRequestID" id="u_trackingRequestIDVal" value="<%=newTrackingReqId%>"/>
</form>
</body>
</html>
You need to change the form method to POST.
<form name=frmReleaseDetail method="post">
By default the method is GET. More informations here. You have quantity of data limitation lot smaller in GET.
EDIT :
Code suggestion with only one form :
<html>
<script type="text/javascript">
function submitChecked() {
var checked = false;
for(var i=0; i < document.frmReleaseDetail.checkBoxVer.length; i++)
{
if(document.frmReleaseDetail.checkBoxVer[i].checked)
{
checked = true;
break;
}
}
if((document.frmReleaseDetail.checkBoxVer.length != undefined and checked) or (document.frmReleaseDetail.checkBoxVer.checked))
{
document.forms["frmReleaseDetail"].submit();
}
else
{
alert("Please make a selection by clicking atleast one checkbox");
}
</script>
<body>
<%
String newTrackingReqId=request.getParameter("u_trackingRequestID");
%>
<form id="frmReleaseDetail" name="frmReleaseDetail" action="process.jsp" method="post">
<input type="hidden" name="u_trackingRequestID" id="u_trackingRequestIDVal" value="<%=newTrackingReqId%>"/>
//jdbc code
//100's checkbox named checkBoxVer
//button to invoke submitChecked javascript function
</form>
</body>
</html>
For anyone making noob (newbie) mistakes:
1: Type is "submit" NOT "button"
GOOD/CORRECT:----------------------------------------------
<input type="submit" value="some_button_label" />
BAD/INCORRECT:----------------------------------------------
<input type="button" value="some_button_label" />
2: Submit button needs to be nested inside the form.
GOOD/CORRECT:----------------------------------------------
<form action="cookies-personalize-response.jsp">
SEL_YOUR_FAV_PROG_LANG
<select name="fav_lan">
<option>LANG_01</option>
<option>LANG_02</option>
<option>LANG_03</option>
</select>
<input
type ="submit"
value="some_button_label"
/>
</form>
BAD/INCORRECT:------------------------------------------------
<form action="cookies-personalize-response.jsp">
SEL_YOUR_FAV_PROG_LANG
<select name="fav_lan">
<option>LANG_01</option>
<option>LANG_02</option>
<option>LANG_03</option>
<option>LANG_04</option>
</select>
</form>
<input
type ="submit"
value="some_button_label"
/>
3: Referesh page after fix, view source in browser to make sure actually changed.
As silly as the last answer is, it is actually the one that I got stuck on the longest.
For a simple form with an alert that asks if fields were filled out correctly, I need a function that does this:
Shows an alert box when button is clicked with two options:
If "OK" is clicked, the form is submitted
If cancel is clicked, the alert box closes and the form can be adjusted and resubmitted
I think a JavaScript confirm would work but I can't seem to figure out how.
The code I have now is:
function show_alert() {
alert("xxxxxx");
}
<form>
<input type="image" src="xxx" border="0" name="submit" onclick="show_alert();" alt="PayPal - The safer, easier way to pay online!" value="Submit">
</form>
A simple inline JavaScript confirm would suffice:
<form onsubmit="return confirm('Do you really want to submit the form?');">
No need for an external function unless you are doing validation, which you can do something like this:
<script>
function validate(form) {
// validation code here ...
if(!valid) {
alert('Please correct the errors in the form!');
return false;
}
else {
return confirm('Do you really want to submit the form?');
}
}
</script>
<form onsubmit="return validate(this);">
You could use the JS confirm function.
<form onSubmit="if(!confirm('Is the form filled out correctly?')){return false;}">
<input type="submit" />
</form>
http://jsfiddle.net/jasongennaro/DBHEz/
function show_alert() {
if(!confirm("Do you really want to do this?")) {
return false;
}
this.form.submit();
}
Simple and easy :
<form onSubmit="return confirm('Do you want to submit?') ">
<input type="submit" />
</form>
OK, just change your code to something like this:
<script>
function submit() {
return confirm('Do you really want to submit the form?');
}
</script>
<form onsubmit="return submit(this);">
<input type="image" src="xxx" border="0" name="submit" onclick="show_alert();"
alt="PayPal - The safer, easier way to pay online!" value="Submit">
</form>
Also this is the code in run, just I make it easier to see how it works, just run the code below to see the result:
function submitForm() {
return confirm('Do you really want to submit the form?');
}
<form onsubmit="return submitForm(this);">
<input type="text" border="0" name="submit" />
<button value="submit">submit</button>
</form>
If you want to apply some condition on form submit then you can use this method
<form onsubmit="return checkEmpData();" method="post" action="process.html">
<input type="text" border="0" name="submit" />
<button value="submit">submit</button>
</form>
One thing always keep in mind that method and action attribute write after onsubmit attributes
javascript code
function checkEmpData()
{
var a = 0;
if(a != 0)
{
return confirm("Do you want to generate attendance?");
}
else
{
alert('Please Select Employee First');
return false;
}
}