Add html based off select value - javascript

I am trying to insert some HTML based off a select value, I plan to have 12 values then have different html inserted based off what each value is. I have done this before and even using the code from before with slight changes to it specific to the code I am working with today.
My HTML code is:
{% extends '../../layouts/appDashboard.html' %}
{% block title %}{{title}}{% endblock %}
{% block content %}
<div class="container-fluid container-max">
<div><br><br></div>
<div class="box box-warning box-solid">
<div class="box-header with-border">
<h3 class="box-title">Create Model</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
</div>
</div>
<!-- /.box-header -->
<div class="box-body no-padding">
<div class="row">
<div class="col-md-3 col-sm-8">
<!-- Content here -->
<div class="container">
<div class="col-md-6 col-md-offset-2">
<form role="form-inline"action="/dashboard/it/model/new" method="POST">
<div class="box-body">
<div class="form-group">
<label for="templateName" class="control-label">Template Name</label>
<input type="text" class="form-control" id="name" placeholder="Asset Template Name">
</div>
<div class="form-group">
<label for="manufacturer" class="control-label">Manufacturer</label>
<select class="form-control selectpicker" title="Manufacturer" name="manufacturer" data-live-search="true">
<option value="cisco">Cisco</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group">
<label for="model" class="control-label">Model Name</label>
<input type="text" class="form-control" id="model" placeholder="Model Name">
</div>
<div class="form-group">
<label for="type" class="control-label">Type</label>
<select class="form-control selectpicker" title="Type of Asset" name="type" data-live-search="true" id="type" onchange="typePicker()">
<option value="aps">Access Point</option>
<option value="Cable">Cable</option>
<option value="Desktop">Desktop</option>
<option value="Laptop">Laptop</option>
<option value="Desk Phone">Desk Phone</option>
<option value="Mobile Phone">Mobile Phone</option>
<option value="Monitor">Monitor</option>
<option value="Printer">Printer</option>
<option value="Projector">Projector</option>
<option value="Router">Router</option>
<option value="Switch">Switch</option>
<option value="Tablet">Tablet</option>
</select>
</div>
<div class="form-group" id="typeInputs">
</div>
<div class="form-group">
<label for="asset number">Asset Number</label>
<input type="number" class="form-control" id="assetNumber" placeholder="Asset Number">
</div> <!-- Asset Number -->
<div class="form-group">
<label for="notes">Notes</label>
<textarea class="form-control" rows="3" id="notes" placeholder="Notes.."></textarea>
</div> <!-- Notes -->
<div class="btn-group" data-toggle="buttons">
<label for="">User Assignable</label><br>
<label class="btn btn-primary">
<input type="radio" name="signout" id="option1"> Yes
</label>
<label class="btn btn-primary">
<input type="radio" name="signout" id="option2"> No
</label>
</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
<!-- /.box-body -->
</div>
<!--/.box-body -->
</div>
{% include "../../partials/flash.html" %}
</div>
</div>
{% endblock %}
Then my JS code is:
function typePicker(){
var sel=document.getElementById("type");
var typeInputs=document.getElementById("typeInputs");
var aps = '<div class="form-group"><input type="text" class="form-control" name="ipaddress" id="ipaddress" placeholder="IP Address"></div> <!-- IP Address --><div class="form-group"><input type="text" class="form-control" name="mac-address" id="mac-address" placeholder="MAC Address"></div><!-- MAC Address --><div class="form-group"><input type="text" class="form-control" name="range" id="range" placeholder="Range in M"></div><!-- Range --><div class="form-group"><input type="text" class="textbox-n form-control" name="bands" id="bands" placeholder="Bands" ></div><!-- Bands --><div class="form-group"><input type="text" class="form-control" name="channels" id="channels" placeholder="Channel(s)"></div><!-- Channels --><div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="btn-group" data-toggle="buttons"><label for="">PoE</label><br><label class="btn btn-primary"><input type="radio" name="poe" id="option1"> Yes</label><label class="btn btn-primary"><input type="radio" name="poe" id="option2"> No</label></div> <br><br><!-- PoE --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input class="form-control" id="location" placeholder="Location"></div><!-- Location --></div>';
if(sel.value=="aps"){
typeInputs.innerHTML=aps;
}
if(sel.value!="other"){
var child = document.getElementById("typeInputs");
child.parentNode.removeChild(child);
}
}
I know I messed up the HTML in the JS code but I can't even get any to work. Reason I included the full html I need inserted is I am hoping someone knows a better way of coding this so that I don't have un-needed divs and such.
If I am missing any code or details just ask, I will be watching this question closely until I get it to work.
I would also like to have the html disappear change when the user selects another value that way only the html for that value actually shows.

