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>
Related
I have a chatbubble that when clicked, I want it to disappear and a chat window should come up.
The chat window is the wrapper div. I set it display = 'none' in the html code below. Then in the onclick of chatBubble I show the wrapper div using jQuery
So initially I shouldn't see the chat window. But I see it. Also when I click on the chatbubble, I get error Uncaught TypeError: "#wrapper".show is not a function. What am I missing?
<div id = "chatBubble" class="talk-bubble tri-right btm-right round">
<div class="talktext">
<p>Hi, can I help?</p>
</div>
</div>
<div id="wrapper" display = 'none'>
<div id="menu">
<p class="welcome">Welcome<b></b></p>
<p class="logout"><a id="exit" href="#">Exit</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox"></div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>
Relevant portion of javascript
$(document).ready(function() {
$("#chatBubble").click(function(){
//console.log("clicked")
('#wrapper').show();
})
});
Please suggest.
You are setting the style property in the wrong way. You have to set it through style attribute. show() is a jQuery function and you are missing that just before ('#wrapper').show(); which leads to the error.
Try the following:
$(document).ready(function() {
$("#chatBubble").click(function(){
//console.log("clicked")
$('#wrapper').show();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "chatBubble" class="talk-bubble tri-right btm-right round">
<div class="talktext">
<p>Hi, can I help?</p>
</div>
</div>
<div id="wrapper" style='display:none'>
<div id="menu">
<p class="welcome">Welcome<b></b></p>
<p class="logout"><a id="exit" href="#">Exit</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox"></div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>
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/
I have two separate donation forms that need to redirect to their own custom 'Thank You' pages once submitted. Squarespace does not give you the option to do this and instead defaults to a preset, generated page. I believe what I am looking for--and I could be wrong--is some custom Javascript that can handle the request.
Below is the HTML for the first form:
https://secure.squarespace.com/commerce/donate?donatePageId=56a99e1557eb8df616ef2dad
<div class="left-column-wrapper">
<div id="form-wrapper”>
<div id="yui_3_17_2_1_1480624209818_107" class="yui3-widget sqs-widget sqs-checkout-form”>
<div id="yui_3_17_2_1_1480624209818_109" class="sqs-checkout-form-content”>
<form action="/commerce/submit-donation?crumb=BF2bsTsJ-mjNZmFjMjkxZDUyMDVlNmMxYjZmYjM4NjFiNWQ4MjU0" method="POST”>
<input type="hidden" name="customFormSubmission”>
<div id="yui_3_17_2_1_1480624209818_163" class="yui3-widget sqs-widget sqs-checkout-form-section card sqs-checkout-form-address sqs-checkout-form-payment editing sqs-checkout-form-payment-focused”>
<div id="yui_3_17_2_1_1480624209818_165" class="sqs-checkout-form-payment-content”>
<div class="title">
<fieldset id="yui_3_17_2_1_1480624209818_836">
<div class="subtitle">Billing Address</div>
<!-- bill to shipping -->
<!-- Billing Information —>
<div id="billing-address">
<div id=“credit-card”>…</div>
<div class="subtitle">Secure Payment</div>
<!--
Credit Card Fields
NOTA BENE: These INPUTs are left without 'name' because we ABSOLUTELY must NOT
transmit these values to our own servers.
-->
<div id="credit-card”>…</div>
<!-- Secure payment conditions -->
<div id="comfort”>…</div>
<!-- Place Order -->
<div id="place-order">
<div id="place-order-button" class="button continue-button" value="Place Order">SECURE DONATION</div>
<div class="wait-in-queue-message" style="display: none”>…</div>
<!-- hidden field to convey the Stripe Token so we may submit the charge -->
<input name="stripeToken" type="hidden">
<!-- optional hidden fields -->
<input name="donationAmountCents" type="hidden">
<input name="donatePageId" type="hidden">
<input name="email" type="hidden">
<input name="phone" type="hidden">
<input name="joinMailingList" type="hidden">
</div>
</fieldset>
</div>
</div>
</form>
</div>
</div>
</div>
Below is the beginning of the HTML for the second form (just to show a comparison for the differences):
https://secure.squarespace.com/commerce/donate?donatePageId=583c8b80d2b8571174b04cc8
<div class="left-column-wrapper">
<div id="form-wrapper”>
<div id="yui_3_17_2_1_1480625072856_106" class="yui3-widget sqs-widget sqs-checkout-form”>
<div id="yui_3_17_2_1_1480625072856_108" class="sqs-checkout-form-content”>
<form action="/commerce/submit-donation?crumb=BF2bsTsJ-mjNZmFjMjkxZDUyMDVlNmMxYjZmYjM4NjFiNWQ4MjU0" method="POST”>
<input type="hidden" name="customFormSubmission”>
<div id="yui_3_17_2_1_1480625072856_162" class="yui3-widget sqs-widget sqs-checkout-form-section card sqs-checkout-form-address sqs-checkout-form-payment editing sqs-checkout-form-payment-focused”>
<div id="yui_3_17_2_1_1480625072856_164" class="sqs-checkout-form-payment-content”>
<div class="title">
Any help would be greatly appreciated.
Thanks so much!
I have a form with drop down, text boxes and one submit button. I can submit form with ENTER key like just add ng-keypress="addBookmarkOnEnter($event) with any text boxes and it'll work.
But can I do same task without adding ng-keypress with any text box?
Here is my form:
<form>
<div><input type="text" class="greyPhold" placeholder="http://" data-ng-model="bookmark.url" /></div>
<div class="forSelect">
<div class="selHead" data-ng-class="{hOpen: popup.dropdownStatus}">
<button data-ng-click="toggleDropdown()"><span data-ng-bind="popup.selectedCategory"></span></button>
<ul id="testDiv2" class="dropdownH">
<li data-ng-repeat="category in categories track by $index" data-ng-click="selectCategory($index)">
<div class="colony pull-left"><span>{{category.category_name}}</span></div>
<div class="pull-right"><input type="radio" name="tag" /><label></label></div>
</li>
</ul>
</div>
</div>
<div class="createColony">
<input type="text" class="whitePholder" placeholder="Create a new colony" data-ng-model="bookmark.categoryName"/>
</div>
<div class="complete text-center"><button type="submit" class="done" data-ng-click="addBookmark()">Complete</button></div>
</form>
hope this code would be help you
<html>
<head>
<script src="angular.min.js"></script>
<script src="ui-bootstrap.js"></script>
</head>
<body bgcolor="gray">
<div id="container" ng-app='two_way' ng-controller="two_way_control" style="background-color:CCFF66">
<p style="padding:10px;">
<h1 align="center"> Search Product </h1>
</p>
<p align="center">
<form method="post">
<input type="text" ng-model="searchText" placeholder="Enter a name here" required>
<button ng-click="check(searchText)">Search</button>
</form>
</p>
Search Item Name: {{searchText}}
</div>
</body>
</html>
and use given code inside controller
$scope.check=function(searchText){};
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!