Add Text to option from the label with pure JS - javascript

I have a script that applies the label text as a placeholder attribute on the input, however I have one select dropdown field where i need the first option, which is currently just blank, to contain the label name. In this case region
I have thought about using another label.querySelectorAll("option");
But i don't know how to just get the top one.
Current JS:
var labels = document.querySelectorAll("label");
var i = labels.length;
while (i--) {
var label = labels.item(i);
var text = label.textContent;
label.parentNode.classList.contains("required") && (text += " *");
label.nextElementSibling.setAttribute("placeholder", text);
label.parentNode.removeChild(label);
}
var elements = document.querySelectorAll('.errors, .no-label');
Array.prototype.forEach.call(elements, function(el, i){
el.parentNode.removeChild(el);
});
The HTML
<form accept-charset="UTF-8" method="post" action="nottelling" class="form" id="pardot-form">
<p class="form-field first_name pd-text required ">
<input type="text" name="25492_61230pi_25492_61230" id="25492_61230pi_25492_61230" value="" class="text" size="30" maxlength="32" onchange="" placeholder="First Name *">
</p>
<div id="error_for_25492_61230pi_25492_61230" style="display:none"></div>
<p class="form-field last_name pd-text required ">
<input type="text" name="25492_61232pi_25492_61232" id="25492_61232pi_25492_61232" value="" class="text" size="30" maxlength="32" onchange="" placeholder="Last Name *">
</p>
<div id="error_for_25492_61232pi_25492_61232" style="display:none"></div>
<p class="form-field company pd-text required ">
<input type="text" name="25492_61234pi_25492_61234" id="25492_61234pi_25492_61234" value="" class="text" size="30" maxlength="100" onchange="" placeholder="Company *">
</p>
<div id="error_for_25492_61234pi_25492_61234" style="display:none"></div>
<p class="form-field Mobile pd-text ">
<input type="text" name="25492_61236pi_25492_61236" id="25492_61236pi_25492_61236" value="" class="text" size="30" maxlength="65535" onchange="" placeholder="Phone">
</p>
<div id="error_for_25492_61236pi_25492_61236" style="display:none"></div>
<p class="form-field email pd-text required ">
<input type="text" name="25492_61238pi_25492_61238" id="25492_61238pi_25492_61238" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 25492, 61238, 12536766);" placeholder="Email *">
</p>
<div id="error_for_25492_61238pi_25492_61238" style="display:none"></div>
<p class="form-field Territory_copy pd-select required ">
<select name="25492_61240pi_25492_61240" id="25492_61240pi_25492_61240" class="select" onchange="" placeholder="Region *">
<option value="" selected="selected"></option>
<option value="465100">North America</option>
<option value="465102">Latin America</option>
<option value="465104">Europe</option>
<option value="465106">Australasia</option>
<option value="465108">ASPAC - South East Asia</option>
<option value="465110">ASPAC - China</option>
<option value="465112">Africa - West Africa</option>
<option value="465114">Africa - North Africa & Middle East</option>
<option value="465116">Africa - Non Regional</option>
<option value="465118">Africa - Southern Africa</option>
</select>
</p>
<div id="error_for_25492_61240pi_25492_61240" style="display:none"></div>
<p class="form-field comments pd-textarea required ">
<textarea name="25492_61242pi_25492_61242" id="25492_61242pi_25492_61242" onchange="" cols="40" rows="10" class="standard" placeholder="Message *"></textarea>
</p>
<div id="error_for_25492_61242pi_25492_61242" style="display:none"></div>
<p style="position:absolute; width:190px; left:-9999px; top: -9999px;visibility:hidden;">
<input type="text" name="pi_extra_field" id="pi_extra_field" placeholder="Comments">
</p>
<input name="_utf8" type="hidden" value="☃">
<p class="submit">
<input type="submit" accesskey="s" value="Send Message">
</p>
<input type="hidden" name="hiddenDependentFields" id="hiddenDependentFields" value="">
</form>