The good practice will be to use events.
Pure JS:
var foo = document.getElementById("type");
foo.addEventListener("change",function(){
...
Do whatever
...
});
Using jQuery:
$('#type').change(function(){
....
Do whatever
....
})

Related

Limit the maximum number inputted in an input field base on the inputted number on another input field

The question may sound complicated but all I just wanna do is to make the maximum number allowed to input in the damaged less than to the number that is being inputted in the quantity. I need to make the input of the other input field is based on the input on another input field.
Here is my code for the input form:
`
<div id="addtransaction" class="col-12" style="display:none">
<div class="card overflow-auto">
<div class="card-body ">
<div class="row">
<h5 class="add-title text-center">Add Transaction</h5>
<form method="POST" action="inv-add.php" id="form1" class="needs-validation" novalidate>
<div class="row">
<div class="col-md-3">
<label for="customer" class="text-black"><strong>Customer</strong></label>
<input class="form-control" type="text" name="customer" maxlength="10" required >
</div>
<div class="col-md-3">
<label for="transaction" class="text-black"><strong>Transaction</strong></label>
<select class="form-control" name="transaction" required>
<option value="" disabled selected>Choose a transaction</option>
<option value="1">Regular</option>
<option value="2">Refill</option>
</select>
</div>
<div class="col-md-3">
<label for="item" class="text-black"><strong>Item</strong></label>
<select class="form-control" name="item" required>
<option value="" disabled selected>Choose an item</option>
<option value="0">Slim</option>
<option value="1">Round</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-3">
<label for="quantity" class="text-black"><strong>Quantity</strong></label>
<input class="form-control" type="number" min="0" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength="2" name="quantity" required>
</div>
<div class="col-md-3">
<label for="price" class="text-black"><strong>Price per galon</strong></label>
<input class="form-control" type="number" min="0" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength="4" name="price" placeholder="₱ 0.00" required >
</div>
<div class="col-md-3">
<label for="returns" class="text-black"><strong>Gallons returned</strong></label>
<input class="form-control" type="number" min="0" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength="2" name="returns">
</div>
<div class="col-md-2">
<label for="damaged" class="text-black"><strong>Damaged</strong> </label>
<input class="form-control" type="number" min="0" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength="2" name="damaged">
</div>
</div>
<div style="padding-top: 10px; display: flex; align-items: flex-end;">
<button type="submit" name="add" id="add" class="btn btn-primary add">Confirm</button>
</div>
</form>
</div>
</div>
</div>
`
You can use the setAttribute() method in order to modify the maximum number allowed in you imput.
element.setAttribute(attributeName, attributeValue)
And call this method each time the value of the other imput is modify.

I am using angular 2 and I have created a form and Marked fields as required but still my got submitted

