form validation in js - javascript

I am working on validating forms am not sure if I am making it more complicated than it needs to be. I have a variable that i'm comparing the element to and then on success replacing a img src with a check for success or x for failure. It is supposed to run my validateData function once the field is unfocused. Here is the js. My img src src does not change when I test the first field by putting in numbers to trigger the redx.png src change.
function validateData() {
var letters = /^[A-Za-z]+$/;
var image1=document.getElementsById("image1");
if (document.forms["quiz_form"]["last_name"].value.match(letters) && document.forms["quiz_form"]["last_name"].value!="")
{
image1.src="check.png";
}
else{
image1.src="redx.png";
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="author" content="Kenneth Dunn" />
<meta name="description" content="" />
<script src="quiz.js"></script>
<link rel="stylesheet" href="quiz.css" type="text/css" />
</head>
<body>
<div id="page">
<div id="logo">
<h1>Overwatch</h1>
</div>
<div id="content">
<h2>Overwatch Quiz</h2>
<p>
Hi there!
This quiz is dedicated to one of my favorite games Overwatch!
</p>
<form action="quiz.js" method="post" name="quiz_form">
<p><br>
<input name "first_name" type="text" placeholder="First Name" onblur="this.placeholder='First Name'" onfocus="this.placeholder='Use only letters'" onblur="validateData()"/>
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image1" class="image1"/>
</p>
<p><br>
<input name="last_name" type="text" placeholder="Last Name" onblur="this.placeholder='Last Name'" onfocus="this.placeholder='Use only Letters'" onblur="validateData()" />
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image2" class="image2"/>
</p>
<p><br>
<input name="email" type="text" placeholder="Email" onblur="this.placeholder='Email'" onfocus="this.placeholder='Must contain # '" onblur="validateData()"/>
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image3" class="image3"/>
</p>
<p><br>
<input name="number" type="text" placeholder="Phone Number" onblur="this.placeholder='Phone Number'" onfocus="this.placeholder='Must follow xxx-xxx-xxx '" onblur="validateData()" />
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image4" class="image4"/>
</p>
<p><br>
<input name="sulley" type="text" placeholder="Sulley Email" onblur="this.placeholder='Sulley Email Address'" onfocus="this.placeholder='Must contain ~ and https:// '" onblur="validateData()" />
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image5" class="image5"/>
</p>
<br>
<br>
<p>
<h2>Find out which Overwatch character you are most like!</h2>
<p>If you could pick what form to take in a fictional universe with magic and cool science what would you want to be?</p>
<input type="radio" name="exist" value="1">Male(Human).<br>
<input type="radio" name="exist" value="2">Female(Human).<br>
<input type="radio" name="exist" value="3">An Animal or something crazy.
<p>What is your preferred weapon to take on bad guys and defend yourself?</p>
<input type="radio" name="weapon" value="1">Twin Shotguns for close range.<br>
<input type="radio" name="weapon" value="2">Twin pistols medium range.<br>
<input type="radio" name="weapon" value="3">An electro gun that schocks enemies into submission.
<p>Which motivations most align with your own?<p>
<input type="radio" name="idea" value="1">To become more powerful and to defeat those who would oppose me.<br>
<input type="radio" name="idea" value="2">To explore the world and discover the unknown.<br>
<input type="radio" name="idea" value="3">To protect my friends and those I care about.
<p>What do you look like?</p>
<input type="radio" name="look" value="1">Dark and mysterious black-hooded figure ,very edgy, like people in the Matix.<br>
<input type="radio" name="look" value="2">Short and spunky British airforce pilot who can travel back in time.<br>
<input type="radio" name="look" value="3">I'm a large gorilla who likes to eat bananas and peanut butter and can sheild my friends from harm.
<br>
<br>
<input type="submit" name="submit" id="submit" value="submit" />
<input type="reset" name="reset" id="reset" value="Reset" />
</p>
</form>
<br>
<br>
<br>
<br>
<div id="footer">
<h2 align="center" >Created by </h2>
</p>
</div>
</div>
</div>
</body>
</html>

You can't just simply set the action to your JS script, you will need to use the onsubmit event handler.
<form onsubmit="validateData">
This will trigger the validateData method once the form is submitted. This won't stop the form from performing as usual though, you will need to stop that in your validateData method like so:
function validateData (event) {
// prevent the form from actually submitting
event.preventDefault();
}

There are multiple problems here; some have been mentioned by others. One of the main problems is you had getElementsById instead of getElementById. If you haven't figured out how to pull up the developer console and see what errors you're getting, now would be a good time.
Form validation can get pretty complicated and normally I use a library that does the heavy lifting. You might look into that.
Here is a working version of what I'm guessing you're trying to do. It's far from optimal but it's what I was quickly able to come up with.
https://jsfiddle.net/ec2L08vf/1/

Related

HTML/Javascript && Condition in an If Statement

I am sure there is a very simple fix to this and that I am most likely not doing this the most efficient way possible.
I am trying to create an if statement that will check to see if multiple radio buttons are selected in multiple questions. If they are selected, I would like an alert box to pop up with a certain message. There will be many selection combinations possible so I am assuming many if/else statements(?)
The Javascript in question is located at the bottom.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Spigit Input Form</title>
<meta name="description" content="Spigit Input Form">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<link rel="stylesheet" href="Project_File_CSS.css">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="jquery_spigit.js"></script>
</head>
<body>
<!--<script src="js/scripts.js"></script>
<script src="New_File_JS.js"></script>-->
<script type="text/javascript" src="selection_storage.js"></script>
<!--<script type="text/javascript" src="recommendation_logic.js"></script>-->
<!---------------------------------------------------------Operating Company Question----------------------------------->
<form name="operatingCompany">
<h3>What Operating Company Are You Employeed With?</h3>
<input type="radio" name="opco" value="GPC" >GPC</br>
<input type="radio" name="opco" value="APC" >APC</br>
<input type="radio" name="opco" value="MPC" >MPC</br>
<input type="radio" name="opco" value="Gulf" >Gulf</br>
<input type="radio" name="opco" value="SCS" >SCS</br></br>
<input type="button" value="Display User Selection" onclick=get_opco() />
</form>
<p id="opco_result"> </p></br>
<!---------------------------------------------------------Prototyped Question----------------------------------->
<form name="prototyped">
<h3>Has the innovation been prototyped?</h3>
<input type="radio" name="prototyped" value="Yes" >Yes</br>
<input type="radio" name="prototyped" value="No" >No</br></br>
<input type="button" value="Display User Selection" onclick=get_prototype() />
</form>
<p id="prototyped_result"> </p></br>
<!--------------------------------------------------------Adopted or Tested Question---------------------------->
<form name="adopted_tested">
<h3>Has the innovation been adobpted or tested?</h3>
<input type="radio" name="adopt" value="Yes" >Yes</br>
<input type="radio" name="adopt" value="No" >No</br></br>
<input type="button" value="Display User Selection" onclick=get_adopt_test() />
</form>
<p id="adopted_tested_result"> </p></br>
<!------------------------------------------------------Can it make money Question------------------------------->
<form name="makeMoney">
<h3>Is this a product or service that can make money?</h3>
<input type="radio" name="money" value="Yes" >Yes</br>
<input type="radio" name="money" value="No" >No</br></br>
<input type="button" value="Display User Selection" onclick=get_money() />
</form>
<p id="makeMoney_result"> </p></br>
<!---------------------------------------------------Alabama Power Specific Question----------------------------->
<h3>What is your innovative idea to help Alabama Power improve safety, grow revenue, reduce cost, or increase operational efficiency?</h3>
<textarea id="alabamaPower" rows="8" cols="50">
</textarea> </br></br>
<input type="button" value="Display User Input" onclick=textareacapture() />
<p id="result"> </p></br>
<!------------------------------------------------IT Specific Question------------------------------------------->
<form name="innovativeTechnology">
<h3>Is your innovation an innovative technology or process that boosts the company's productivity or brings additional value from a vendor relationship?</h3>
<input type="radio" name="innovative" value="Yes" >Yes</br>
<input type="radio" name="innovative" value="No" >No</br></br>
<input type="button" value="Display User Selection" onclick=get_innovative() />
</form>
<p id="innovativeTechnology_result"> </p></br>
<input type="button" value="Submit Form" onclick=get_recommendation() />
<script>
function get_recommendation(){
if((document.operatingCompany.opco[0,1,2,3,4].checked) && (document.prototyped.prototyped[0,1].checked) && (document.adopted_tested.adopt[0,1].checked))
{
alert("Everyday Solutions");
}
}
</script>
</body>
</html>
Use this test to identify whether any radiobutton has been checked:
($(":checked").length > 0)
You may refine the selector if you are only interested in a subset of the radio buttons or checkboxes on the page.
Have you checked at run time what the values are in your variables in the if? Also, currently you are checking that all of them are checked. Do you want to check if some of them are checked?
Also, are you sure you want to use an alert. A modal is really preferable. An alert will block the event loop.
Logical and(&&)
if (x>5 && x<10)
{
alert("your enter value between range 6 to 9");
}
Here, is javascript code you enter only 6 to 9 between range
And what about betwwen like ine PHP/C ?
if (5 < x < 10) {
...
}

Filling out an interactive form

I want to fill out an invitation.
Under recipient name I type in the recipient name and then reload the page but nothing happens. The text I put there still remains along with the organization name, event date, url, and host name.
Such as under recipient name I put Gwendalyn Bears and Organization Name I put Tech Industries. Then when I reload the page those names are still there.
Below is my javascript code. It is only two lines but that's all I got at the moment.
function resetForm() {
document.getElementById("recipientName").value = default;
}
My html document so you will know what I am doing. Just so you know I am having to put Javascript into the code. Variables in a form is what it is called.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Invitation Page</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<header>
<div class="top">
<a class="logo" href="index.html">CapellaVolunteers<span class="dotcom">.org</span></a>
</div>
<nav>
<ul class="topnav">
<li>Home
</li>
<li>Invitation
</li>
<li>Gallery
</li>
<li>Registration
</li>
</ul>
</nav>
</header>
<section id="pageForm">
<form action="#">
<label for="recipientName">Recipient name:</label>
<input type="text" name="recipientName" placeholder="Enter your Recipient Name" />
<label for="organizationName">Organization name:
</label>
<input type="text" name="organizationName" placeholder="Enter your Organization Name" />
<label for="eventDate">Event Date:
</label>
<input type="text" name="eventDate" placeholder="Enter your Event Date" />
<label for="websiteURL">URL:
</label>
<input type="text" name="websiteURL" placeholder="Enter your Website URL" />
<label for="hostName">Host name:
</label>
<input type="text" name="hostName" placeholder="Host Name" />
<input type="submit" value="Submit">
</form>
</section>
<article id="placeholderContent">
Hello <span id="recipientName">recipientName</span>!
<br/>
<br/> You have been invited to volunteer for an event held by <span id="organizationName">organizationName</span> on <span id="eventDate">eventDate</span>. Please come to the following website: <span id="websiteURL">websiteURL</span> to sign up as a volunteer.
<br/>
<br/> Thanks!
<br/>
<br/>
<span id="hostName">hostName</span>
</article>
<footer>This events site is for IT3215 tasks.
</footer>
<script src="invite.js"></script>

Form Display through JQuery not working

I am trying to display different fields of the form according to selection. It is working properly till few stages. At 6th page, the page refreshes automatically without any input from my side. My code is below. Please help me gettiig out of this error. The actual working page can be found here.
function next(idshow,hide){
$("#page"+hide).hide();
$("#page"+idshow).show();
return false;
}
<html>
<head>
<title>My Survey </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="col-md-12" id="page1">
<h1>WELCOME TO ONLINE
SURVEY </h1>
<button id="1" onclick="next(2,1)">NEXT</button>
</div>
<div class="col-md-12" id="page2" style="display:none">
<center><h1>IMPORTANT</h1> </center>
<p> If you Accept the terms and conditions and provide a relevant information, then you may get UPTO 1 year free trial of apps developed by company in future. </p>
<button id="2" onclick="next(3,2)">NEXT</button>
</div>
<div class="col-md-12" id="page3" style="display:none">
<h2><center> This app is only for survey and not responsible for any claims made by company.</center></h2>
<h3> <center>TERMS AND CONDITIONS </center></h3>
<p>1. IF YOU ACCEPT THE TERMS AND CONDITIONS, YOU GET UPTO 1 YEAR FREE TRIAL OF APPS MADE BY COMPANY (for purpose the survey is done). </p>
<p>2. AFTER ACCEPTING THE TERMS AND CONDITIONS FOLLOWING POINTS ARE BOUND TO THE CLIENT: <br>
a) You must provide all information which is asked by the company. <br>
b) In future, if required you provide more information if asked. <br>
c) If after accepting the terms and condition, not providing or non-cooperating in collecting relevant information, the company have all authority to cancel the contract . <br>
d) In future company has all powers to change the terms and conditions without prior notice. <br>
e) If any new clause to be added also accepted by the client. <br> </p>
<button id="3" onclick="next(4,3)">ACCEPT</button>
</div>
<div class="col-md-12" id="page4" style="display:none">
<p align="center"><strong>ARE YOU PROFESSIONAL?</strong></p>
<p><form name="myform" method="POST"> <input type="radio" name="r1" onclick="next(5,4)" value="YES">YES </p>
<p> <input type="radio" name="r1" onclick="next(17,4)" value="NO">NO </p>
</div>
<div class="col-md-12" id="page5" style="display:none">
<h2> Personal Information</h2>
<p>Profile Picture <input type="file" id="pic" class="myinput" name="sbm" align="left" accept="image/*" value="Browse"> </p>
<p>
FIRST NAME :
</p>
<p>
<input type="text" class="nm" name="name" id="name">
</p>
<p>
MIDDLE NAME:
</p>
<p> <input type="text" class="nm" name="mname" id="nm">
</p>
<p>
LAST NAME :
</p>
<p>
<input type="text" name="lname" class="nm" id="nm">
</p>
<p>
QUALIFICATION
</p>
<p>
<input type="text" name="qual" id="qual">
</p>
<p>
</p>
<p id="hd1"> example(MBBS,BHMS,DHMS ETC)
</p>
<p id="hd2">
DESGINATION:
</p>
<p> <input type="text" name="desg" id="desg">
</p>
<p>
</p>
<p>example(genral practioner, surgeon, skin specialist etc)
</p>
<p>
EXPIRENCE:
</p>
<p>
<input type="text" name="expi" id="expi">
</p>
<p>
<button id="5" onclick="next(6,5)">NEXT</button>
</p>
</div>
<div class="col-md-12" id="page6" style="display:none">
<h1> This is Page 6 </h1>
<button id="6" onclick="next(7,6)">NEXT</button>
</div>
<div class="col-md-12" id="page17" style="display:none">
<h1> This is Page 17</h1>
<button id="17" onclick="next(18,17)">NEXT</button>
</div>
<div class="col-md-12" id="page18" style="display:none">
<h1> This is page 18 </h1>
</div>
</form>
</body>
</html>
Please help me understand what problem is there actually??
You should specify type="button" in your button attributes tag like this
<button type="button" id="5" onclick="next(6,5)">NEXT</button>
If you are using button without specifying the type it will work as submit button for containg form.
your previous button 1,2,3,4 works because they are not inside form tag
You need to prevent form's submitting action by adding onsubmit="return XXX();" in your form element.
The button submits the form, as its default function. It doesn't reach the return false in your function and I am suspecting because of the little content on this pages.
Since you are including JQuery, you can do:
$(document).ready(function(){
$('button').click(function(e){
e.preventDefault();
$(this).closest('div.col-md-12').hide();
$('#page' + $(this).data('show')).show();
});
});
This will give all buttons an onclick event and you will not have to repeat the onclick and function on each one.
The above will hide the button's parent div with class col-md-12 and show the div with id page + the value from the button (see below)
Then the button should become:
<button data-show="2">NEXT</button>
On data show attribute you enter the id of the next div you want to show.
Id's assigned to buttons are only numbers id should start with
character and can contain alphabets,numbers and '_'.
Your form tag should start after body open.
Validate duplicate Id's in your page.
Replace add button type as "button". e.g. <button type="button" id="b1">
Fix these problems your html page will work properly.
Added working code below
<html>
<head>
<title>My Survey</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<script>
function next(idshow, hide) {
$("#page" + hide).hide();
$("#page" + idshow).show();
//return false;
}
</script>
</head>
<body>
<div class="col-md-12" id="page1">
<h1>WELCOME TO ONLINE SURVEY</h1>
<button type="button" id="b1" onclick="next(2,1)">NEXT</button>
</div>
<div class="col-md-12" id="page2" style="display: none">
<center>
<h1>IMPORTANT</h1>
</center>
<p>If you Accept the terms and conditions and provide a relevant
information, then you may get UPTO 1 year free trial of apps
developed by company in future.</p>
<button type="button" id="b2" onclick="next(3,2)">NEXT</button>
</div>
<div class="col-md-12" id="page3" style="display: none">
<h2>
<center>This app is only for survey and not responsible for
any claims made by company.</center>
</h2>
<h3>
<center>TERMS AND CONDITIONS</center>
</h3>
<p>1. IF YOU ACCEPT THE TERMS AND CONDITIONS, YOU GET UPTO 1 YEAR
FREE TRIAL OF APPS MADE BY COMPANY (for purpose the survey is done).
</p>
<p>
2. AFTER ACCEPTING THE TERMS AND CONDITIONS FOLLOWING POINTS ARE
BOUND TO THE CLIENT: <br> a) You must provide all information
which is asked by the company. <br> b) In future, if required
you provide more information if asked. <br> c) If after
accepting the terms and condition, not providing or non-cooperating
in collecting relevant information, the company have all authority to
cancel the contract . <br> d) In future company has all powers
to change the terms and conditions without prior notice. <br> e)
If any new clause to be added also accepted by the client. <br>
</p>
<button type="button" id="b3" onclick="next(4,3)">ACCEPT</button>
</div>
<div class="col-md-12" id="page4" style="display: none">
<p align="center">
<strong>ARE YOU PROFESSIONAL?</strong>
</p>
<p>
<input type="radio" name="r1" onclick="next(5,4)" value="YES">YES
</p>
<p>
<input type="radio" name="r1" onclick="next(17,4)" value="NO">NO
</p>
</div>
<form name="myform" method="POST" action="">
<div class="col-md-12" id="page5" style="display: none">
<h2>Personal Information</h2>
<p>
Profile Picture <input type="file" id="pic" class="myinput"
name="sbm" align="left" accept="image/*" value="Browse">
</p>
<p>FIRST NAME :</p>
<p>
<input type="text" class="nm" name="name" id="name">
</p>
<p>MIDDLE NAME:</p>
<p>
<input type="text" class="nm" name="mname" id="mnm">
</p>
<p>LAST NAME :</p>
<p>
<input type="text" name="lname" class="nm" id="lnm">
</p>
<p>QUALIFICATION</p>
<p>
<input type="text" name="qual" id="qual">
</p>
<p></p>
<p id="hd1">example(MBBS,BHMS,DHMS ETC)</p>
<p id="hd2">DESGINATION:</p>
<p>
<input type="text" name="desg" id="desg">
</p>
<p></p>
<p>example(genral practioner, surgeon, skin specialist etc)</p>
<p>EXPIRENCE:</p>
<p>
<input type="text" name="expi" id="expi">
</p>
<p>
<button type="button" id="b5" onclick="next(6,5)">NEXT</button>
</p>
</div>
</form>
<div class="col-md-12" id="page6" style="display: none">
<h1>This is Page 6</h1>
<button type="button" id="b6" onclick="next(7,6)">NEXT</button>
</div>
<div class="col-md-12" id="page17" style="display: none">
<h1>This is Page 17</h1>
<button type="button" id="b17" onclick="next(18,17)">NEXT</button>
</div>
<div class="col-md-12" id="page18" style="display: none">
<h1>This is page 18</h1>
</div>
</body>
</html>