var labels = document.querySelectorAll("label");
var i = labels.length;
while (i--) {
var label = labels.item(i);
var text = label.textContent;
label.parentNode.classList.contains("required") && (text += " *");
var nextElement = label.nextElementSibling;
// This is what I changed:
if (nextElement.tagName == 'SELECT') {
nextElement.options[0].text = text;
} else {
nextElement.setAttribute("placeholder", text);
}
label.parentNode.removeChild(label);
}
var elements = document.querySelectorAll('.errors, .no-label');
Array.prototype.forEach.call(elements, function(el, i) {
el.parentNode.removeChild(el);
});
<form accept-charset="UTF-8" method="post" action="nottelling" class="form" id="pardot-form">
<p class="form-field first_name pd-text required ">
<label>some name</label>
<input type="text" name="25492_61230pi_25492_61230" id="25492_61230pi_25492_61230" value="" class="text" size="30" maxlength="32" onchange="" placeholder="First Name *">
</p>
<div id="error_for_25492_61230pi_25492_61230" style="display:none"></div>
<p class="form-field last_name pd-text required ">
<input type="text" name="25492_61232pi_25492_61232" id="25492_61232pi_25492_61232" value="" class="text" size="30" maxlength="32" onchange="" placeholder="Last Name *">
</p>
<div id="error_for_25492_61232pi_25492_61232" style="display:none"></div>
<p class="form-field company pd-text required ">
<input type="text" name="25492_61234pi_25492_61234" id="25492_61234pi_25492_61234" value="" class="text" size="30" maxlength="100" onchange="" placeholder="Company *">
</p>
<div id="error_for_25492_61234pi_25492_61234" style="display:none"></div>
<p class="form-field Mobile pd-text ">
<input type="text" name="25492_61236pi_25492_61236" id="25492_61236pi_25492_61236" value="" class="text" size="30" maxlength="65535" onchange="" placeholder="Phone">
</p>
<div id="error_for_25492_61236pi_25492_61236" style="display:none"></div>
<p class="form-field email pd-text required ">
<input type="text" name="25492_61238pi_25492_61238" id="25492_61238pi_25492_61238" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 25492, 61238, 12536766);" placeholder="Email *">
</p>
<div id="error_for_25492_61238pi_25492_61238" style="display:none"></div>
<p class="form-field Territory_copy pd-select required ">
<label>Some label</label>
<select name="25492_61240pi_25492_61240" id="25492_61240pi_25492_61240" class="select" onchange="" placeholder="Region *">
<option value="" selected="selected"></option>
<option value="465100">North America</option>
<option value="465102">Latin America</option>
<option value="465104">Europe</option>
<option value="465106">Australasia</option>
<option value="465108">ASPAC - South East Asia</option>
<option value="465110">ASPAC - China</option>
<option value="465112">Africa - West Africa</option>
<option value="465114">Africa - North Africa & Middle East</option>
<option value="465116">Africa - Non Regional</option>
<option value="465118">Africa - Southern Africa</option>
</select>
</p>
<div id="error_for_25492_61240pi_25492_61240" style="display:none"></div>
<p class="form-field comments pd-textarea required ">
<textarea name="25492_61242pi_25492_61242" id="25492_61242pi_25492_61242" onchange="" cols="40" rows="10" class="standard" placeholder="Message *"></textarea>
</p>
<div id="error_for_25492_61242pi_25492_61242" style="display:none"></div>
<p style="position:absolute; width:190px; left:-9999px; top: -9999px;visibility:hidden;">
<input type="text" name="pi_extra_field" id="pi_extra_field" placeholder="Comments">
</p>
<input name="_utf8" type="hidden" value="☃">
<p class="submit">
<input type="submit" accesskey="s" value="Send Message">
</p>
<input type="hidden" name="hiddenDependentFields" id="hiddenDependentFields" value="">
</form>

Related

Getting Pardot Placeholders from Label