I am using Angular 2 and I have created a form and mark all the fields as required but in only one field required is not working but when I inspect through browser then I can check on that field it is giving error like ng-untouched, ng-invalid sill my form got submitted.
My code is below:
<form (ngSubmit)="AddUpdateExperience(selectedExperience);experienceForm.reset();selectedExperience.restaurantType='';selectedExperience.workProfile='';selectedExperience.restaurantName=''" #experienceForm="ngForm">
<div class="form-group">
<div class="col-sm-6">
<!--<input type="text" class="form-control" placeholder="City" name="scity" [(ngModel)]="selectedExperience.city" #scity="ngModel" required />-->
<input type="text" class="form-control input-responsive" [(ngModel)]="selectedExperience.city" [ngModelOptions]="{standalone: true}" options="{types: ['address'], componentRestrictions: { country: 'US' }}" (setAddress)="getAddressForExperience($event)" (city)='city=$event' (postal_code)='postal_code=$event' id="autocomplete" placeholder="City you work in*" required ng2-google-place-autocomplete />
</div>
<div class="col-sm-6">
<input type="text" class="form-control input-responsive" placeholder="Zip(Optional)" name="szip" [(ngModel)]="selectedExperience.zip" maxlength="5" pattern="[0-9]{5}" #szip="ngModel" />
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<!--<input type="text" class="form-control" [(ngModel)]="selectedExperience.restaurantName" #restaurantName="ngModel" placeholder="Restaurant Name" name="restaurantName" required>-->
<input type="text" class="form-control input-responsive" ngui-auto-complete [(ngModel)]="selectedExperience.restaurantName" #myserver [formControl]="restaurant" [source]="restaurants" [list-formatter]="autocompleListFormatter" value-property-name="name" display-property-name="name" placeholder="Restaurant/Bar Name*" (blur)="update(myserver.value)" loading-text="Loading" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<select class="form-control input-responsive" name="restaurantType" [(ngModel)]="selectedExperience.restaurantType" #restaurantType="ngModel" required>
<option value="" disabled selected>Select Restaurant Type</option>
<option value="Ethnic">Ethnic</option>
<option value="Fast Food">Fast Food</option>
<option value="Fast Casual">Fast Casual</option>
<option value="Casual Dinning">Casual Dinning</option>
<option value="Family Style">Family Style</option>
<option value="Fine Dinning">Fine Dinning</option>
<option value="Cafe">Cafe</option>
<option value="Bar">Bar</option>
</select>
</div>
<div class="col-sm-6">
<select class="form-control input-responsive" name="designation" [(ngModel)]="selectedExperience.workProfile" #workProfile="ngModel" required>
<option value="" disabled selected>Select Work Profile</option>
<option value="Bartender">Bartender</option>
<option value="Server">Server</option>
<option value="Busser">Busser</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<input type="text" class="form-control input-responsive datepickerFrom" readonly="true" placeholder="From* : MM/yyyy" maxlength="7" name="fromDate" [(ngModel)]="selectedExperience.fromDate" required #fromDate="ngModel" />
<div *ngIf="fromDate.errors && (fromDate.dirty || fromDate.touched)">
<small [hidden]="!fromDate.errors.pattern" class="text-danger">
From Date is required
</small>
</div>
<!--<div *ngIf="fromDate.errors">
<small [hidden]="!fromDate.errors.pattern" class="text-danger">Invalid From Date</small>
</div>-->
</div>
<div class="col-sm-6">
<input type="text" class="form-control input-responsive datepickerTo" readonly="true" [disabled]="selectedExperience.isCurrentJob" placeholder="To*: MM/yyyy" maxlength="7" name="toDate" [(ngModel)]="selectedExperience.toDate" #toDate="ngModel" />
<div *ngIf="toDate.errors">
<small [hidden]="!toDate.errors.pattern" class="text-danger">Invalid To Date</small>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<ui-switch (change)="onChange($event)" [(checked)]="selectedExperience.isCurrentJob"></ui-switch>
<p>This is my current job</p>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="submit" [disabled]="!experienceForm.form.valid " value="{{experienceButtonText}}" class="btn btn-success" />
</div>
</div>
</form>
my form is not working for this field:
[(ngModel)]="selectedExperience.restaurantName"
You have used template driven forms for this. Please remove [formControl]="restaurant" and add name="restaurantName" #restaurantName="ngModel". Following is the working code. It works for me.
<input type="text" class="form-control input-responsive" ngui-auto-complete [(ngModel)]="selectedExperience.restaurantName"
#myserver [source]="restaurants" [list-formatter]="autocompleListFormatter"
value-property-name="name" display-property-name="name" placeholder="Restaurant/Bar Name*"
(blur)="update(myserver.value)" loading-text="Loading" required name="restaurantName" #restaurantName="ngModel">

Showing HTML when JS says it should not be

