Several submit buttons in a single HTML form - javascript

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"].

Related

javascript onclick being called for wrong input, on Chrome but not IE

I am trying to resolve an issue in an existing application that I have inherited.
Below is a cut-down html and javascript page, which exhibits the issues I am facing.
Essentially, if you press enter in the top box ("Filter"), then the click handlers for both buttons are being triggered - but only in Chrome, not in IE (IE is working as expected).
<html>
<head>
<script type="text/javascript">
function verify(){
return confirm("New Button Clicked");
}
function verifyFilter(){
return confirm("Filter Button Clicked");
}
function swallowenter(button) {
if(event.keyCode==13) {
event.keyCode=null;
window.document.getElementById(button).click();
}
return true;
}
function swallowentercompletely() {
if(event.keyCode==13) {
event.keyCode=null;
}
return true;
}
</script>
</head>
<body onkeypress="javascript:swallowentercompletely();">
<form id="formID" action="file.html" method="post">
<table cellpadding="0" cellspacing="0" border="0">
<tfoot>
<!-- main table footer -->
<tr>
<td colspan="8" align="left">
Date: <input id="newDate" name="newDate" onkeypress="javascript:swallowenter('newButton');" type="text" value="" size="8" maxlength="10"/>
<input type="submit" value="New" name="newButton" onClick = "return verify()" onkeypress="javascript:swallowenter('newButton');"/>
</td>
</tr>
</tfoot>
<tbody>
<!-- main table body -->
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" onkeypress="javascript:swallowenter('filterButton');">
<tbody>
<tr>
<td>
<input id="filterText" name="filterText" type="text" value="Filter"/>
</td>
<td></td>
</tr>
<tr>
<td align="right">
<input type="submit" value="Filter" name="filterButton" id="filterButton" onClick = "return verifyFilter()" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<!-- end main table body -->
</table>
</form>
</body>
</html>
Additionally, removing the <form/> tags also makes it work in Chrome - so there's something in the way that's interacting that causes the issue. So, it's like the "New" button is the default button for the form; and the swallowenter method is there to cancel the default button click and replace it with the one that is passed in to the method -- but it's not cancelling the default button click for some reason Can anyone explain how to make this work correctly in Chrome too?
--- Update ---
I have put alert(event.keyCode); before and after event.keyCode=null;, and the keycode is showing as 13 both times - so why isn't it clearing the keycode in Chrome? This is true whether or not the <form/> tags are there. And even setting the keyCode to something other than null (e.g. 14) doesn't work - it still shows 13 both times
I believe the main problem is that your closing </form> tag is out of scope from your closing </body> tag, with them in place you should get it working.
<!-- this -->
<body onkeypress="javascript:swallowentercompletely();">
<form id="formID" action="file.html" method="post">
<!-- rest of html -->
</body>
</form>
<!-- should become -->
<body onkeypress="javascript:swallowentercompletely();">
<form id="formID" action="file.html" method="post">
<!-- rest of html -->
</form>
</body>
Also, you have to prevent the default action.
function swallowenter(button) {
event.preventDefault(); // prevent the default action
if (event.keyCode == 13) {
event.keyCode = null;
window.document.getElementById(button).click();
}
return true;
}
The issue is that, in Chrome (and all modern browsers really), event.keyCode is read-only. This means you can't just override the value.
Instead, you need to use:
function swallowenter(button) {
if(event.keyCode==13) {
event.preventDefault(); // CHANGED HERE
window.document.getElementById(button).click();
}
return true;
}
event.preventDefault() will prevent the default event behaviour from being acted on.
Additionally, in the code I posted, I needed to change the newButton to have an id instead of just a name; so the getElementById call can find it.
Note that if you require compatibility with Internet Explorer 7 or earlier, this method didn't exist and so the old method of setting the field to null will still work in that case.

I want to display a confirmation dialog before displaying output

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.

HTML page is refreshing after clicking on submit button with onclick function

