JQuery Form Handling
HTML
<body>
<div class="content-mobile">
<div>
<div id="root">
<div class="block">
<div class="block-head">
<h2 style="padding-left:40px;">Begin Here</h2>
</div>
<div class='block-content' id="beginBar" style="background-color:#f5f5f5;background-image:none;">
<div id="contactform0" class="form">
<div>
<form id="form0" method="post" action="">
<input name="id" type="hidden" value="156908" />
<input name="lang" type="hidden" value="en-US" />
<input name="number" type="hidden" value="0" />
<div class="form-fields">
<label class="field-selectbox-label"> <span class="form-field-name">Choose Service Location
<span title="Choose Service Location is required." id="choose"></span>
</span>
<select title="Choose Service Location" class="field-select" name="Choose Service Location" value="">
<option></option>
<option value="Alabama">Alabama</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Louisiana">Louisiana</option>
</select>
</label>
</div>
<div style="display: none;">
<input type="text" name="PrevSp" id="PrevSp" />
...
CSS
body {
background-color:#ffffff;
background-image:none;
}
body, a.base-link {
color:#313131;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
a {
color:#313131;
}
.form label, .form table th, .form table td, .geo-locations p {
color:#313131;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
.block-head {
margin:20px;
-moz-border-radius:10px 10px 10px 10px;
-o-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
background-color:#0e6db0;
background-image:none;
}
.block h2 {
cursor:pointer;
color:#ffffff;
text-align:center;
}
.block-content {
display:none;
}
#choose {
color: red;
}
JavaScript
$(".block-head").on("click", function(){
$(".block-content").slideToggle();
});
var state = $(".field-select").val();
var x = document.getElementById("form0");
$(".field-select").change(function(){
var state = $("select.field-select").val();
$("#go").on("click", function(){
event.preventDefault();
if (state === "") {
$("#choose").text(" *Please choose a state -->");
} else if(state === "Alabama"){
window.open("clearvisionoutsourcing.com/newsletter", "_blank");
x.reset();
state = "";
$("#choose").text("");
} else if (state === "Florida"){
window.open("clearvisionoutsourcing.com/consultant", "_blank");
x.reset();
state = "";
$("#choose").text("");
} else if (state === "Georgia"){
window.open("YOUR URL HERE", "_blank");
x.reset();
state = "";
$("#choose").text("");
} else if (state === "Louisiana"){
window.open("YOUR URL HERE", "_blank");
x.reset();
state = "";
$("#choose").text("");
}
console.log(state);
});
});
$("#go").on("click", function(){
if(state === "") {$("#choose").text(" *Please choose a state -->");}
});