ok. I am trying to pull the text from the labels and inject placeholders into a pardot form. Also, have used the label to create an option for the select to display kinda like a placeholder. All goes swimmingly until I introduce checkboxes and radio buttons.
Any thoughts on a solution?
apologies for ugly html: this is what pardot spits out into an iframe
Thanks in advance
<form accept-charset="UTF-8" method="post" action="http://resources.tdinternational.com/l/545402/2018-06-20/3k6cs" class="form" id="pardot-form">
<p class="form-field name first_name pd-text required ">
<label class="field-label" for="545402_38895pi_545402_38895">Full Name</label>
<input type="text" name="545402_38895pi_545402_38895" id="545402_38895pi_545402_38895" value="" class="text" size="30" maxlength="40" onchange="">
</p>
<div id="error_for_545402_38895pi_545402_38895" style="display:none"></div>
<p class="form-field industry industry pd-select required ">
<label class="field-label" for="545402_38899pi_545402_38899">Industry</label>
<select name="545402_38899pi_545402_38899" id="545402_38899pi_545402_38899" class="select" onchange=""><option value="" selected="selected"></option>
<option value="307917">technology</option>
<option value="307919">compliance</option>
<option value="307921">training</option>
<option value="307923">observation</option>
</select>
</p>
<p class="form-field opted_out pd-checkbox required ">
<label class="field-label" for="545402_40627pi_545402_40627">Lorem Ipsum dolor</label>
<span class="value">
<span>
<input type="checkbox" name="545402_40627pi_545402_40627_345413" id="545402_40627pi_545402_40627_345413" value="345413" onchange="">
<label class="inline" for="545402_40627pi_545402_40627_345413">Lorem Ipsum</label>
</span>
</span>
</p>
<div id="error_for_545402_40627pi_545402_40627" style="display:none"></div>
<p class="form-field dropdown employees pd-radio required ">
<label class="field-label" for="545402_38901pi_545402_38901">Employees</label>
<span class="value">
<span class="" style="">
<input type="radio" name="545402_38901pi_545402_38901[]" id="545402_38901pi_545402_38901_307911_307911" value="307911" onchange="">
<label class="inline" for="545402_38901pi_545402_38901_307911_307911">5-10</label>
</span>
<span class="" style="">
<input type="radio" name="545402_38901pi_545402_38901[]" id="545402_38901pi_545402_38901_307913_307913" value="307913" onchange="">
<label class="inline" for="545402_38901pi_545402_38901_307913_307913">11-25</label>
</span>
<span class="" style="">
<input type="radio" name="545402_38901pi_545402_38901[]" id="545402_38901pi_545402_38901_307915_307915" value="307915" onchange="">
<label class="inline" for="545402_38901pi_545402_38901_307915_307915">26-50</label>
</span>
</span>
</p>
<div id="error_for_545402_38901pi_545402_38901" style="display:none"></div>
</form>
<script>
var labels = document.querySelectorAll("label");
var i = labels.length;
while (i--) {
var label = labels.item(i);
var text = label.textContent;
label.parentNode.classList.contains("required") && (text += " *");
var nextElement = label.nextElementSibling;
if (nextElement.tagName == 'SELECT') {
nextElement.options[0].text = text;
}
else {
nextElement.setAttribute("placeholder", text);
}
}
</script>

Been there, done that. Try this script...
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form accept-charset="UTF-8" method="post" action="http://resources.tdinternational.com/l/545402/2018-06-20/3k6cs" class="form" id="pardot-form">
<p class="form-field name first_name pd-text required ">
<label class="field-label" for="545402_38895pi_545402_38895">Full Name</label>
<input type="text" name="545402_38895pi_545402_38895" id="545402_38895pi_545402_38895" value="" class="text" size="30" maxlength="40" onchange="">
</p>
<div id="error_for_545402_38895pi_545402_38895" style="display:none"></div>
<p class="form-field industry industry pd-select required ">
<label class="field-label" for="545402_38899pi_545402_38899">Industry</label>
<select name="545402_38899pi_545402_38899" id="545402_38899pi_545402_38899" class="select" onchange=""><option value="" selected="selected"></option>
<option value="307917">technology</option>
<option value="307919">compliance</option>
<option value="307921">training</option>
<option value="307923">observation</option>
</select>
</p>
<p class="form-field opted_out pd-checkbox required ">
<label class="field-label" for="545402_40627pi_545402_40627">Lorem Ipsum dolor</label>
<span class="value">
<span>
<input type="checkbox" name="545402_40627pi_545402_40627_345413" id="545402_40627pi_545402_40627_345413" value="345413" onchange="">
<label class="inline" for="545402_40627pi_545402_40627_345413">Lorem Ipsum</label>
</span>
</span>
</p>
<div id="error_for_545402_40627pi_545402_40627" style="display:none"></div>
<p class="form-field dropdown employees pd-radio required ">
<label class="field-label" for="545402_38901pi_545402_38901">Employees</label>
<span class="value">
<span class="" style="">
<input type="radio" name="545402_38901pi_545402_38901[]" id="545402_38901pi_545402_38901_307911_307911" value="307911" onchange="">
<label class="inline" for="545402_38901pi_545402_38901_307911_307911">5-10</label>
</span>
<span class="" style="">
<input type="radio" name="545402_38901pi_545402_38901[]" id="545402_38901pi_545402_38901_307913_307913" value="307913" onchange="">
<label class="inline" for="545402_38901pi_545402_38901_307913_307913">11-25</label>
</span>
<span class="" style="">
<input type="radio" name="545402_38901pi_545402_38901[]" id="545402_38901pi_545402_38901_307915_307915" value="307915" onchange="">
<label class="inline" for="545402_38901pi_545402_38901_307915_307915">26-50</label>
</span>
</span>
</p>
<div id="error_for_545402_38901pi_545402_38901" style="display:none"></div>
</form>
<script>
var labels = document.querySelectorAll("p.pd-text label, p.pd-select label, p.pd-textarea label");
var i = labels.length;
while (i--) {
var label = labels.item(i);
var text = label.textContent;
label.parentNode.classList.contains("required") && (text += " ");
var nextElement = label.nextElementSibling;
if(nextElement){
if (nextElement.tagName == 'SELECT') {
nextElement.options[0].text = text;
} else {
nextElement.setAttribute("placeholder", text);
}
label.parentNode.removeChild(label);
}
}
var elements = document.querySelectorAll('.errors, .no-label');
Array.prototype.forEach.call(elements, function(el, i) {
el.parentNode.removeChild(el);
});
</script>
</body>
</html>