I have a form in this index.html page with an Ajax script, on clicking the submit button it should just display "Authentification succeeded" or not, if the user is in the database, it works but when I hit submit it displays the message for only one second. How can I keep the message displayed?
Here's the index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Accueil</title>
<style type="text/css" media="screen">
h1 {
color:red;
}
</style>
<script language="javascript">
function chargement()
{
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
var x = new XMLHttpRequest();
x.open('GET','verif.php?email='+email+'&password='+password,true);
x.onreadystatechange = function()
{
if ((x.readyState == 4 ) && (x.status == 200))
{
document.getElementById('res').innerHTML= x.responseText;
}
}
x.send();
}
</script>
</head>
<body>
<h1>Bienvenu(e) à Affariyet.tn </h1>
<table>
<form action="index.html" method="GET">
<tr>
<td>Email :</td>
<td> <input type="text" id ="email" name="email" value="" placeholder="Votre Email"><br></td>
</tr>
<tr>
<td>Mot De Passe : </td>
<td><input type="password" id="password" name="password" value="" placeholder="Votre Mot De Passe"><br></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="auth" value="S'authentifier" onclick="chargement()">
<input type="reset" name="reset" value="Annuler">
</td>
</tr>
<tr>
<td></td>
<td><div id="res"> </div></td>
</tr>
</form>
</table>
</body>
</html>
And this is the PHP file that has the verification function :
<?php
include 'config.php';
class main
{
public $conn;
function __construct()
{
$c=new config();
$this->conn=$c->connexion();
}
function verif($conn,$email,$password)
{
$req="SELECT `Email`,`Password` FROM utilisateur WHERE `Email`='$email' AND `Password`='$password' ";
$res=$conn->query($req);
return $res->RowCount();
}
}
$m=new main();
$email=$_GET['email'];
$password=$_GET['password'];
$resultat=$m->verif($m->conn,$email,$password);
if($resultat==0)
{
echo '<h4 style="color:red;"> Email ou mot de passe erroné</h4>';
}
else
{
echo '<h4 style="color:green;">Authentification réussie. Accéder à la <a href=produit.php>Liste des produits</a></h4>';
}
?>
Your issue comes from that, when you submit:
you execute the chargement() function as stated by the onclick attribute, and it works
but since your button has type="submit" its default behaviour is to submit the form: then the action="index.php" is executed, so reloading the page, which obviously doesn't not include what you'd just put into the res div
To avoid this (i.e work without reloading the page) you can use two ways:
one is to prevent default action, either as already proposed by #anhkzet (
but in your case it can't work "as is"; look at it's answer's edit), or by adding event as argument to your chargement() function, then including event.preventDefault; before it ends
more simply you can change your <input type="submit"...> into <button type=button"...>: this way the form is not submitted at all.
EDIT in response to the supplemental question added by the OP in its comment below.
In order to use POST rather than GET you can merely substitute the desired method in your XMLHttpRequest.open() function.
I guess that you ask it because you're incertain about how to pass POST data in this case.
In fact there is no place in the method for an argument that would contain such data, but it doesn't matter: like with the <form> tag you can at once use POST method and keep query parameters attached to the url.
Inputs with type submit are meant to send data in form to server. To prevent default behaviour of submit button add return false; at the end of chargement() handler.
Ok, apparantly, I forgot 'bout return statement inside attribute...
Either:
<input type="submit" onclick="return chargement()" />
... and add return false to the end of chargement method.
...or just
<input type="submit" onclick="chargement(); return false;" />
Both should work.

changing page in HTML

