I've been using a function called validateForm() to check forms before they're submitted. The basic form is:
<script type="text/javascript">
function validateForm()
{
var fname=document.forms["reg"]["firstname"].value;
var lname=document.forms["reg"]["lastname"].value;
if (fname==null || fname=="Jane" ||fname=="" || lname==null || lname=="" || lname="Doe")
{
alert("You must provide your name");
return false;
}
</script>
Now, I have two registration pages. One uses some simple HTML and CSS that I wrote myself and looks a million years old. The other leverages Bootstrap because I'm taking baby steps to modernizing the look of the pages I maintain. The plain HTML form has a structure like:
<form name="reg" action="include/registrationwriter.asp" onsubmit="return validateForm();" method="POST">
<strong>First Name*:</strong> <input type="TEXT" name="firstname" size="30" /><br />
<strong>Last Name*:</strong> <input type="TEXT" name="lastname" size="30" /><br />
<input type="SUBMIT" value="Submit" />
</form>
While the bootstrap page has a structure like:
<div class="well">
<form name="reg" class="form-horizontal" onsubmit="return validateForm();" action="tcqf_include/registrationwriter.asp" method="POST">
<div class="form-group">
<label for="firstname">First Name*</label>
<input type="text" class="form-control" id="firstname" name="firstname" placeholder="Jane">
</div>
<div class="form-group">
<label for="lastname">Last Name*</label>
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Doe">
</div>
<button type="submit" class="btn btn-success btn-lg"><span class="glyphicon glyphicon-floppy-disc"></span> Register</button>
</form>
</div>
Now, the plain HTML page, on submit does the appropriate check while the Bootstrap page ignores the check and goes straight to the ASP page that handles writing the results to the database. Why does one work and the other does not?
Related
Below is the code of the form using which I'm trying to fetch the value for the query string.
<form id="form1">
<label for="allthesewords"> all these words</label>
<input type="text" id="allthesewords">
<br>
<label for="thisexactwordphrase">this exact word phrase</label>
<input type="text" id="thisexactwordphrase">
<br>
<label for="anyofthese">any of these</label>
<input type="text" id="anyofthese">
<br>
<label for="noneofthese">none of these</label>
<input type="text" id="noneofthese">
<br>
<input type="submit" value="Advance Search" onClick="advanceSearch()">
</form>
This one is the javascript function where I'm building my query string.
function advanceSearch(){
document.getElementById("form1").action="https://www.google.com/search?as_q="+document.getElementById("allthesewords").value+"&as_epq="+document.getElementById("thisexactwordphrase").value+"&as_oq="+document.getElementById("anyofthese").value+"&as_eq="+document.getElementById("noneofthese").value;
return true;
}
So, the actual problem is while clicking on the submit button it must redirect to this url
https://www.google.com/search?as_q=Harvard%20univeristy%20students&as_epq=students%20of%20Harvard%20Univeristy&as_oq=Harvard&as_eq=almamater
However, when I run my code it just redirects to this url:
https://www.google.com/webhp.
Thanks in advance!!!!!
<form action="https://www.google.com/search">
<p>Find page with</p>
<input class="input_bar" type="text" name="as_q" placeholder="all these words">
<input class="input_bar" type="text" name="as_epq" placeholder="this exact word or phrase">
<input class="input_bar" type="text" name="as_oq" placeholder="any of these words">
<input class="input_bar" type="text" name="as_eq" placeholder="none of these words">
<input id="btn" type="submit" value="Advance Search">
</form>
Use it!
I am trying to automate the login of a web page using vanilla JavaScript.
This is the form on the web page:
<form id="tbb_logon_form" class="login_form" method="post" action="https://www.btopenzone.com:8443/tbbLogon" name="login_form">
<fieldset class="username-field">
<label for="email" id="lbl-email">BT ID</label>
<input type="text" id="username" name="username" class="required" tabindex="3" value="username" placeholder="This is usually your email address">
</fieldset>
<fieldset>
<label for="password">Password</label>
<input type="password" id="password" name="password" class="required" value="password" tabindex="4">
</fieldset>
<input type="submit" value="Login" id="lgnbtn" tabindex="5" id="loginbtn" onclick="var s=s_gi('btiopenzone'); s.linkTrackVars='eVar19,prop50'; s.eVar19='OZ|Home Hub|Landing Page|Account selected:BT Broadband'; s.prop50='OZ|Home Hub|Landing Page|Account selected:BT Broadband'; s.tl(this,'o','OZ|Home Hub|Landing Page|Account selected:BT Broadband');">
<input name="xhtmlLogon" type="hidden" value="https://www.btopenzone.com:8443/tbbLogon">
</form>
The things have tried are:
document.getElementById("lgnbtn").submit();
document.getElementById("lgnbtn").click();
but neither are automating the click of the login button.
Please help me.
You can submit your form using:
document.forms[0].submit();
or
document.forms["login_form"].submit();
Hi I have a little problem
I have 3 forms that send different parameters via GET to another page and i have 3 inputs outside all forms that I want to send with form that user chooses to submit.
Inputs with names one, two and three must be send with 1 of that forms.
This is my code:
<input type="text" name="one">
<input type="text" name="two">
<input type="text" name="three">
<form action="process.php" method="get">
<input type="text" name="name">
<input type="submit" value"Process by name">
</form>
<form action="process.php" method="get">
<input type="text" name="adress">
<input type="submit" value"Process by address">
</form>
<form action="process.php" method="get">
<input type="text" name="number">
<input type="submit" value"Process by number">
</form>
All I want to is, when someone submit any form, that three inputs name="(one,two,three)" are send with rest param of form.
EDIT: Just 1 form is submitted!
If you put everything into one form, and use a hidden type value, you can ensure that all values are passed on submit.
<form action="process.php" method="get" id="form1">
<input type="text" name="one">
<input type="text" name="two">
<input type="text" name="three">
<input type="text" name="name">
<input type="submit" name="btnName" value="Process by name">
<input type="text" name="adress">
<input type="submit" name="btnAddress" value="Process by address">
<input type="text" name="number">
<input type="submit" name="btnNumber" value="Process by number">
</form>
Since you are submitting to a PHP page, you can check which of the buttons was pressed with the following code...
if (isset($_POST['btnName'])) {
//do something with name
} else if (isset($_POST['btnAddress'])) {
//do something with adress
} else if (isset($_POST['btnNumber'])) {
//do something with number
}
Is from 2 hours that im trying to understand how to use jQuery with a file html, but I can't figure it out!
I want a simple strngh password using jQuery and I found this useful link: http://jsfiddle.net/jquery4u/mmXV5/
My problem now is how allow file html communicate with this script?
my file html is very simple:
<form name="register" id="signup" method="post" onsubmit="return validateForm()" action="register_user.php">
<div class="header">
<h3>Registration</h3>
<p>Complete this form to register.<br/>* required field</p>
</div>
<div class="sep"></div>
<div class="inputs">
<input type="text" placeholder="Name" name="name" autofocus />*
<input type="text" placeholder="Surname" name="surname" autofocus />*
<input type="text" placeholder="Email" name="email" autofocus />*
<input type="password" placeholder="Password" name="password" />*
<div class="sep"></div>
<div id="messages"></div>
<input type="submit" id="submit" name="Submit" value="CONFIRM REGISTRATION">
</div>
</form>
As you see, javascript file of the link is very consistent so I want to put all codes into another file, but after that I really don't know how to link 2 file and work togheter!
Here is a useful link that could help you learn more about jQuery.
You need to add this to your file (in the head or right BEFORE closing the body tag).
<script>src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
This allows you to use the jQuery library.
After you include the ajax library from google (this is preferable to be added inside the <head> *insert here </head> tags.
Now, if you have an external js file, you just add your jQuery code to it and simply import it in your html file.
<script src="yourFileWithJquery.js"></script>. Note that the js file has to be in the same folder with your html file.
Now you are good to go.
Here is a good example on your code:
<head>
<script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="myJsFile.js"></script>
</head>
<body>
<form name="register" id="signup" method="post" onsubmit="return validateForm()" action="register_user.php">
<div class="header">
<h3>Registration</h3>
<p>Complete this form to register.<br/>* required field</p>
</div>
<div class="sep"></div>
<div class="inputs">
<input type="text" placeholder="Name" name="name" autofocus />*
<input type="text" placeholder="Surname" name="surname" autofocus />*
<input type="text" placeholder="Email" name="email" autofocus />*
<input type="password" placeholder="Password" name="password" />*
<div class="sep"></div>
<div id="messages"></div>
<input type="submit" id="submit" name="Submit" value="CONFIRM REGISTRATION">
</div>
</form>
</body>
I have two forms in one page and i would like to validate each form separately DEPENDING on what the user fills. So basically the user must fill only ONE form and NOT both of them...SO basically if the user fills up form number 1, the validation will be on form 1 ONLY..
Below please find the code of both forms:
<form action="/registration.flow" method="post" id="formElem1" name="formElem1" autocomplete='off'>
<label for="Name_First">First Name:</label>
<input type="text" name="Name_First" id="Name_First" value="" class="required" maxlength="128" />
<label for="Name_Last">Last Name:</label>
<input type="text" name="Name_Last" id="Name_Last" value="" class="required" maxlength="128" />
<button id="registerButton" type="submit">Register</button>
</form>
<form action="/registration.flow" method="post" id="formElem2" name="formElem2" autocomplete='off'>
<label for="Name_First">First Name:</label>
<input type="text" name="Name_First" id="Name_First" value="" class="required" maxlength="128" />
<label for="Name_Last">Last Name:</label>
<input type="text" name="Name_Last" id="Name_Last" value="" class="required" maxlength="128" />
<button id="registerButton" type="submit">Register</button>
</form>
Can someone help me please?
You don't need jQuery specifically to do this. Simple javascript is fine. Call a separate function for the onSubmit of each form.
onSubmit="return validateForm1(this);"
and -
onSubmit="return validateForm2(this);"
Make sure you return true or false depending on if the form passed or failed the validation.
I recommend you the jquery validator . It's easy to use and you can do the two validations separately.