We Keep Coding

JavaScript to automate a submiting a form

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();

Error with form validation

I'm having errors in validation of my form.
Here's the javascript:
function ValidateForm(){
email=document.getElementbyId("email").value;
confirmemail=document.getElementById("confirmemail").value;
password=document.getElementById("password").value;
confirmpassword=document.getElementById("confirmpassword").value;
errors = " ";
if (email == " ") {
erros += "Please enter your email \n";
}
emailcheck = /^.+#.+\..{2,4}$/;
if (email.match(emailcheck)) { }
else {
errors += "Please check your email \n";
}
if (email.match(confirmemail)) {}
else {
errors += "Email don't match \n";
}
if ( errors != "") {
alert(errors);
}
else { }
}
And here's the form part of HTML:
<form action="/LoginData/" method="post">
<label>Email</label>
<input id="email" type="email" autocomplete="on" placeholder="Your email id" name="email" required>
<label>Confirm Email</label>
<input id="confirmemail" type="email" autocomplete="off" placeholder="Confirm your Email id" name="confirmemail" required>
<br/>
<br/>
<label>Password</label>
<input id="password" type="password" name="password" placeholder="Password" required>
<label>Confirm Password</label>
<input id="confirmpassword" type="password" name="confirmpassword" placeholder="Confirm your Password" required>
<br/>
<br/>
<input type="submit" name="submit" value="Create Account">
</form>
It doesn't show the alert message even if i fill the fields with wrong input.
(Note: i'm using external JavaScript file)
I'm using the javascript for IE8 because i want to make the webpage run properly on it.
And it doesn't show the alert for any of the fields in IE.
A example of what i'm trying to build: 1http://aharrisbooks.net/jad/chap_07/validate.html

You need to call ValidateForm() in you code.
In this scenario calling it on submit will be the best option something like onsubmit="return validateForm()";
Also it has camel case problem. Should be getElementById instead of getElementbyId. Check your syntax Errors in browser console.

You must put
onsubmit="return validateForm()"
So
<form action="/LoginData/" method="post" onsubmit="return validateForm()">
<label>Email</label>
<input id="email" type="email" autocomplete="on" placeholder="Your email id" name="email" required>
<label>Confirm Email</label>
<input id="confirmemail" type="email" autocomplete="off" placeholder="Confirm your Email id" name="confirmemail" required>
<br/>
<br/>
<label>Password</label>
<input id="password" type="password" name="password" placeholder="Password" required>
<label>Confirm Password</label>
<input id="confirmpassword" type="password" name="confirmpassword" placeholder="Confirm your Password" required>
<br/>
<br/>
<input type="submit" name="submit" value="Create Account">
</form>
in the form tag in order to use your custom validation before submitting data.
You currently use HTML5 validation tag's so even if your cusom JS function is not called, you should see HTML5 validation with new browsers. You can see browsers that are more compliant than others with HTML5 : http://caniuse.com/#search=html5.

Textbox focus jumps to next textbox automatically on mobile safari(ios 5)

i have form with following input field. when i click on first text box , the focus gets transfer to next textbox.i am using this code in phonegap and running it on iphone(ios 5).please help me out..
<form id="createAccount" name="regForm">
<input type="text" name="first_name" id="fname" placeholder="First Name" style="height:40px;" >
<input type="text" name="last_name" id="lname" placeholder="Last Name" style="height:40px;">
<input type="email" name="email" id="email" placeholder="Email" style="height:40px;">
<input type="password" name="password" id="RegPassword" placeholder="Password" style="height:40px;">
</form>

First try to remove your wrong inside form, then add tabindex on each input.
Moreover, do you use any lib? (jquery...?)

Disable button on submit and enable native form validation

Browsers have a nice tooltip that appears when a field with the required attribute has not been filled in.
<!DOCTYPE html>
<form action="" method="post" accept-charset="utf-8">
<input type="text" name="name" placeholder="Your full name" required>
<input type="submit" onclick="this.disabled=true;this.value="Submitted...";this.form.submit()">
</form>
The problem is I have this submit button disabled when the user submits the form so it wouldn't be submitted multiple times, and after submitting (even if the required field is empty) the form still submits. Is there a fix so that the browser will check on the required fields before submitting?

You need to make sure that the required fields are actually filled in before you disable the submit button.
<!DOCTYPE html>
<form action="" method="post" accept-charset="utf-8">
<input type="text" name="name" placeholder="Your full name" required>
<input type="submit" onclick="if (document.getElementsByName('name')[0].value != null) {
this.disabled=true;
this.value='Submitted...';
this.form.submit();
}">
</form>
Or you could use document.querySelectorAll() for multiple required ones:
<!DOCTYPE html>
<form action="" method="post" accept-charset="utf-8">
<input type="text" name="name" placeholder="Full name" required>
<input type="text" name="name" placeholder="Email address" required>
<input type="text" name="name" placeholder="Phone number">
<input type="submit" onclick="for (x in document.querySelectorAll('input[type=text][required]')) {
if (document.querySelectorAll('input[type=text][required]').value != null) {
this.disabled=true;
this.value='Submitted...';
this.form.submit();
}
}">
</form>

separate validation of two forms with jquery

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.