Span / Hide input if selected Value is SMTH

I have select with options and I have many inputs. I need to span ready input if I select in option for example "USER" and hide it again if select another option.
<form class="form-signup" action="admin_users.php" method="POST" id="payment-form">
<div class="well well-sm">
<h3 class="form-signin-heading"> Create
<select id="selectlist" name="selectproduct" >
<option value="1">User</option>
<option value="2">Admin</option>
<option value="3">Smth else</option>
<option value="4">Smth else of else</option>
</select>
</h3>
<div class="form-group">
<div class="col-xs-12">
<input class="form-control" type="text" name="username" id="username" placeholder="İstifadəçi" value="first input" required autofocus>
</div>
<div> &nbsp </div>
<div class="col-xs-12">
<input type="text" class="form-control" id="fname" name="fname" placeholder="Ad" value="second input" required>
</div>
<div> &nbsp </div>
<input class='btn btn-primary' type='submit' name='addUser' value='Create user' />
</div>
</form>

$( "#selectlist" ).change(function(event) {
if (this.value == 1 || this.value == 2) {
$(".form-control").show();
} else {
$(".form-control").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-signup" action="admin_users.php" method="POST" id="payment-form">
<div class="well well-sm">
<h3 class="form-signin-heading"> Create
<select id="selectlist" name="selectproduct" >
<option value="1">User</option>
<option value="2">Admin</option>
<option value="3">Smth else</option>
<option value="4">Smth else of else</option>
</select>
</h3>
<div class="form-group">
<div class="col-xs-12">
<input class="form-control" type="text" name="username" id="username" placeholder="İstifadəçi" value="first input" required autofocus>
</div>
<div> &nbsp </div>
<div class="col-xs-12">
<input type="text" class="form-control" id="fname" name="fname" placeholder="Ad" value="second input" required>
</div>
<div> &nbsp </div>
<input class='btn btn-primary' type='submit' name='addUser' value='Create user' />
</div>
</form>

I would use a custom attribute called valueTie. When you update the select, your content will automatically update accordingly. What's nice is all you have to do is add another option and another div with the attribute valueTie and you're up and running with another option.
$("#selectlist").change(function () {
$("[valueTie]").hide()
$("[valueTie='" + $(this).val() + "']").show();
});
$("#selectlist").change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-signup" action="admin_users.php" method="POST" id="payment-form">
<div class="well well-sm">
<h3 class="form-signin-heading">
Create
<select id="selectlist" name="selectproduct" >
<option value="1">User</option>
<option value="2">Admin</option>
</select>
</h3>
<div class="form-group">
<div class="col-xs-12" valueTie="1">
<input class="form-control" type="text" name="username" id="username" placeholder="İstifadəçi" value="first input" required autofocus>
</div>
<div class="col-xs-12" valueTie="2">
<input type="text" class="form-control" id="fname" name="fname" placeholder="Ad" value="second input" required>
</div>
<div> &nbsp </div>
<input class='btn btn-primary' type='submit' name='addUser' value='Create user' />
</div>
</form>

change style of input submit on focus of input field

I am trying to change the button color when any input field is on focus. Okay to use javascript or CSS. Thanks for the help.
.redbutton {
background-color:red;
}
<form accept-charset="UTF-8" method="post" action="http://go.pardot.com/l/213532/2016-08-08/jr9" class="form" id="pardot-form">
<p class="form-field first_name pd-text required required-custom">
<label class="field-label" for="213532_2892pi_213532_2892">First Name *</label>
<input type="text" name="213532_2892pi_213532_2892" id="213532_2892pi_213532_2892" value="" class="text" size="30" maxlength="40" onchange="" />
</p>
<p class="form-field last_name pd-text required required-custom">
<label class="field-label" for="213532_2894pi_213532_2894">Last Name *</label>
<input type="text" name="213532_2894pi_213532_2894" id="213532_2894pi_213532_2894" value="" class="text" size="30" maxlength="80" onchange="" />
</p>
<p class="form-field email pd-text required required-custom">
<label class="field-label" for="213532_2896pi_213532_2896">Email *</label>
<input type="text" name="213532_2896pi_213532_2896" id="213532_2896pi_213532_2896" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 213532, 2896, 14168);" />
</p>
<p class="submit">
<input type="submit" accesskey="s" value="SUBMIT" />
</p>
</form>

You can use focus and blur callback of jQuery. Decide the currect state on the inside and do whatever you want to ...
$("input[type=text]").on("focus blur", function() {
if( $("input[type=text]:focus").length > 0 ) {
$("input[type=submit]").addClass("redbutton");
}
else {
$("input[type=submit]").removeClass("redbutton");
}
});
.redbutton {
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form accept-charset="UTF-8" method="post" action="http://go.pardot.com/l/213532/2016-08-08/jr9" class="form" id="pardot-form">
<p class="form-field first_name pd-text required required-custom">
<label class="field-label" for="213532_2892pi_213532_2892">First Name *</label>
<input type="text" name="213532_2892pi_213532_2892" id="213532_2892pi_213532_2892" value="" class="text" size="30" maxlength="40" onchange="" />
</p>
<p class="form-field last_name pd-text required required-custom">
<label class="field-label" for="213532_2894pi_213532_2894">Last Name *</label>
<input type="text" name="213532_2894pi_213532_2894" id="213532_2894pi_213532_2894" value="" class="text" size="30" maxlength="80" onchange="" />
</p>
<p class="form-field email pd-text required required-custom">
<label class="field-label" for="213532_2896pi_213532_2896">Email *</label>
<input type="text" name="213532_2896pi_213532_2896" id="213532_2896pi_213532_2896" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 213532, 2896, 14168);" />
</p>
<p class="submit">
<input type="submit" accesskey="s" value="SUBMIT" />
</p>
</form>

Try this
$(document).ready(function(){
$("input").focus(function(){
$("input[type='submit']").addClass("changeBg");
});
$("input").focusout(function(){
$("input[type='submit']").removeClass("changeBg");
});
});
.redbutton {
background-color:red;
}
.changeBg{background:yellow;}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form accept-charset="UTF-8" method="post" action="http://go.pardot.com/l/213532/2016-08-08/jr9" class="form" id="pardot-form">
<p class="form-field first_name pd-text required required-custom">
<label class="field-label" for="213532_2892pi_213532_2892">First Name *</label>
<input type="text" name="213532_2892pi_213532_2892" id="213532_2892pi_213532_2892" value="" class="text" size="30" maxlength="40" onchange="" />
</p>
<p class="form-field last_name pd-text required required-custom">
<label class="field-label" for="213532_2894pi_213532_2894">Last Name *</label>
<input type="text" name="213532_2894pi_213532_2894" id="213532_2894pi_213532_2894" value="" class="text" size="30" maxlength="80" onchange="" />
</p>
<p class="form-field email pd-text required required-custom">
<label class="field-label" for="213532_2896pi_213532_2896">Email *</label>
<input type="text" name="213532_2896pi_213532_2896" id="213532_2896pi_213532_2896" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 213532, 2896, 14168);" />
</p>
<p class="submit">
<input type="submit" accesskey="s" value="SUBMIT" />
</p>
</form>

Below code you change the background-color of the submit button is any field is focus
$("input").not("input[type=submit]").focus(function(){
$("input[type=submit]").css("background-color","green")
})
Reset the background-color of the submit button if field loose focus
$("input").not("input[type=submit]").blur(function(){
$("input[type=submit]").css("background-color","")
})
Working Fiddle

you can do this like so :
i selected the items in a more detailed way, but you can simplify if you want. i just wanted to be more clear as to what i am selecting
ALSO change the type of input from the email field, from text to input type="email"
$("p:not(:last-child) input").focus(function() {
$(this).parent("p").siblings("p").find("input[type='submit']").addClass("redbutton")
});
$("p:not(:last-child) input").focusout(function() {
$(this).parent("p").siblings("p").find("input[type='submit']").removeClass("redbutton")
});
.redbutton {
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form accept-charset="UTF-8" method="post" action="http://go.pardot.com/l/213532/2016-08-08/jr9" class="form" id="pardot-form">
<p class="form-field first_name pd-text required required-custom">
<label class="field-label" for="213532_2892pi_213532_2892">First Name *</label>
<input type="text" name="213532_2892pi_213532_2892" id="213532_2892pi_213532_2892" value="" class="text" size="30" maxlength="40" onchange="" />
</p>
<p class="form-field last_name pd-text required required-custom">
<label class="field-label" for="213532_2894pi_213532_2894">Last Name *</label>
<input type="text" name="213532_2894pi_213532_2894" id="213532_2894pi_213532_2894" value="" class="text" size="30" maxlength="80" onchange="" />
</p>
<p class="form-field email pd-text required required-custom">
<label class="field-label" for="213532_2896pi_213532_2896">Email *</label>
<input type="email" name="213532_2896pi_213532_2896" id="213532_2896pi_213532_2896" value="" class="text" size="30" maxlength="255" onchange="piAjax.auditEmailField(this, 213532, 2896, 14168);" />
</p>
<p class="submit">
<input type="submit" accesskey="s" value="SUBMIT" />
</p>
</form>

How to check if a field from a form is filled?

So I am trying to figure out a way to blank a field if a particular field is entered and vice versa.
The form locates urgent care locations base on the entries that the users enters. So we have the urgent care facility name, city, zip code and miles field.
So what I would like to do is if the user enters the zip code in the zip code field and if the user previously had selected a city based on the selection given, it blanks out the city and vice versa. If the user selects a city from the city drop down list, the zip code field blanks out.
The following is the code I have:
$('#zip').on('input‌', function() { $('#city').val("") })
$('#city').on('input‌', function() { $('#zip').val("") })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate="" role="form">
<div class="form-group">
<input class="form-control" id="urgentcare" ng-model="searchParam.UrgentCareName" placeholder="Urgent Care Name" type="text" />
</div>
<!---<div class="form-group"><input class="form-control" id="urgentcare" name="Urgent Care Name" onblur="if(this.value === '') this.value = 'Urgent Care Name';" onfocus="if(this.value === 'Urgent Care Name') this.value = '';" type="text" value="Urgent Care Name" /></div>--->
<div class="form-group">
<!---<select class="form-control margin-bottom1" id="city" ng-model="searchParam.City" ng-options="City.value for City in Cities">
<option disabled="disabled" selected="selected" value="">City</option> </select>--->
<SELECT name="proCity" class="form-control margin-bottom1" id="city" placeholder="City" ng-model="searchParam.City">
<option disabled="disabled" selected="selected" value="">City</option>
<cfoutput query="UCarecityFind">
<option value=#officecity#>#officecity#</option>
</cfoutput>
</select>
</div>
<hr />
<div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div>
<div class="row">
<div class="col-xs-7 no-right-padding">
<div class="form-group">
<div class="input-group">
<!---<select class="form-control" name="distance" ng-model="searchParam.Distance" ng-options="mile.value for mile in miles"></select>--->
<select class="form-control" name="distance" ng-model="searchParam.distance">
<option selected="selected" value=" "></option>
<option>5</option>
<option>10</option>
<option>15</option>
<option>20</option>
</select>
<div class="input-group-addon">miles</div>
</div>
</div>
</div>
<div class="col-xs-5 no-left-padding widthZip">
<div class="form-group">
<input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" />
</div>
</div>
</div>
<div class="form-group">
<input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" />
</div>
</form>
</div>
</div>

You have an invisible character with code 0x5396c after input in your .on() calls. When I remove that, the code works.
$('#zip').on('input', function() {
$('#city').val("")
})
$('#city').on('input', function() {
$('#zip').val("")
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate="" role="form">
<div class="form-group">
<input class="form-control" id="urgentcare" ng-model="searchParam.UrgentCareName" placeholder="Urgent Care Name" type="text" />
</div>
<!---<div class="form-group"><input class="form-control" id="urgentcare" name="Urgent Care Name" onblur="if(this.value === '') this.value = 'Urgent Care Name';" onfocus="if(this.value === 'Urgent Care Name') this.value = '';" type="text" value="Urgent Care Name" /></div>--->
<div class="form-group">
<!---<select class="form-control margin-bottom1" id="city" ng-model="searchParam.City" ng-options="City.value for City in Cities">
<option disabled="disabled" selected="selected" value="">City</option> </select>--->
<SELECT name="proCity" class="form-control margin-bottom1" id="city" placeholder="City" ng-model="searchParam.City">
<option disabled="disabled" selected="selected" value="">City</option>
<cfoutput query="UCarecityFind">
<option value=#officecity#>#officecity#</option>
</cfoutput>
</select>
</div>
<hr />
<div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div>
<div class="row">
<div class="col-xs-7 no-right-padding">
<div class="form-group">
<div class="input-group">
<!---<select class="form-control" name="distance" ng-model="searchParam.Distance" ng-options="mile.value for mile in miles"></select>--->
<select class="form-control" name="distance" ng-model="searchParam.distance">
<option selected="selected" value=" "></option>
<option>5</option>
<option>10</option>
<option>15</option>
<option>20</option>
</select>
<div class="input-group-addon">miles</div>
</div>
</div>
</div>
<div class="col-xs-5 no-left-padding widthZip">
<div class="form-group">
<input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" />
</div>
</div>
</div>
<div class="form-group">
<input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" />
</div>
</form>
</div>
</div>

JavaScript Validation needed for this form, it does not work whatever I try

This form needs to calculate cost for each course (which is not done yet). It needs JavaScript Validation, and PHP for Username and Password info to go somewhere. The credentials will be used in a PHP login. Can you help?
<form form name="myform" id="myform" method="post">
<p>
<label for="name">Name</label>
<input type=text name="name" placeholder="Enter your full name" />
</p>
<p>
<label for="gender">Gender</label>
<input type="radio" name="gender" value="M"> Male
<input type="radio" name="gender" value="F"> Female
</p>
<p>
<label for="birthday">Date of Birth</label>
<input type="date" name="bday" />
</p>
<p>
<label for="username">Create Username</label>
<input type="text" id="username" name="username">
</p>
<p>
<label for="password" name="name">Password</label>
<input type="password" id="password" name="username" value="">
</p>
<p>
<label for="Comments">Address</label>
</p>
<textarea cols="40" rows="5" name="Address" id="address" placeholder="Address"></textarea>
<br>
<p>
<label for="postcode">Postcode</label>
<input type="text" name="postcode" id="postcode" placeholder="Enter your postcode" />
</p>
<p>
<label for="contactnumber">Contact Number</label>
<input type="number" id="contactnumber" placeholder="Enter your number" />
</p>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" placeholder="Enter your email" />
</label>
</p>
<p>
<label for="select">Select Course</label>
</p>
<select id="course" name="courses">
<option value="000" selected="selected">[Select course]</option>
<option value="screenplay">Screenplay FL0330 04-01-16</option>
<option value="camerawork">Camerawork FL566 05-01-16</option>
<option value="soundrecording">Sound Recording FB700 06-01-16</option>
<option value="lighting">Lighting FN250 11-01-16</option>
<option value="editing">Editing FB420 12-01-16</option>
<option value="3dgraphics">3D Graphics FA554 13-01-16</option>
<option value="makeup">Make up and Prosthetics FA128 15-01-16</option>
</select>
<br>
<input type="submit" name="submit" value="Submit Now">
</form>

Categories

Resources