I am having an interface for my admins where they can add fields to a database. If they want to add several fields they can easily add a new line. This is done by cloning via JavaScript. Now there is one dropdown menu and based on the selection from the dropdown I want to write default values to the text-input fields for min[] and max[].
This works fine if I am having just one line. But if I clone it several times and make a selection (e. g. I am selecting the option "relative_number") in just one line (e. g.) the min and max fields are updated in every line. What can I do so that when the drop down is selected in a certain line only the min and max values in the same line are updated?
Here is my code:
<div class="wrapper">
<div class="entities_wrap">
<div class="row">
<div class="col-md-3">
<label>Name</label>
<input type="text" name="entity_name[]" value="" style="width: 275px;" class="form-control" id="entity_name[]" />
</div>
<div class="col-md-3">
<label>Field Name</label>
<input type="text" name="entity_field_name[]" value="" style="width: 275px;" class="form-control" id="entity_field_name[]" />
</div>
<div class="col-md-2">
<label>Category</label>
<select id="entity_field_type[]" name="entity_field_type[]" class="form-select"> <option value=""></option> <option value="absolute_number">absolute_number</option> <option value="relative_number">relative_number</option> <option value="likert_5">likert_5</option> <option value="likert_7">likert_7</option> <option value="string">string</option> </select>
</div>
<div class="col-md-1 minValue">
<label>Min</label>
<input type="text" class="form-control min" id="min[]" name="min[]" value=""/>
</div>
<div class="col-md-1">
<label>Max</label>
<input type="text" class="form-control max" id="max[]" name="max[]" value=""/>
</div>
<div class="col-md-1" style="vertical-align: middle;">
<label> </label>
<div style="margin: 0px 10px;">
<i class="fas fa-trash remove-item"></i></span>
</div>
</div>
<div class="col-md-1" style="vertical-align: middle;">
<label> </label>
<div style="margin: 0px 10px;">
<i class="fas fa-plus add-plus"></i> <span class="plus">Add Line</span>
</div>
</div>
</div><br>
</div>
</div>
<script>
$(document).ready(function () {
$(".add-plus").click(function(){
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".plus").click(function(){
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".remove-item").click(function () {
$(this).closest(".entities_wrap").remove();
});
});
$('select[id^="entity_field_type"]').on('change', function()
{
var sel_cat = this.value;
if(sel_cat == 'relative_number')
{
$('input[id^="min"]').val("0");
$('input[id^="max"]').val("100");
}
if(sel_cat == 'absolute_number')
{
$('input[id^="min"]').val("0");
$('input[id^="max"]').val("infinite");
}
// For the other options the code should work alike
});
</script>
Tried already different ways to solve it via DOM, identifying parent nodes, siblings and so on but I don't get it working.
Thanks a lot in advance for your help!
While you should definitely look at dynamically modifying the names and id's of your cloned inputs, the issue you are having relates to your selectors for min and max
In the case of your javascript
$('input[id^="min"]').val("0");
$('input[id^="max"]').val("100");
You are selecting all min and max on the page.
You need to find the related min and max, which means finding the closet .row to the select-box and then finding the child min/max
var $row = $(this).closest("div.row");
$row.find('input[id^="min"]').val("0");
$row.find('input[id^="max"]').val("100");
jQuery closest()
jQuery find()
Here is a functioning snippet example.
$(document).ready(function() {
$(".add-plus").click(function() {
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".plus").click(function() {
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".remove-item").click(function() {
$(this).closest(".entities_wrap").remove();
});
});
$('select[id^="entity_field_type"]').on('change', function() {
var sel_cat = this.value;
var $row = $(this).closest("div.row"); //find the parent row we are in.
if (sel_cat == 'relative_number') {
$row.find('input[id^="min"]').val("0"); //use that row to find the related min
$row.find('input[id^="max"]').val("100"); //use that row to find the related max
}
if (sel_cat == 'absolute_number') {
$row.find('input[id^="min"]').val("0");
$row.find('input[id^="max"]').val("infinite");
}
// For the other options the code should work alike
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="entities_wrap">
<div class="row">
<div class="col-md-3">
<label>Name</label>
<input type="text" name="entity_name[]" value="" style="width: 275px;" class="form-control" id="entity_name[]" />
</div>
<div class="col-md-3">
<label>Field Name</label>
<input type="text" name="entity_field_name[]" value="" style="width: 275px;" class="form-control" id="entity_field_name[]" />
</div>
<div class="col-md-2">
<label>Category</label>
<select id="entity_field_type[]" name="entity_field_type[]" class="form-select">
<option value=""></option>
<option value="absolute_number">absolute_number</option>
<option value="relative_number">relative_number</option>
<option value="likert_5">likert_5</option>
<option value="likert_7">likert_7</option>
<option value="string">string</option>
</select>
</div>
<div class="col-md-1 minValue">
<label>Min</label>
<input type="text" class="form-control min" id="min[]" name="min[]" value="" />
</div>
<div class="col-md-1">
<label>Max</label>
<input type="text" class="form-control max" id="max[]" name="max[]" value="" />
</div>
<div class="col-md-1" style="vertical-align: middle;">
<label> </label>
<div style="margin: 0px 10px;">
<i class="fas fa-trash remove-item"></i></span>
</div>
</div>
<div class="col-md-1" style="vertical-align: middle;">
<label> </label>
<div style="margin: 0px 10px;">
<i class="fas fa-plus add-plus"></i> <span class="plus">Add Line</span>
</div>
</div>
</div><br>
</div>
</div>
Related
<div class="content">
<div class="row" style="margin-top: 27px;">
<div class="col-sm-2" style="width: 13%;">
<select id = "app" class="form_input_box">
<option value="" selected="selected">App</option>
</select>
</div>
<div class="col-sm-2" style="margin-left: -25px;width: 11%;">
<select id = "app or not" class="form_input_box">
<option value="" selected="selected" hidden>App Type</option>
<option value="" selected>App Type</option>
<option value="1">App</option>
<option value="2">Not a App</option>
</select>
</div>
<div class="col-sm-2" style="margin-left: -25px;">
<select id = "dept" class="form_input_box">
<option value="" selected="selected">Department</option>
</select>
</div>
<div class="col-sm-1" style="margin-left: -25px;width: 12%;">
<input type="text" name="date_box" id="date_box" class="form_input_box filter_date" Placeholder="Created Date">
</div>
<div class="col-sm-2" style="margin-left: -25px;width: 11%;">
<input type="text" name="search" id="search" class="form_input_box" Placeholder="Search">
</div>
<div class="col-sm-1" style="margin-left: -25px;">
<button id="erase" class="form-control btn btn-primary" name="erase">Clear values</button>
</div>
<div class="row">
<div class="col-sm-1">
<input type="month" id="month" name="month" class="form_input_box" placeholder="Month">
</div>
<div class="col-sm-2" style="right: 30px">
<button type="button" name="report" id="file" class="button">Report file</button>
</div>
</div>
</div>
</div>
i have html page with buttons drop downs like above i need to set a single button when i click on the button it will show all these things if i again click then these need to be hided how can i achieve this.
To solve the problem simply you could use javascript or jquery and hide or show the options based on the selected values...
$('idoption').hide();
$('idoption').show();
This code is in loop
<div class="card card-fluid">
#php $counterId++;
$formId = 'startLog'.$counterId;
#endphp
{!! Form::open(['id'=>$formId,'class'=>'ajax-form','method'=>'POST', 'onSubmit' => 'return false']) !!}
<div class="card-body">
<div class="row white-box">
<div class="col-md-4">
<input type="text" class="task-name" name="task_name" value="" placeholder="write about your task">
</div>
<div class="col-md-2" style="margin-right: -50px;">
<select class="custom-select-timer" name="update_memberProject[]">
<option selected disabled>Projects</option>
<option>1st</option>
<option>2nd</option>
<option>3rd</option>
</select>
</div>
<div class="col-md-1 bill_icon" style="border-left: lightgray 1px dotted; max-width: 50px;">
<input type="checkbox" name="bill">
<label style="margin-left: 8px;">Check Bill </label>
</div>
</div>
</div>
{!! Form::close() !!}
all i want if any change in form either select new option or check box or text field i can catch that chages
please help
You can select all input in jquery and test the tagname modified.
//i have added event 'input' if you want to test every modification of input Text
// if you want to test the input Text after validation, keep only the event change
$("select, input[type=checkbox], input[type=text]").on('change, input', function(e){
console.log($(this).prop("tagName") + " has been changed");
console.log("formid: " + $(this).parents("form:first").attr("id"));
//following the The tag, you could navigate along the properties of tag and its children
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="card-body">
<div class="row white-box">
<div class="col-md-4">
<input type="text" class="task-name" name="task_name" value="" placeholder="write about your task">
</div>
<div class="col-md-2" style="margin-right: -50px;">
<select class="custom-select-timer" name="update_memberProject[]">
<option selected disabled>Projects</option>
<option>1st</option>
<option>2nd</option>
<option>3rd</option>
</select>
</div>
<div class="col-md-1 bill_icon" style="border-left: lightgray 1px dotted; max-width: 150px;">
<input type="checkbox" name="bill">
<label style="margin-left: 8px;">Check Bill </label>
</div>
</div>
you can simplify the test of change/input and just keep the test of tag modified:
$("form").on('change, input', 'input, textarea, select', function(e){
console.log($(this).prop("tagName") + " has been changed");
console.log("formid: " + $(this).parents("form:first").attr("id"));
//following the The tag, you could navigate along the properties of tag and its children
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<form action="/ma-page-de-traitement" method="post" id="form1">
<div class="card-body">
<input type="text" class="task-name" name="task_name" value="" placeholder="write about your task">
<div class="col-md-2" style="margin-right: -50px;">
<select class="custom-select-timer" name="update_memberProject[]">
<option selected disabled>Projects</option>
<option>1st</option>
<option>2nd</option>
<option>3rd</option>
</select>
</div>
<div class="col-md-1 bill_icon" style="border-left: lightgray 1px dotted; max-width: 150px;">
<input type="checkbox" name="bill">
<label style="margin-left: 8px;">Check Bill </label>
</div>
<div>
<label for="mail">e-mail :</label>
<input type="email" id="mail" name="user_mail">
<div>
<label for="msg">Message :</label>
<textarea id="msg" name="user_message"></textarea>
</div>
</div>
</div>
</form>
<form action="/ma-page-de-traitement" method="post" id="form2">
<div class="card-body">
<input type="text" class="task-name" name="task_name" value="" placeholder="write about your task">
<div class="col-md-2" style="margin-right: -50px;">
<select class="custom-select-timer" name="update_memberProject[]">
<option selected disabled>Projects</option>
<option>1st</option>
<option>2nd</option>
<option>3rd</option>
</select>
</div>
<div class="col-md-1 bill_icon" style="border-left: lightgray 1px dotted; max-width: 150px;">
<input type="checkbox" name="bill">
<label style="margin-left: 8px;">Check Bill </label>
</div>
<div>
<label for="mail">e-mail :</label>
<input type="email" id="mail" name="user_mail">
<div>
<label for="msg">Message :</label>
<textarea id="msg" name="user_message"></textarea>
</div>
</div>
</div>
</form>
I have created a two javascript.
1.When i click the checkbox the input field is appeared and when i unchecked input field is disappeared.
2.Second is when i click the add more items the all fields are created one more time.
Now the problem is when is created a second and more items the checkbox is not working.
HTML Code:
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
<div data-role="dynamic-fields">
<div class="form-inline">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<input type="text" class="form-control" id="Name1" placeholder="Food Name" name="Name1" style="width:120%;" required data-rule-minlength="2">
<label class="sr-only" for="field-name">Name</label>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<input type="text" class="form-control" id="field-value" placeholder="Description" style="width:120%;" required>
<label class="sr-only" for="field-value">Description</label>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<select id="select1" name="select1" style="width:130%;" class="form-control" required>
<option value=""></option>
<option value="1">Food Type 1</option>
<option value="2">Food Type 2</option>
<select>
<label for="select1">Food Type</label>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" value="" class="form-control" data-role="tagsinput" placeholder="Tags" />
<label class="sr-only" for="field-tags">Tags</label>
</div>
</div>
</div>
<div class="row">
<div class="form-inline">
<div class="col-md-3">
<div class="form-group">
<input type="text" class="form-control" id="Name1" placeholder="Price" name="price" style="width:120%;" required data-rule-minlength="2">
<label class="sr-only" for="field-name">Price</label>
</div>
</div>
<div class="col-md-2">
<div class="checkbox checkbox-styled">
<label><em>Half Plate Price</em>
<input type="checkbox" value="" id="trigger2" name="question"> </label>
</div>
</div>
<div class="col-md-1">
<div id="hidden_fields2">
<input type="text" id="hidden_field2" name="hidden" placeholder="Price" class="form-control" style="width:140%;margin-left:-35px;height: 29px;margin-top: 24px;font-weight: 380;font-size: 16px;line-height: 1.5;"> </div>
</div>
<div class="col-md-3">
<div class="checkbox checkbox-styled">
<label><em>Quarter Plate Price</em>
<input type="checkbox" value="" id="trigger" name="question"> </label>
</div>
</div>
<div class="col-md-1">
<div id="hidden_fields">
<input type="text" id="hidden_field" name="hidden" placeholder="Price" class="form-control" style="width:140%;margin-left:-100px;height: 29px;margin-top: 24px;font-weight: 380;font-size: 16px;line-height: 1.5;"> </div>
</div>
</div>
</div>
<button class="btn btn-icon-toggle btn-delete" data-toggle="tooltip" data-placement="bottom" title="Delete Field" data-role="remove"> <span class="md md-delete"></span> </button>
<button class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Add More Field" data-role="add"> Add More Items </button>
</div>
<!-- /div.form-inline -->
</div>
<!-- /div[data-role="dynamic-fields"] -->
</div>
<!-- /div.col-md-12 -->
</div>
<div class="form-group">
<button type="button" name="submit" href="#" class="btn ink-reaction btn-raised btn-primary">Submit Items</button>
</div>
<!--end .form-group -->
</div>
Checkbox Js:
<script type="text/javascript">
$(function() {
// Get the form fields and hidden div
var checkbox = $("#trigger");
var hidden = $("#hidden_fields");
hidden.hide();
checkbox.change(function() {
if (checkbox.is(':checked')) {
// Show the hidden fields.
hidden.show();
} else {
// Make sure that the hidden fields are indeed
// hidden.
hidden.hide();
$("#hidden_field").val("");
}
});
});
$(function() {
var checkbox = $("#trigger2");
var hidden = $("#hidden_fields2");
hidden.hide();
checkbox.change(function() {
if (checkbox.is(':checked')) {
// Show the hidden fields.
hidden.show();
} else {
hidden.hide();
$("#hidden_field2").val("");
}
});
});
</script>
Add more items JS:
$(function() {
// Remove button
$(document).on('click', '[data-role="dynamic-fields"] > .form-inline [data-role="remove"]', function(e) {
e.preventDefault();
$(this).closest('.form-inline').remove();
});
// Add button
$(document).on('click', '[data-role="dynamic-fields"] > .form-inline [data-role="add"]', function(e) {
e.preventDefault();
var container = $(this).closest('[data-role="dynamic-fields"]');
new_field_group = container.children().filter('.form-inline:first-child').clone();
new_field_group.find('input').each(function() {
$(this).val('');
});
container.append(new_field_group);
});
});
page Screenshot:
There are a couple of problems here:
You are cloning elements and then trying to access them via the same ID (you should use class)
Your functions don't target just clicked element but any element with the selector.
You are cloning elements so you need bind the click event to a non-cloned element: e.g. via $(document).on
I've updated some of your code to demonstrate what I'm talking about. In the html, I've added classes in the trigger2 and hidden_fields2 elements and display:none style to the hidden fields so they are hidden by default.:
<div class="col-md-2">
<div class="checkbox checkbox-styled">
<label><em>Half Plate Price</em>
<input type="checkbox" value="" class="trigger2" id="trigger2" name="question"> </label>
</div>
</div>
<div class="col-md-1">
<div id="hidden_fields2" class="hidden_fields2" style="display:none;">
<input type="text" id="hidden_field2" name="hidden" placeholder="Price" class="form-control" style="width:140%;margin-left:-35px;height: 29px;margin-top: 24px;font-weight: 380;font-size: 16px;line-height: 1.5;"> </div>
</div>
In the javascript, I've changed the function to run from a $(document).on event bind and used the element class instead of the id. I've also changed the code so it only effects the checkbox you change and the closest hidden elements:
$(function() {
$(document).on('change', '.trigger2', function(){
var checkbox = $(this);
var parent = checkbox.closest('.form-inline');
var hidden = parent.find(".hidden_fields2");
hidden.hide();
if (checkbox.is(':checked')) {
// Show the hidden fields.
hidden.show();
} else {
hidden.hide();
$(".hidden_field2").val("");
}
});
});
You need to use the same logic on your other functions and inputs.
I am trying to create a form that can dynamically create multiple nested form. Here is a snippet of the html:
<ng-form name="" ng-repeat="form in forms1">
<button class="btn btn-success btn-md" ng-click="addNewSchedule(form)">
<i class="fa fa-plus-circle fa-fw"></i> Add Schedule
</button><br>
<div ng-repeat="cont in form.schedule">
<div class="row">
<div class="col-md-6">
<label>Base Date Key <span style="color: red;">*</span></label>
<select name="base_date_key" class="form-control" ng-model="cont.base_date_key" ng-options="base_key for base_key in base_date_key">
<option value="">Select Base Date Key</option>
</select>
</div>
<div class="col-md-6">
<label>Forward Backward <span style="color: red;">*</span></label>
<select name="forward_backward" class="form-control" ng-model="cont.forward_backward" ng-options="forward for forward in forward_backward">
<option value="">Select Forward Backward Option</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Schedule ID </label>
<input type="text" name="schedule_id" class="form-control" ng-model="cont.schedule_id">
</div>
</div>
</div>
<br>
<hr>
<ng-form>
<button class="btn btn-success btn-md" ng-click="">
<i class="fa fa-plus-circle fa-fw"></i> Add Schedules
</button><br>
<div class="row">
<div class="col-md-4">
<label>Schedule Amount <span style="color: red;">*</span></label>
<input type="text" name="schedule_amount" class="form-control" ng-model="">
</div>
<div class="col-md-4">
<label>Schedule Charge Code</label>
<select name="charge_code" class="form-control" ng-model="" ng-options="charge_two.key as charge_two.value for charge_two in schedule_charge_code track by charge_two.key">
<option value="">Select Schedule Charge Code</option>
</select>
</div>
<div class="col-md-4">
<label>Frequency <span style="color: red;">*</span></label>
<input type="text" name="frequency" class="form-control" ng-model="">
</div>
</div>
<br>
<div class="row">
<div class="col-md-4">
<label>Schedule Date <span style="color: red;">*</span> </label>
<input type="text"
class="form-control"
datepicker-popup="yyyy-MM-dd"
ng-model="bookloan.schedule_date"
is-open="schedule_date.open"
ng-click="schedule_date.open = true"
datepicker-options="scheduleDateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close" />
</div>
<div class="col-md-4">
<label>Schedule Type <span style="color: red;">*</span></label>
<select name="schedule_type" class="form-control" ng-model="" ng-options="schedule for schedule in schedule_type">
<option value="">Select Schedule Type</option>
</select>
</div>
</div>
</ng-form>
</ng-form>
What I have done so far, is when the user clicks the Add Schedule button it displays four input fields.Here is a snippet of the html code that is dynamically created when clicking the Add Schedule button:
<div ng-repeat="cont in form.schedule">
<div class="row">
<div class="col-md-6">
<label>Base Date Key <span style="color: red;">*</span></label>
<select name="base_date_key" class="form-control" ng-model="cont.base_date_key" ng-options="base_key for base_key in base_date_key">
<option value="">Select Base Date Key</option>
</select>
</div>
<div class="col-md-6">
<label>Forward Backward <span style="color: red;">*</span></label>
<select name="forward_backward" class="form-control" ng-model="cont.forward_backward" ng-options="forward for forward in forward_backward">
<option value="">Select Forward Backward Option</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Schedule ID </label>
<input type="text" name="schedule_id" class="form-control" ng-model="cont.schedule_id">
</div>
</div>
</div>
Also, here is the JavaScript code that is able to create the dynamic input fields:
var schedules;
$scope.forms1 = [{base_date_key: "",forward_backward: "",schedule_id:""}];
$scope.addNewSchedule = function(form1){
console.log(form1.schedule);
if(typeof form1.schedule === 'undefined') {
form1.schedule = [];
}
form1.schedule.push({name:"",base_date_key: "",forward_backward: "",schedule_id: ""});
schedules = form1.schedule;
};
Basically, how this should work is when you click the Add Schedule button which will display four form fields (which was mention above) and should also display Add Schedules Button. When clicking the Add Schedules button, it should dynamically add the Schedule Amount, Schedule Charge Code,Frequency,Schedule Date and the Schedule Type input fields.
Also the output of this in JavaScript should be like this:
[
{
schedule : [
{
base_date_key: "",
forward_backward:"",
schedule_id:"",
schedules : [
{
schedule_amount : "",
schedule_charge_code: "",
frequency: "",
schedule_date: "",
schedule_type: ""
}
]
}
]
}
]
How can I accomplish this thanks in advance.
I am trying to get the selected value from the dropdown.
I am creating the controls dynamically. I am not using ID attribute to avoid the problem of having multiple controls with the same ID/ duplicate IDs.
Here is how I am able to get the values of the textbox controls
$('.btn-success').off('click').on('click', function (e) {
e.preventDefault();
var row = $(this).closest(".row");
var lnameval = row.find("input[name='ContactLastName']").val();
});
Is it possible to get the selected value of the dropdown using the name attribute.
something like : var titleVal = row.find("input[name='ContactTitle']").val();
HTML :
<form id="formAddContact" role="form" class="form-horizontal">
<div class="modal-body">
<div id="errorMessageContainer2" class="alert alert-danger" role="alert" style="display:none;">
<ul id="messageBox2" class="list-unstyled"></ul>
</div>
#foreach (string cInfo in Model.emailList)
{
<div class="row" id="#cInfo.Replace("#","")" style="display: none;">
<div class="col-md-6">
<div class="form-group">
<div class="col-md-3 control-label">
<label>Title:</label>
</div>
<div class="col-md-3">
<select class="form-control ToCapture" name="ContactTitle">
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-3 control-label">
<label id="lblfname">First Name:</label>
</div>
<div class="col-md-3">
<input maxlength="50" name="ContactFirstName" type="text" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-3 control-label">
<label id="lbllname">Last Name:</label>
</div>
<div class="col-md-3">
<input maxlength="50" name="ContactLastName" type="text" value="">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="button" value="Add Contact" class="btn btn-success">
<input type="button" value="Cancel" class="btn btn-default">
</div>
<br/>
}
<hr />
</div>
</form>
Just a little change needed :
row.find("select[name='ContactTitle']").val();
It's not an input.