I have a select that the shows the title property on load. I have some JS so that when certain options are selected different divs show. My issue is that the divs show on load and I don't want them to show until their correct option is selected.
function typePicker() {
var sel = document.getElementById("type");
var manufacturer = document.getElementById("manufacturer");
var model = document.getElementById("model");
var typeInputs = document.getElementById("typeInputs");
var aps = document.getElementById("aps");
var cables = '<div class="form-group"><input type="text" class="form-control" id="type" name="cableType" placeholder="Type"></div><div class="form-group"><input type="number" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="quantity" name="quantity" placeholder="Quantity"></div><!-- Quantity --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location -->';
// Yes I know this is improper that is why I am doing the switch over and came across this issue
if (sel.value == "aps") {
aps.style.display = 'block';
} else {
aps.style.display = 'none';
}
if (sel.value == "cables") {
manufacturer.style.display = 'none';
model.style.display = 'none';
typeInputs.innerHTML = cables; // This line will be changed soon to the style above in process of doing this to all.
} else {
manufacturer.style.display = 'block';
model.style.display = 'block';
}
}
<div class="form-group">
<label for="type" class="control-label">Type</label>
<select class="form-control selectpicker" title="Type of Asset" name="type" data-live-search="true" id="type" onchange="typePicker()">
<option value="aps">Access Point</option>
<option value="cables">Cable</option>
<option value="desktops">Desktop</option>
<option value="laptops">Laptop</option>
<option value="deskPhones">Desk Phone</option>
<option value="mobilePhones">Mobile Phone</option>
<option value="monitors">Monitor</option>
<option value="printers">Printer</option>
<option value="projectors">Projector</option>
<option value="routers">Router</option>
<option value="switches">Switch</option>
<option value="tablets">Tablet</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group" id="typeInputs">
<div id="aps">
<div class="form-group">
<input type="text" class="form-control" name="ipaddress" id="ipaddress" placeholder="IP Address">
</div>
<!-- IP Address -->
<div class="form-group">
<input type="text" class="form-control" name="mac-address" id="mac-address" placeholder="MAC Address">
</div>
<!-- MAC Address -->
<div class="form-group">
<input type="text" class="form-control" name="range" id="range" placeholder="Range in M">
</div>
<!-- Range -->
<div class="form-group">
<input type="text" class="textbox-n form-control" name="bands" id="bands" placeholder="Bands">
</div>
<!-- Bands -->
<div class="form-group">
<input type="text" class="form-control" name="channels" id="channels" placeholder="Channel(s)">
</div>
<!-- Channels -->
<div class="form-group">
<input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type=\'date\')" onblur="(this.type\'text\')" id="date-bought" name="dateBought">
</div>
<!-- Date Bought -->
<div class="btn-group" data-toggle="buttons">
<label for="poe">PoE</label>
<br>
<label class="btn btn-primary"><input type="radio" name="poe" id="option1"> Yes</label>
<label class="btn btn-primary"><input type="radio" name="poe" id="option2"> No</label>
</div> <br><br>
<!-- PoE -->
<div class="form-group">
<input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type=\'date\')" onblur="(this.type=\'text\')" id="warranty-date" name="warrantyDate">
</div>
<!-- Warranty Date -->
<div class="form-group">
<input class="form-control" id="location" placeholder="Location">
</div>
<!-- Location -->
</div>
</div>
<div class="form-gorup" id="warningType">
</div>
I can not get the snippet to work at all when you select another option. The only one there is code for in the snippet is for the aps and cables ones. Code works file on my server and is good enough for this snippet I believe. The main issue of the aps div showing upon load is the problem. How can I make it not show on load?
If additional code or info is needed please ask away.
I implemented what your question is asking for in CSS.
#aps {
display: none;
}
This will hide you div with the ID of 'aps' by default, on load. You can then modify the style to display it when you need it.
function typePicker(){
var sel = document.getElementById("type");
var manufacturer = document.getElementById("manufacturer");
var model = document.getElementById("model");
var typeInputs = document.getElementById("typeInputs");
var aps = document.getElementById("aps");
var cables = '<div class="form-group"><input type="text" class="form-control" id="type" name="cableType" placeholder="Type"></div><div class="form-group"><input type="number" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="quantity" name="quantity" placeholder="Quantity"></div><!-- Quantity --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location -->';
// Yes I know this is improper that is why I am doing the switch over and came across this issue
if(sel.value=="aps"){
aps.style.display = 'block';
}else{
aps.style.display = 'none';
}
if(sel.value=="cables"){
manufacturer.style.display = 'none';
model.style.display = 'none';
typeInputs.innerHTML=cables; // This line will be changed soon to the style above in process of doing this to all.
}else{
manufacturer.style.display = 'block';
model.style.display = 'block';
}
}
#aps {
display: none;
}
<div class="form-group">
<label for="type" class="control-label">Type</label>
<select class="form-control selectpicker" title="Type of Asset" name="type" data-live-search="true" id="type" onchange="typePicker()">
<option value="aps">Access Point</option>
<option value="cables">Cable</option>
<option value="desktops">Desktop</option>
<option value="laptops">Laptop</option>
<option value="deskPhones">Desk Phone</option>
<option value="mobilePhones">Mobile Phone</option>
<option value="monitors">Monitor</option>
<option value="printers">Printer</option>
<option value="projectors">Projector</option>
<option value="routers">Router</option>
<option value="switches">Switch</option>
<option value="tablets">Tablet</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group" id="typeInputs">
<div id="aps">
<div class="form-group">
<input type="text" class="form-control" name="ipaddress" id="ipaddress" placeholder="IP Address">
</div> <!-- IP Address -->
<div class="form-group">
<input type="text" class="form-control" name="mac-address" id="mac-address" placeholder="MAC Address">
</div> <!-- MAC Address -->
<div class="form-group">
<input type="text" class="form-control" name="range" id="range" placeholder="Range in M">
</div> <!-- Range -->
<div class="form-group">
<input type="text" class="textbox-n form-control" name="bands" id="bands" placeholder="Bands" >
</div> <!-- Bands -->
<div class="form-group">
<input type="text" class="form-control" name="channels" id="channels" placeholder="Channel(s)">
</div> <!-- Channels -->
<div class="form-group">
<input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type=\'date\')" onblur="(this.type\'text\')" id="date-bought" name="dateBought">
</div> <!-- Date Bought -->
<div class="btn-group" data-toggle="buttons">
<label for="poe">PoE</label>
<br>
<label class="btn btn-primary"><input type="radio" name="poe" id="option1"> Yes</label>
<label class="btn btn-primary"><input type="radio" name="poe" id="option2"> No</label>
</div> <br><br><!-- PoE -->
<div class="form-group">
<input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type=\'date\')" onblur="(this.type=\'text\')" id="warranty-date" name="warrantyDate">
</div><!-- Warranty Date -->
<div class="form-group">
<input class="form-control" id="location" placeholder="Location">
</div><!-- Location -->
</div>
</div>
<div class="form-gorup" id="warningType">
</div>

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>