insertBefore stops working in form If I add div

I created dynamic form in which I can add as many authors as I want to.
<form action="uploadtodb.php" target="dummyframe" method="post" name="myform">
<p>
Authors last name: <input type="text" name="authorln[]" size="32" />
Authors first names: <input type="text" name="authorfns[]" size="32" />
</p>
<p id="add_author_button">
<button type="button" onclick="add_author()">Add new author</button>
<button type="button" onclick="remove_author()">Remove last author</button>
</p>
</form>
where function add_author() adds to myform new paragraph denoted below as para
document.myform.insertBefore(para, document.getElementById("add_author_button"));
It works perfectly, but then I wanted to add some styles to it. So I added div:
<form action="uploadtodb.php" target="dummyframe" method="post" name="myform">
<div id="authors">
<p>
Authors last name: <input type="text" name="authorln[]" size="32" />
Authors first names: <input type="text" name="authorfns[]" size="32" />
</p>
<p id="add_author_button">
<button type="button" onclick="add_author()">Add new author</button>
<button type="button" onclick="remove_author()">Remove last author</button>
</p>
</div>
</form>
After such modification buttons do not respond.
Although you can use document.<form name> for forms, you can't do that for arbitrary elements like your authors div. Why not just use getElementById()?
document.getElementById("authors").insertBefore(para, document.getElementById("add_author_button"));