I wanted to set up a JS when users press the button, it would redirect them to the homepage, which called index.html
<form method="confirm" style="width: 500px; height: 300px; margin-left: auto; margin-right: auto; margin-top:100px; margin-bottom: 100px; font-size: 30px; color: black;">
<fieldset id="confirm">
<legend>NOTIFICATION</legend>
<table>
<tr>
<td>
<h1>THANK YOU FOR SIGNING IN</h1>
</td>
</tr>
<td>
<input type="submit" value="Return to homepage" onclick="return return1();">
<script>
function return1()
{
window.location.href = 'index.html';
}
</script>
</td>
</tr>
</table>
</fieldset>
</form>
There are some mistakes here.
The error you get is because you use a submit input button inside a form and the button will try to evaluate your form submission. To prevent that you have to return false on your function.
<script>
function return1()
{
window.location.href = 'index.html';
return false;
}
</script>
But if you want to do a button that simply will redirect to another page you should not use a form and a submit button but just a normal input button
<input type="button" value="Return to homepage" onclick="return1();">
If you want to use the form because you want to evaluate some data you need to put your page on the <form> in the action field, without using the script
Also confirm is not accepted you should use GETor POST.
<form method="POST" action="index.html">
Add return false to the function to disable the default event on submit(page refresh)
function return1()
{
window.location.href = 'index.html';
return false;
}
The following code redirects me to index.php which sits at the same level as index.html and index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="check.php" method="post" id="re">
<fieldset id="confirm">
<legend>NOTIFICATION</legend>
<table>
<tr>
<td>
<h1>THANK YOU FOR SIGNING IN</h1>
</td>
</tr>
<td>
<input type="submit" value="Return to homepage">
</td>
</tr>
</table>
</fieldset>
</form>
<script src="index.js"></script>
</body>
</html>
The JS file
function _x(elem){
return document.getElementById(elem);
}
var x = _x("re");
x.onsubmit = function(e){
e.preventDefault();
window.location = "index.php";
}
simply change your input type submit to button
<input type="button" value="Return to homepage" onclick="return return1();">
Replace
window.location.href = 'index.html';
with:
window.open('INDEX.HTML');
You change code
<input type="submit" value="Return to homepage" onclick="return return1();">
=> Return to homepage
With you type css ".btn" see like a button
Note : In form, you should not put or to redirect without submit form.
This may help you
<script language="javascript">
function return1()
{
window.location="yourpage.html";
}
</script>

Javascript set input value when user click button

Im developing chrome extension. I want to change input value(username) to some text when user click button. But my solution not working. Need advise.
My code is shown below:
<!DOCTYPE html>
<html>
<head>
<META http-equiv=content-type content=text/html;charset=utf8>
<META http-equiv=content-type content=text/html;charset=windows-1254>
<META http-equiv=content-type content=text/html;charset=x-mac-turkish>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title></title>
<script>
$('#target').submit(function() {
alert('something');
return false;
$('#UserName').value('test');
});
</script>
</head>
<body>
<form id="target">
<table>
<tr>
<td>UserName:</td>
<td>
<input type="text" id="UserName" size="20" />
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input type="password" id="Password" />
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Login" id="Login" /></td>
</tr>
</table>
</form>
</body>
</html>
Change your submit button from type button to submit from:
<input type="button" value="Giriş" id="Login" />
to:
<input type="submit" value="Giriş" id="Login" />
Also change your JS code from:
$('#target').submit(function() {
alert('uyarı');
return false;
$('#UserName').value('deneme');
to:
$('#target').submit(function() {
alert('uyarı');
$('#UserName').val('deneme');
return false;
Your submit button needs to be of type 'submit'.
So this:
<input type="button" value="Login" id="Login" />
should be:
<input type="submit" value="Login" id="Login" />
Also, the appropriate jQuery function for getting/setting input values is .val().
Lastly, you don't want to return false until the end of the function.
$('#target').submit(function() {
alert('something');
$('#UserName').val('test');
return false;
});
See this working Fiddle.
This is working fine
$('input#Login').click(function() {
$('#UserName').val('test');
return false;
});
jQuery uses the VAL rather than VALUE
in other words
<script>
$('#target').submit(function() {
alert('something');
return false;
$('#UserName').val('test');
});
</script>
and also the FORM is not submitado change the type of input and submit to the adciona FORM METHOD = "POST"
Guys thank you very much. I found. The problem is when you are developing google chrome application you must seperate javascript code from html. Otherwise javascript not work.

Categories

Resources