Select option form not work in master slider?

My demo at here: http://project.bulleno.com/dwi/index2.html
In my demo, the select option of other form work well, but the select of form on slider not work and I cannot figure out and solve it.
I think it is conflict with jquery from master slider and smart form. But I cannot troubleshoot it. So I need help and any help is greatly appreciated. You can check my code below:
<div class="ms-slide slide-1" data-delay="9">
<div class="slide-pattern"></div>
<img src="js/masterslider/blank.gif" data-src="images/slide3.jpg" alt="" />
<h3 class="ms-layer text31 text-center"
style="top: 230px; right: 230px;"
data-type="text"
data-delay="500"
data-ease="easeOutExpo"
data-duration="1230"
data-effect="top(250)">Welcome To DidYouBlow</h3>
<h3 class="ms-layer text36 text-center"
style="top: 20px; right: -900px;"
data-type="text"
data-delay="0"
data-ease="easeOutExpo"
data-duration="1230"
data-effect="top(250)">
<div class="col-md-4 col-sm-6 col-sm-6 col-xs-12 bmargin">
<span class="visible-lg">
<div class="feature-box57 bmargin">
<br />
<font color="000000"><i class="fa fa-university"></i><font size="+2">Submit DWI INFO</font><i class="fa fa-university"></i></font>
<form method="post" action="send.php" id="">
<div class="clearfix"></div>
<br>
<div class="col-sm-5">
<input class="form-control" type="text" name="Name" placeholder="Full Name">
</div>
<div class="col-sm-5">
<input class="form-control" type="text" name="Name" placeholder="Phone Number">
</div>
<div class="clearfix"></div>
<br>
<div class="col-sm-5">
<input class="form-control" type="text" name="Name" placeholder="Email">
</div>
<div class="col-sm-5">
<input class="form-control" type="text" name="Name" placeholder="City / Court">
</div>
<div class="clearfix"></div>
<br>
<div class="col-sm-5">
<input class="form-control" type="text" name="Name" placeholder="Name">
</div>
<div class="col-sm-5">
<input class="form-control" type="text" name="Name" placeholder="Name">
</div>
<div class="clearfix"></div>
<br>
<div class="col-sm-5">
<label for="month" class="field select">
<select id="month" name="month">
<option value="">How Did You Hear About Us?</option>
<option value="Facebook">Facebook</option>
<option value="Google">Google</option>
<option value="Yahoo">Yahoo</option>
<option value="Mailer">Mailer</option>
<option value="Radio">Radio</option>
<option value="Bing">Bing</option>
<option value="Referral">Referral</option>
</select>
<i class="arrow double"></i>
</label>
</div>
<div class="col-sm-5">
<label for="month" class="field select">
<select id="month" name="month">
<option value="">How Did You Hear About Us?</option>
<option value="Facebook">Facebook</option>
<option value="Google">Google</option>
<option value="Yahoo">Yahoo</option>
<option value="Mailer">Mailer</option>
<option value="Radio">Radio</option>
<option value="Bing">Bing</option>
<option value="Referral">Referral</option>
</select>
<i class="arrow double"></i>
</label>
</div>
<div class="clearfix"></div>
<br>
<div class="col-sm-11">
<textarea class="form-control" id="sendermessage" name="sendermessage" placeholder="Enter message"></textarea>
</div>
<div class="clearfix"></div>
<br>
<button type="submit" class="btn btn-dark-2 less-round less-padding">Submit Information</button>
</div>
</form>
</div>
</span>
</h3>
</div>
The problem cause this matter is: mouse and loop option in master slider.
I had disable both options and everything work well.

Categories

Resources