CSS - Floating Elements WIthin Range

I am trying to make it so that the floating content ontop of my slider will get smaller with the page as you change the size of your browser. For example if you take your browser and change the size of it so that its only taking up half your monitors space it will shrink everything to scale.
So far the whole page is doing that, its just my slider that isn't doing it correctly.
Link: http://skipq.net/app/indextest.php
Code:
<div class="flexslider">
<ul class="slides">
<li><img src="http://skipq.net/app/images/banner1.png" />
<div class="context">
<div class="context-inn"><h2>This app is money.</h2>
<span class="description">Use our new app to pay at your favorite stores.<br />
When it comes time to check out,<br />
choose how you want to pay in a few taps.</span>
<div class="banner-form" id="banner-form1">Paying is easier with our new app<br />
<form id="form1" name="form1" method="post" action="">
<input type="text" name="keywords" id="keywords" onblur="if(this.value=='') this.value='Mobile number (ex. 555-555-5555)';" onfocus="if(this.value=='Mobile number (ex. 555-555-5555)') this.value='';" value="Mobile number (ex. 555-555-5555)" alt="Mobile number (ex. 555-555-5555)"><br />
<div style="display:none;" id="carrierSelection">
<select name="carrier" style="font">
<option value="Verizon">Verizon</option>
<option value="AT_and_T">AT&T</option>
<option value="Sprint">Sprint</option>
<option value="T_Mobile">T-Mobile</option>
</select>
</div>
<input type="button" name="button" id="chbutton" value="Choose Your Carrier" />
</form>
<span class="note">By continuing, you confirm this is your number and agree to receive a text. Standard messaging rates apply.</span>
<ul class="mobileicons">
<li class="android">Android</li>
<li class="iphone">iPhone</li>
</ul>
</div></div></div>
</li>
<li> <img src="http://skipq.net/app/images/banner2.png" />
<div class="context"><div class="context-inn"><h2>More time is more money.</h2>
<span class="description">When you sell online with PayPal and offer financing <br />
with Bill Me Laterョ, your buyers can get even more. <br />
You get paid up front, they get up to 6 months to pay.<br />
<span class="font11">Subject to credit approval. See Terms</span> </span>
<div class="banner-form">Sell more online with us<br />
<form id="form1" name="form1" method="post" action="">
<input type="submit" name="button" id="button" value="Start Offering Financing" />
</form>
</div></div></div>
</li>
<li> <img src="http://skipq.net/app/images/banner3.png" />
<div class="context"><div class="context-inn"><h2>Tap into savings <br />
at hundreds of stores.</h2>
<span class="description">Enjoy savings up to 40% off at hundreds of your <br />
favorite stores every day on PayPal Shopping.</span>
<div class="banner-form">Save at more stores with us<br />
<form id="form1" name="form1" method="post" action="">
<input type="submit" name="button" id="button" value="Shop the Deals" />
</form>
</div></div></div>
</li>
<li> <img src="http://skipq.net/app/images/banner4.png" />
<div class="context"><div class="context-inn"><h2>Take six months off.</h2>
<span class="description">We bought you some extra time to pay<br />
on anything over $99. Bill Me Laterョ<br />
is subject to credit approval. See Terms</span>
<div class="banner-form">A little time goes a long way<br />
<form id="form1" name="form1" method="post" action="">
<input type="submit" name="button" id="button" value="Start Offering Financing" />
</form>
</div></div></div>
</li>
</ul>
</div>
</div>
Let me know what code you need to detect where the issue is!

Categories