jquery select option by text not working properly - javascript

In my code there are three select elements (one for each file) with 3 or 4 options each. I have added one Apply All button on the row having first file.
If an user selects the sheet name on the first file and clicks on Apply All button, it has to select same sheets on all the files. If the sheet was missing on anyone of the files, it has to show an alert like "mismatched sheets". Here is what I tried,
<form method="post" id="sheetForm" action="#"><input type="hidden" name="csrfmiddlewaretoken" value="cR9fmhJk0hhQF0FIFscTABn3DXnXMPNPAOu2cZhSwFwRfC0FleEUJnlVsqbC2I4D">
<div class="row">
<div class="col-sm-12">
<div class="m-b-15">
</div>
</div>
</div>
<div class="row">
<div class="m-b-30 form-group">
<label class="col-md-4 control-label">Sheet Select Mode</label>
<div class="col-md-8">
<label class="radio-inline">
<input type="radio" id="inlineRadio1" value="option1" name="radioInline">By Name
</label>
<label class="radio-inline">
<input type="radio" id="inlineRadio2" value="option2" name="radioInline">By Position
</label>
</div>
</div>
<table id="tblPreview" class="table table-hover dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>File Name</th>
<th>Sheet Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="file-name">test-data-input-xls-mult-feb.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-feb.xlsx">
<td>
<select id="select1" class="form-control input-small sheet-select" name="sheet-select">
<option value="name 1" selected="selected" >Sheet1</option>
<option value="index 1">1</option>
<option value="name 2">Sheet2</option>
<option value="index 2">2</option>
</select>
</td>
<td class="open">
<button type="button" id="btnApplyAll" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Apply All Files </button>
</td>
</tr>
<tr>
<td class="file-name">test-data-input-xls-mult-jan.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-jan.xlsx">
<td>
<select id="select2" class="form-control input-small sheet-select" name="sheet-select">
<option value="name 1" selected="selected">Sheet1</option>
<option value="index 1">1</option>
<option value="name 2" >Sheet2</option>
<option value="index 2" >2</option>
</select>
</td>
<td>
</td>
</tr>
<tr>
<td class="file-name">test-data-input-xls-mult-mar.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-mar.xlsx">
<td>
<select id="select3" class="form-control input-small sheet-select" name="sheet-select">
<option value="name 1" selected="selected" >Sheet1</option>
<option value="index 1" >1</option>
<option value="name 2" >Sheet2</option>
<option value="index 2">2</option>
</select>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</form>
and the relevant js code looks like,
$('#btnApplyAll').on('click', function(){
// get the selected option of first select
var noSuchOption = false;
var selectedOption = $('#select1').find(":selected").text();
var selects = $('select[name="sheet-select"]');
$('select[name="sheet-select"] option[selected="selected"]').removeAttr('selected');
$.each(selects, function(index, select) {
var opts = $(select).find('option').filter(function(){ return this.text == selectedOption;});
if(opts.length < 1) {
noSuchOption = true;
return false;
}
});
if(noSuchOption) {
notify_long("Selected sheet doesn't exists in all files!", 'danger');
} else {
$('select[name="sheet-select"] option').filter(function(){
return this.text == selectedOption;
}).attr('selected', true);
}
});
This piece of code works on the initial stage of 3 or 4 button clicks but if I click on apply all button after choosing sheet1 on file1, sheet2 on file2, sheet1 on file3 at the middle stage, it fails to change. On that time, switching between radio buttons also fails to display the relevant option.
jsFiddle


This could meet your requirements:
$('#btnApplyAll').on('click', function(){
var noSuchOption = false;
var selectedOption = null;
$('select.sheet-select').each(function(index) {
if (noSuchOption) return;
if (index == 0) {
selectedOption = $(this).val();
return;
}
if ($(this).find('option[value="' + selectedOption + '"]').length === 0) {
noSuchOption = true;
alert("File: "+$(this).parent().prev().val() +" have not selected sheet", 'danger');
return;
}
$(this).val(selectedOption);
})
});
function toggleOptions(e) {
var toggle = $(this).attr('id') == 'inlineRadio1' ? 'name' : 'index';
$('select.sheet-select option').hide()
$('select.sheet-select').each(function() {
let optsToShow = $(this).find('option[value^="'+ toggle +'"]');
optsToShow.show();
$(this).val(optsToShow.first().attr('value'));
});
}
$('#inlineRadio1, #inlineRadio2')
.change(toggleOptions)
.first().change(); // trigger change to initialize
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="sheetForm" action="#">
<input type="hidden" name="csrfmiddlewaretoken" value="cR9fmhJk0hhQF0FIFscTABn3DXnXMPNPAOu2cZhSwFwRfC0FleEUJnlVsqbC2I4D">
<div class="row">
<div class="m-b-30 form-group">
<label class="col-md-4 control-label">Sheet Select Mode</label>
<div class="col-md-8">
<label class="radio-inline">
<input type="radio" id="inlineRadio1" value="option1" name="radioInline" checked>By Name
</label>
<label class="radio-inline">
<input type="radio" id="inlineRadio2" value="option2" name="radioInline">By Position
</label>
</div>
</div>
<table id="tblPreview" class="table table-hover dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>File Name</th>
<th>Sheet Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="file-name">test-data-input-xls-mult-feb.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-feb.xlsx">
<td>
<select id="select1" class="form-control input-small sheet-select" name="sheet-select-feb">
<option value="name 1" selected="selected" >Sheet1</option>
<option value="index 1">1</option>
<option value="name 2">Sheet2</option>
<option value="index 2">2</option>
<option value="name 3">Sheet3</option>
</select>
</td>
<td class="open">
<button type="button" id="btnApplyAll" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Apply All Files </button>
</td>
</tr>
<tr>
<td class="file-name">test-data-input-xls-mult-jan.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-jan.xlsx">
<td>
<select id="select2" class="form-control input-small sheet-select" name="sheet-select-jan">
<option value="name 1" selected="selected">Sheet1</option>
<option value="index 1">1</option>
<option value="name 2" >Sheet2</option>
<option value="index 2" >2</option>
</select>
</td>
<td>
</td>
</tr>
<tr>
<td class="file-name">test-data-input-xls-mult-mar.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-mar.xlsx">
<td>
<select id="select3" class="form-control input-small sheet-select" name="sheet-select-mar">
<option value="name 1" selected="selected" >Sheet1</option>
<option value="index 1">1</option>
<option value="name 2" >Sheet2</option>
<option value="index 2">2</option>
</select>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</form>


$(document).ready(function() {
// Default select mode of sheet
$(".rdoSelection[value='byName']").prop("checked", true);
function selectCheckboxstatus() {
var selectionMode;
$(".clsDdPosition").prop("selectedIndex", 0);
$(".clsDdName").prop("selectedIndex", 0);
selectionMode = $(".rdoSelection:checked").val();
if ("byName" === selectionMode) {
$(".clsDdPosition").hide();
$(".clsDdName").show();
} else if ("byPosition" === selectionMode) {
$(".clsDdPosition").show();
$(".clsDdName").hide();
}
}
selectCheckboxstatus();
$(".rdoSelection").on("click", function(e) {
selectCheckboxstatus();
});
$(".btnApplyAll").on("click", function(e) {
var selectedValue, selectedClass, ddSelectionMode;
ddSelectionMode = $(".rdoSelection:checked").val(); if ("byName" === ddSelectionMode) {
selectedValue = $("#ddSheetByName1").val();
selectedClass = ".clsDdName";
} else if ("byPosition" === ddSelectionMode) {
selectedValue = $("#ddSheetByPosition1").val();
selectedClass = ".clsDdPosition";
}
$(selectedClass).each(function() {
$(this).val(selectedValue);
});
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="sheetForm" action="#">
<input type="hidden" name="csrfmiddlewaretoken" value="cR9fmhJk0hhQF0FIFscTABn3DXnXMPNPAOu2cZhSwFwRfC0FleEUJnlVsqbC2I4D">
<div class="row">
<div class="col-sm-12">
<div class="m-b-15">
</div>
</div>
</div>
<div class="row">
<div class="m-b-30 form-group">
<label class="col-md-4 control-label">Sheet Select Mode</label>
<div class="col-md-8">
<label class="radio-inline">
<input type="radio" id="inlineRadio1" value="byName" name="radioInline" class="rdoSelection">By Name
</label>
<label class="radio-inline">
<input type="radio" id="inlineRadio2" value="byPosition" name="radioInline" class="rdoSelection">By Position
</label>
</div>
</div>
<table id="tblPreview" class="table table-hover dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>File Name</th>
<th>Sheet Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="file-name">test-data-input-xls-mult-feb.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-feb.xlsx">
<td>
<select id="ddSheetByName1" class="form-control input-small ddSheetByName1 clsDdName" name="sheet-select">
<option value="sheet1">Sheet1</option>
<option value="sheet2">Sheet2</option>
</select>
<select id="ddSheetByPosition1" class="form-control input-small ddSheetByPosition1 clsDdPosition" name="sheet-select">
<option value="index1">1</option>
<option value="index2">2</option>
</select>
</td>
<td class="open">
<button type="button" id="btnApplyAll" class="btn btn-default dropdown-toggle btnApplyAll" data-toggle="dropdown" aria-expanded="true">Apply All Files </button>
</td>
</tr>
<tr>
<td class="file-name">test-data-input-xls-mult-jan.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-jan.xlsx">
<td>
<select id="ddSheetByName2" class="form-control input-small ddSheetByName2 clsDdName" name="sheet-select">
<option value="sheet1">Sheet1</option>
<option value="sheet2">Sheet2</option>
</select>
<select id="ddSheetByPosition2" class="form-control input-small ddSheetByPosition2 clsDdPosition" name="sheet-select">
<option value="index1">1</option>
<option value="index2">2</option>
</select>
</td>
</tr>
<tr>
<td class="file-name">test-data-input-xls-mult-mar.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-mar.xlsx">
<td>
<select id="ddSheetByName3" class="form-control input-small ddSheetByName3 clsDdName" name="sheet-select">
<option value="sheet1">Sheet1</option>
<option value="sheet2">Sheet2</option>
</select>
<select id="ddSheetByPosition3" class="form-control input-small ddSheetByPosition3 clsDdPosition" name="sheet-select">
<option value="index1">1</option>
<option value="index2">2</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</form>

Related

Setting attributes with jQuery in dynamic PHP form - Not Working

I am stuck in setting up the attribute using jQuery The task is quite simple, I am setting the data-error attribute to field the required attribute is working perfectly fine, but data-error attribute is not working and not showing error where nothing is selected. tried many ways, but it is not working.
I want to show an error where it selects Yes and does not select priority dropdown. If it selects no then it show no error and let it submit anyway
$('input[name*=Suitability]').click(function() {
//check if radio is checked and value is Y
if ($(this).is(":checked") && $(this).val() == "Y") {
$(this).closest("tr").find(".ShowPriority").show(); //show
$(this).closest("tr").find(".Priority").attr('required', '');
$(this).closest("tr").find(".Priority").attr('data-error', 'This field is required.');
} else {
$(this).closest("tr").find('.ShowPriority').hide(); //hide
$(this).closest("tr").find(".Priority").removeAttr('required', '');
$(this).closest("tr").find(".Priority").removeAttr('data-error', 'This field is required.');
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<tr>
<td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold">Sr.No</td>
<td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold">Topic Name</td>
<td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold" collapse="2">Suitability of Business for Pre-Feasibility Study</td>
<td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold" collapse="3">Priority for Development of Pre-Feasibility Study</td>
</tr>
<tr>
<td style="min-width:50px;">
1
</td>
<td><input type="text" value="Topic 1" readonly required="required" size="58"></td>
<input type="hidden" name="FPSTopic[]" value="Data 1" />
<td style="min-width:50px;text-align:center; font-weight:bold">
<label>Yes</label><input type="radio" name="Suitability[0]" value="Y" id="YesCheck" required="required" /> <label>No</label><input type="radio" name="Suitability[0]" value="N" id="NoCheck" required="required" />
</td>
<td style="min-width:50px; color:blue; font-weight:bold" class="ShowPriority">
<select class="form-control my-1 mr-sm-2 Priority" id="Priority[]" name="Priority[]">
<option selected disabled value="">Choose Priority...</option>
<option value="1">1 - High</option>
<option value="2">2 - Intermediate</option>
<option value="3">3 - Low</option>
</select>
</td>
</tr>
<tr>
<td style="min-width:50px;">
2
</td>
<td><input type="text" value="Topic 2" readonly required="required" size="58"></td>
<input type="hidden" name="FPSTopic[]" value="Data 2" />
<td style="min-width:50px;text-align:center; font-weight:bold">
<label>Yes</label><input type="radio" name="Suitability[1]" value="Y" id="YesCheck" required="required" /> <label>No</label><input type="radio" name="Suitability[1]" value="N" id="NoCheck" required="required" />
</td>
<td style="min-width:50px; color:blue; font-weight:bold" class="ShowPriority">
<select class="form-control my-1 mr-sm-2 Priority" id="Priority[]" name="Priority[]">
<option selected disabled value="">Choose Priority...</option>
<option value="1">1 - High</option>
<option value="2">2 - Intermediate</option>
<option value="3">3 - Low</option>
</select>
</td>
</tr>
<tr>
<td style="min-width:50px;">
3
</td>
<td><input type="text" value="Topic 3" readonly required="required" size="58"></td>
<input type="hidden" name="FPSTopic[]" value="Data 3" />
<td style="min-width:50px;text-align:center; font-weight:bold">
<label>Yes</label><input type="radio" name="Suitability[2]" value="Y" id="YesCheck" required="required" /> <label>No</label><input type="radio" name="Suitability[2]" value="N" id="NoCheck" required="required" />
</td>
<td style="min-width:50px; color:blue; font-weight:bold" class="ShowPriority">
<select class="form-control my-1 mr-sm-2 Priority" id="Priority[]" name="Priority[]">
<option selected disabled value="">Choose Priority...</option>
<option value="1">1 - High</option>
<option value="2">2 - Intermediate</option>
<option value="3">3 - Low</option>
</select>
</td>
</tr>
</table>

You need to have required on the select. Then you can remove it when you want
$(function() {
$('input[name*=Suitability]').click(function() {
//check if radio is checked and value is Y
const show = $(this).is(":checked") && $(this).val() == "Y";
$(this).closest("tr").find(".ShowPriority").toggle(show); //show
$(this).closest("tr").find(".Priority").attr('required', function() { return show });
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<form>
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<tr>
<td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold">Sr.No</td>
<td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold">Topic Name</td>
<td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold" collapse="2">Suitability of Business for Pre-Feasibility Study</td>
<td style="min-width:50px; text-align:center; color:#2d57a1; font-weight:bold" collapse="3">Priority for Development of Pre-Feasibility Study</td>
</tr>
<tr>
<td style="min-width:50px;">
1
</td>
<td><input type="text" value="Topic 1" readonly required="required" size="58"></td>
<input type="hidden" name="FPSTopic[]" value="Data 1" />
<td style="min-width:50px;text-align:center; font-weight:bold">
<label>Yes</label><input type="radio" name="Suitability[0]" value="Y" id="YesCheck" required="required" /> <label>No</label><input type="radio" name="Suitability[0]" value="N" id="NoCheck" required="required" />
</td>
<td style="min-width:50px; color:blue; font-weight:bold" class="ShowPriority">
<select class="form-control my-1 mr-sm-2 Priority" id="Priority[]" name="Priority[]" required data-error="This field is required">
<option selected disabled value="">Choose Priority...</option>
<option value="1">1 - High</option>
<option value="2">2 - Intermediate</option>
<option value="3">3 - Low</option>
</select>
</td>
</tr>
<tr>
<td style="min-width:50px;">
2
</td>
<td><input type="text" value="Topic 2" readonly required="required" size="58"></td>
<input type="hidden" name="FPSTopic[]" value="Data 2" />
<td style="min-width:50px;text-align:center; font-weight:bold">
<label>Yes</label><input type="radio" name="Suitability[1]" value="Y" id="YesCheck" required="required" /> <label>No</label><input type="radio" name="Suitability[1]" value="N" id="NoCheck" required="required" />
</td>
<td style="min-width:50px; color:blue; font-weight:bold" class="ShowPriority">
<select class="form-control my-1 mr-sm-2 Priority" id="Priority[]" name="Priority[]" required data-error="This field is required" <option selected disabled value="">Choose Priority...</option>
<option value="1">1 - High</option>
<option value="2">2 - Intermediate</option>
<option value="3">3 - Low</option>
</select>
</td>
</tr>
<tr>
<td style="min-width:50px;">
3
</td>
<td><input type="text" value="Topic 3" readonly required="required" size="58"></td>
<input type="hidden" name="FPSTopic[]" value="Data 3" />
<td style="min-width:50px;text-align:center; font-weight:bold">
<label>Yes</label><input type="radio" name="Suitability[2]" value="Y" id="YesCheck" required="required" /> <label>No</label><input type="radio" name="Suitability[2]" value="N" id="NoCheck" required="required" />
</td>
<td style="min-width:50px; color:blue; font-weight:bold" class="ShowPriority">
<select class="form-control my-1 mr-sm-2 Priority" id="Priority[]" name="Priority[]" required data-error="This field is required" <option selected disabled value="">Choose Priority...</option>
<option value="1">1 - High</option>
<option value="2">2 - Intermediate</option>
<option value="3">3 - Low</option>
</select>
</td>
</tr>
</table>
<input type="submit">
</form>

How to add name attribute if checkbox is checked and if it is unchecked than remove

I added a checkbox inside a for loop, so I want only the checkbox that is checked to have a name attribute.
I tried but when I clicked on the second checkbox, the name of the first attribute is not removed.
Here is my code :
$("input:checkbox").on('click', function() {
var $box = $(this);
if ($box.is(":checked")) {
var group = "input:checkbox[name='" + $box.attr("name") + "']";
$(group).prop("checked", false);
$box.prop("checked", true);
} else {
$box.prop("checked", false);
}
});
$('select ,input[type=checkbox] ').on('change', function() {
var selector = $(this).closest("tr")//get closest tr
//get select valus
var id = selector.attr('data-id');
// var package_name = selector.find('.visa_type').val();
var processing_type = selector.find(".processing_type option:selected").text();
// alert(processing_type)
var processing_price = selector.find(".processing_type option:selected").val();
// alert(processing_price)
var add = selector.find(".package_price").text(processing_price)
var total = add.val()
var date = selector.find('.travel_date').val();
if(selector.find('input[type=checkbox]').prop("checked") == true){
//id
selector.find('.id').attr('name','id')
//visa_type
selector.find('.visa_type').attr('name','visa_type');
//processing_type
selector.find(".processing_type").attr('name','processing_type');
//traveldate
selector.find('.travel_date').attr('name','travel_date');
//total
selector.find(".package_price").attr('name','total','value',total)
}else if(selector.find('input[type=checkbox]').prop("checked") == false){
//id
selector.find('.id').attr('name','')
//visa_type
selector.find('.visa_type').attr('name','');
//processing_type
selector.find(".processing_type").attr('name','');
//traveldate
selector.find('.travel_date').attr('name','');
//total
selector.find(".package_price").attr('name','')
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-responsive" id="flip-scroll">
<thead>
<tr>
<th scope="col">Visa Option</th>
<th scope="col">Processing Type</th>
<th height="60" scope="col">Travel Date</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr class="valid-container">
<input type="hidden" class="id" value="1">
<td style="cursor:pointer;" width="200"><input type="checkbox" name="c1" class="checkbox"> <output class="visa_type" style="font-size:14.5px !important;" value="90 days single visa">90 days single visa</output></td>
<td height="52" width="158">
<select class="custom-select processing_type" required="">
<option value="15000" selected="">Normal</option>
<option value="20000">Express</option>
</select>
</td>
<td width="190" height="60">
<div class="input-group date" data-date-format="dd.mm.yyyy">
<div class="input-group mb-2">
<input type="text" class="form-control travel_date" value="dd.mm.yyyy" placeholder="dd.mm.yyyy">
<div class="input-group-text"><i class="ti-calendar"></i></div>
<div class="input-group-addon">
</div>
<div class="input-group-prepend">
</div>
</div>
</div>
</td>
<td width="166">AED <output class="package_price">15000</output>.00</td>
</tr>
<tr class="valid-container">
<input type="hidden" class="id" value="2">
<td style="cursor:pointer;" width="200"><input type="checkbox" name="c1" class="checkbox"> <output class="visa_type" style="font-size:14.5px !important;" value="30 days">30 days</output></td>
<td height="52" width="158">
<select class="custom-select processing_type" required="">
<option value="11" selected="">Normal</option>
<option value="22">Express</option>
</select>
</td>
<td width="190" height="60">
<div class="input-group date" data-date-format="dd.mm.yyyy">
<div class="input-group mb-2">
<input type="text" class="form-control travel_date" value="dd.mm.yyyy" placeholder="dd.mm.yyyy">
<div class="input-group-text"><i class="ti-calendar"></i></div>
<div class="input-group-addon">
</div>
<div class="input-group-prepend">
</div>
</div>
</div>
</td>
<td width="166">AED <output class="package_price">11</output>.00</td>
</tr>
<tr class="valid-container">
<input type="hidden" class="id" value="3">
<td style="cursor:pointer;" width="200"><input type="checkbox" name="c1" class="checkbox"> <output class="visa_type" style="font-size:14.5px !important;" value="90 days">90 days</output></td>
<td height="52" width="158">
<select class="custom-select processing_type" required="">
<option value="22" selected="">Normal</option>
<option value="33">Express</option>
</select>
</td>
<td width="190" height="60">
<div class="input-group date" data-date-format="dd.mm.yyyy">
<div class="input-group mb-2">
<input type="text" class="form-control travel_date" value="dd.mm.yyyy" placeholder="dd.mm.yyyy">
<div class="input-group-text"><i class="ti-calendar"></i></div>
<div class="input-group-addon">
</div>
<div class="input-group-prepend">
</div>
</div>
</div>
</td>
<td width="166">AED <output class="package_price">22</output>.00</td>
</tr>
</tbody>
</table>

As you need to select only one checkbox at a time you can remove checked from other checkboxes whenever any checkbox is checked using $('tbody > tr .checkbox').not(this).prop('checked',false); then you just need to loop through your trs to add or remove name attributes.
Demo Code:
$('input[type=checkbox] ').on('change', function() {
$('tbody > tr .checkbox').not(this).prop('checked',false);//remove checked from other checkbox
//loop thrugh trs
$("tbody > tr").each(function() {
//add or remove name attribute
var selector = $(this)
if (selector.find('input[type=checkbox]').prop("checked") == true) {
selector.find('.visa_type').attr('name', 'visa_type');
selector.find(".processing_type").attr('name', 'processing_type');
selector.find('.travel_date').attr('name', 'travel_date');
} else if (selector.find('input[type=checkbox]').prop("checked") == false) {
selector.find('.visa_type').attr('name', '');
selector.find(".processing_type").attr('name', '');
selector.find('.travel_date').attr('name', '');
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-responsive" id="flip-scroll">
<thead>
<tr>
<th scope="col">Visa Option</th>
<th scope="col">Processing Type</th>
<th height="60" scope="col">Travel Date</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr class="valid-container">
<input type="hidden" class="id" value="1">
<td style="cursor:pointer;" width="200"><input type="checkbox" name="c1" class="checkbox"> <output class="visa_type" style="font-size:14.5px !important;" value="90 days single visa">90 days single visa</output></td>
<td height="52" width="158">
<select class="custom-select processing_type" required="">
<option value="15000" selected="">Normal</option>
<option value="20000">Express</option>
</select>
</td>
<td width="190" height="60">
<div class="input-group date" data-date-format="dd.mm.yyyy">
<div class="input-group mb-2">
<input type="text" class="form-control travel_date" value="dd.mm.yyyy" placeholder="dd.mm.yyyy">
<div class="input-group-text"><i class="ti-calendar"></i></div>
<div class="input-group-addon">
</div>
<div class="input-group-prepend">
</div>
</div>
</div>
</td>
<td width="166">AED <output class="package_price">15000</output>.00</td>
</tr>
<tr class="valid-container">
<input type="hidden" class="id" value="2">
<td style="cursor:pointer;" width="200"><input type="checkbox" name="c1" class="checkbox"> <output class="visa_type" style="font-size:14.5px !important;" value="30 days">30 days</output></td>
<td height="52" width="158">
<select class="custom-select processing_type" required="">
<option value="11" selected="">Normal</option>
<option value="22">Express</option>
</select>
</td>
<td width="190" height="60">
<div class="input-group date" data-date-format="dd.mm.yyyy">
<div class="input-group mb-2">
<input type="text" class="form-control travel_date" value="dd.mm.yyyy" placeholder="dd.mm.yyyy">
<div class="input-group-text"><i class="ti-calendar"></i></div>
<div class="input-group-addon">
</div>
<div class="input-group-prepend">
</div>
</div>
</div>
</td>
<td width="166">AED <output class="package_price">11</output>.00</td>
</tr>
<tr class="valid-container">
<input type="hidden" class="id" value="3">
<td style="cursor:pointer;" width="200"><input type="checkbox" name="c1" class="checkbox"> <output class="visa_type" style="font-size:14.5px !important;" value="90 days">90 days</output></td>
<td height="52" width="158">
<select class="custom-select processing_type" required="">
<option value="22" selected="">Normal</option>
<option value="33">Express</option>
</select>
</td>
<td width="190" height="60">
<div class="input-group date" data-date-format="dd.mm.yyyy">
<div class="input-group mb-2">
<input type="text" class="form-control travel_date" value="dd.mm.yyyy" placeholder="dd.mm.yyyy">
<div class="input-group-text"><i class="ti-calendar"></i></div>
<div class="input-group-addon">
</div>
<div class="input-group-prepend">
</div>
</div>
</div>
</td>
<td width="166">AED <output class="package_price">22</output>.00</td>
</tr>
</tbody>
</table>

Select element comes clear after getting data

I have an HTML table which has "Mortgage Type" column as an editable field where the user can select a value in the dropdown and enter some text in the input field available.
Default value shown in the Mortgage Type dropdown list is "Auto". When the user enters some data in any rows (ex.,1st row, and 4th row) and clicks on the submit button, I'm clearing the fields and displaying the data which I got from backend. It works as expected.
Issue I'm facing is when user click on GetData button. I'm clearing the input entered by user and showing the data which I got from the backend, but it is clearing
the default value, shown in the Mortgage Type dropdown, which should be "Auto" for all the fields except for the values which I got from the database(var mortageType - shown in the first two rows of the table..)
$('.mortgageType').val(''); //clearing all the dropdown values and showing blank as the code suggests..
Another issue is word-wrap: break-word; is not working for the columns. I don't want to extend the column size when the value is long, instead, I want to do word-wrap: break-word;. But in my code when the user clicks on the GetData button, the value in the Status field for the first row is long and it is extending the column.
I tried to use the below CSS in the style attribute which is not working.
<div class="cloneX10 indField" id="status2" style="word-wrap: break-word;"></div>
Demo code (also on Plnkr.co):
function submitData() {
var flag = true;
$('#loanTable input[type="text"]').val('');
$('.mortgageType').val(''); //to clear the dropdown value
$('.order').val('');
var enablingFlag = true;
if (flag) {
//values from backend
var mortageType = [{
"code": "Home",
"description": "Home"
}, {
"code": "Car",
"description": "Car"
}];
var loanNum = [{
"code": "23432",
"description": "23432"
}, {
"code": "12123",
"description": "12123"
}];
var status = [{
"code": "Approved",
"description": "Approved"
}, {
"code": "Pending, need more documents",
"description": "Pending, need more documents"
}];
var j = 0;
//iterate and show the jsonData in the table2 when user click on submit button
for (var i = 0; i < mortageType.length; i++) {
j = j + 1;
document.getElementById("mortageType" + j).value = mortageType[i].code;
document.getElementById("loanNum" + j).innerText = loanNum[i].code;
document.getElementById("status" + j).innerText = status[i].code;
if (loanNum[i].code == null || mortageType[i].code == null || status[i].code == null) {
console.log("row has null value");
$('#status' + j).parent().parent().css({
'border': 'red'
});
}
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="loanTable" id="loanTable" border="1">
<tbody>
<tr>
<th> <label for="show"><span name="3765" maxlength="1"class="message">Year</span></label> </th>
<th> <label for="show"><span name="568" maxlength="1" class="message">Mortgage Type</span>
<span name="496" maxlength="1" class="message"></span>
</label>
</th>
<th> <label for="show"><span name="3702" maxlength="1" class="message">Loan Num</span></label> </th>
<th> <label for="show"><span name="2366" maxlength="1" class="message">Status</span></label> </th>
<th> <label for="show"><span name="179" maxlength="1" class="message">Comments</span></label> </th>
</tr>
<tr>
<td>
<label for="show" class="ddownlabels"></label>
<select id="year" name="year" disabled>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</td>
<td>
<div class="cloneX10 indField">
<label for="show" class="ddownlabels"></label>
<select id="mortageType1" name="mortageType1" class="mortgageType">
<option value="Auto">Auto</option>
<option value="Home">Home</option>
<option value="Car">Car</option>
</select>
<input name="ord1" id="ord1" class="order">
</div>
</td>
<td>
<div class="cloneX10 indField" id="loanNum1"></div>
</td>
<td>
<div class="cloneX10 indField" id="status1" style="word-wrap: break-word;"></div>
</td>
<td>
<div class="cloneX10 indField" id="comments1"></div>
</td>
</tr>
<!--Second row-->
<tr>
<td>
<label for="show" class="ddownlabels"></label>
<select id="year" name="year" disabled>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</td>
<td>
<div class="cloneX10 indField">
<label for="show" class="ddownlabels"></label>
<select id="mortageType2" name="mortageType2" class="mortgageType">
<option value="Auto">Auto</option>
<option value="Home">Home</option>
<option value="Car">Car</option>
</select>
<input name="ord2" id="ord2" class="order">
</div>
</td>
<td>
<div class="cloneX10 indField" id="loanNum2"></div>
</td>
<td>
<div class="cloneX10 indField" id="status2" style="word-wrap: break-word;"></div>
</td>
<td>
<div class="cloneX10 indField" id="comments2"></div>
</td>
</tr>
<!--Third Row-->
<tr>
<td>
<label for="show" class="ddownlabels"></label>
<select id="year" name="year" disabled>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</td>
<td>
<div class="cloneX10 indField">
<label for="show" class="ddownlabels"></label>
<select id="mortageType3" name="mortageType3" class="mortgageType">
<option value="Auto">Auto</option>
<option value="Home">Home</option>
<option value="Car">Car</option>
</select>
<input name="ord3" id="ord3" class="order">
</div>
</td>
<td>
<div class="cloneX10 indField" id="loanNum3"></div>
</td>
<td>
<div class="cloneX10 indField" id="status3" style="word-wrap: break-word;"></div>
</td>
<td>
<div class="cloneX10 indField" id="comments3"></div>
</td>
</tr>
<!--Fourth Row-->
<tr>
<td>
<label for="show" class="ddownlabels"></label>
<select id="year" name="year" disabled>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</td>
<td>
<div class="cloneX10 indField">
<label for="show" class="ddownlabels"></label>
<select id="mortageType3" name="mortageType4" class="mortgageType">
<option value="Auto">Auto</option>
<option value="Home">Home</option>
<option value="Car">Car</option>
</select>
<input name="ord4" id="ord4" class="order">
</div>
</td>
<td>
<div class="cloneX10 indField" id="loanNum4"></div>
</td>
<td>
<div class="cloneX10 indField" id="status4"></div>
</td>
<td>
<div class="cloneX10 indField" id="comments4"></div>
</td>
</tr>
<!--Fifth Row-->
<tr>
<td>
<label for="show" class="ddownlabels"></label>
<select id="year" name="year" disabled>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</td>
<td>
<div class="cloneX10 indField">
<label for="show" class="ddownlabels"></label>
<select id="mortageType3" name="mortageType5" class="mortgageType">
<option value="Auto">Auto</option>
<option value="Home">Home</option>
<option value="Car">Car</option>
</select>
<input name="ord5" id="ord5" class="order">
</div>
</td>
<td>
<div class="cloneX10 indField" id="loanNum5"></div>
</td>
<td>
<div class="cloneX10 indField" id="status5"></div>
</td>
<td>
<div class="cloneX10 indField" id="comments5"></div>
</td>
</tr>
</tbody>
</table><br>
<input type="submit" value="GetData" onclick="submitData()">

Instead of clearing that, set it as "Auto" default
replace $('.mortgageType').val(''); with $('.mortgageType').val('Auto');
You can use style="max-width:100px;" for those th tags

There is no need to clear value of all select elements. So a simple solution is comment this line of code:
JS:
//$('.mortgageType').val('');
// or something simple like line below
$('.mortgageType').val('Auto'); //So you'll set "Auto" to all selet elements and in the loop you'll change them based on what database returns.
And to preventing extending column you have a solution like below:
HTML/CSS:
<table class="loanTable" id="loanTable" border="1" style="table-layout:fixed;">
...
<td><div class="cloneX10 indField" id="status2" style="white-space: nowrap;overflow: hidden;"></div></td>
Or you can use overflow-x: scroll; instead of overflow: hidden; to have a scrollbar to reading extended content. Check this link out: Plnkr.co
P.S. If you have any further questions, or you think this is not your answer just let me in comment sections down below.
Another solution for preventing columns to be extended, answered in this thread:
Display limit for table column

How to insert data in database without html form tag

This is my design...
This is my html code...
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
<div>
<table width="1118" border="0" cellspacing="5">
<tr>
<th width="243" scope="col"><table width="1118" border="0" cellspacing="5">
<tr>
<th width="261" height="27" scope="col"><h4 align="left">Dealer Name:
<input type="text" name="dname" id="dname" />
</h4>
</th>
<th width="243" scope="col">Location:
<input type="text" name="location" id="location" /></th>
<th width="334" scope="col"><div align="left">Purchasing Date:
<select name="day" id="day">
<option value="-1">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="month" id="month">
<option value="-1">Month</option>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
<option value="Jun">Jun</option>
<option value="Jul">Jul</option>
<option value="Aug">Aug</option>
<option value="Sep">Sep</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
<select name="year" id="year">
<option value="Year" selected="selected">Year</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
</select>
</div></th>
<th width="247" scope="col">Entry Date:
<input type="text" name="entry" id="entry" value="<?php echo date("d-M-Y")?>"/>
</th>
</tr>
</table></th>
</tr>
</table>
</div>
<div align="center"></div>
<div align="left">
<table width="1177" border="1" cellspacing="5" id="add" class="add">
<tr>
<td width="71" height="42"><button class="add" name="add">Add Rows</button></td>
<td width="144"><div align="center"><strong>Product Name</strong></div></td>
<td width="146"><div align="center"><strong>Brand Name</strong></div></td>
<td width="146"><div align="center"><strong>Model No</strong></div></td>
<td width="146"><div align="center"><strong>Dealer Price</strong> (DP)</div></td>
<td width="146"><div align="center"><strong>Quantity (Q)</strong></div></td>
<td width="146"><div align="center"> <strong>Total Price</strong> (TP) </div>
<div align="center">
(TP = DP x Q)
</div>
</td>
<td width="153"><div align="center"><strong>Quality</strong></div></td>
<td><div align="center"><strong>Insert Image</strong></div></td>
</tr>
<tbody>
<tr class="prototype">
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="images"/></td>
</tr>
<tr>
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="tp" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="images"/></td>
</tr>
<tr>
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="tp" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="images"/></td>
</tr>
<tr>
<td height="26"><button class="remove">Remove</button></td>
<td><input type="text" name="product[]" id="product" /></td>
<td><input type="text" name="brand[]" id="brand" /></td>
<td><input type="text" name="model[]" id="model" /></td>
<td><input type="text" name="dprice[]" class="price"/></td>
<td><input type="text" name="quantity[]" class="quantity"/></td>
<td><input name="txt[]" type="text" class="txt" id="tp" /></td>
<td><input type="text" name="quality[]" id="quality"/></td>
<td><input name="images[]" type="file" id="images"/></td>
</tr>
</tbody>
</table>
</div>
<table width="1206" border="0">
<tr>
<td width="847"> </td>
<td width="129"><input name="btn" type="submit" id="btn" value="Sum of Total Price" /></td>
<td width="216"><input type="text" id="sum" name="sum" onKeyUp="calculate();" /></td>
</tr>
<tr>
<td> </td>
<td colspan="2">Transport Price:
<input type="text" name="transport" id="transport" onKeyUp="calculate();" /></td>
</tr>
<tr>
<td> </td>
<td colspan="2">Grand Total:
<input type="text" name="grandt" id="grandt" /></td>
</tr>
</table>
<div>
<div align="center"><br /><input name="Save" type="submit" value="Save"/>
</div>
</div>
</form>
This is javascript code....
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#add').on('keyup', '.price', calTotal)
.on('keyup', '.quantity', calTotal);
// find the value and calculate it
function calTotal() {
var $row = $(this).closest('tr'),
price = $row.find('.price').val(),
quantity = $row.find('.quantity').val(),
total = price * quantity;
// change the value in total
$row.find('.txt').val(total)
}
});
</script>
<script type="text/javascript">
$(document).ready(function () {
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function () {
// $(this).keyup(function () {
$("#btn").click(function () {
calculateSum();
// $("#sum").show();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function () {
//add only if the value is number
if (!isNaN(this.value) && this.value.length> 0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").val(sum.toFixed(2));
}
</script>
<script type="text/javascript">
$(document).ready(function () {
var id = 0;
// Add button functionality
$("table.add button.add").click(function () {
id++;
var master = $(this).parents("table.add");
// Get a new row based on the prototype row
var prot = master.find(".prototype").clone();
prot.attr("class", "")
// prot.find(".id").attr("value", id);
master.find("tbody").append(prot);
});
// Remove button functionality
$("table.add button.remove").live("click", function () {
$(this).parents("tr").remove();
});
$("table.add button.addColumn").click(function () {
var columnName = window.prompt("Enter Column name", "");
$('table').find('th').last().before('<th>'+columnName+'</th>')
$('table').find('tr').each(function () {
$(this).find('td').eq(0).after('<td></td>');
});
});
});
</script>
<script type="text/javascript">
function calculate()
{
var total = document.getElementById('sum').value;
var transport = document.getElementById('transport').value;
if(total=="")
{
total=0;
}
if(transport=="")
{
transport=0;
}
var sum = parseFloat(total)+ parseFloat(transport);
//sum.value= parseFloat(purchase.value)+ parseFloat(transport.value);
if (!isNaN(sum)) {
document.getElementById('grandt').value = sum;
}
}
</script>
This is my php code..
<?php
if(isset($_POST['Save']))
{
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("storedb", $con);
$day=$_POST['day'];
$month=$_POST['month'];
$year=$_POST['year'];
$date=$day."-".$month."-".$year;
$entry=$_POST['entry'];
foreach($_POST['product'] as $row=>$pro)
{
$folder = "image/";
if($pro!="")
{
$product=$pro;
$brand=$_POST['brand'][$row];
$model=$_POST['model'][$row];
$dprice=$_POST['dprice'][$row];
$quantity=$_POST['quantity'][$row];
$tp=$_POST['txt'][$row];
$quality=$_POST['quality'][$row];
$tmp_name = $_FILES["images"]["tmp_name"][$row];
$name = $_FILES["images"]["name"][$row];
move_uploaded_file($tmp_name, "$folder".$name);
$entry=$_POST['entry'][$row];
//$sum=$_POST['sum'][$row];
//$transport=$_POST['transport'][$row];
//$grand=$_POST['grandt'][$row];
//$image=$_POST['image'][$row];
$sql=mysql_query("INSERT INTO additem (Item_id,Product,Brand,Model,Dprice,Quantity,Tprice,Quality,image) VALUES ('','$product','$brand','$model','$dprice','$quantity','$tp','$quality','$name')");
}
}
if (mysql_query($sql,$con))
{
//die('Error: ' . mysql_error());
echo "1 record added";
}
}
?>
In HTML using form tag clicking save button insert all data into database.But add rows button sum of total button cannot work due to form tag.click those button the page will refreshed. How to solve this problem

set button type as "button" instead of submit...
<input name="btn" type="button" id="btn" value="Sum of Total Price" />

ok i am clarifiying again. this is the code.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>My jQuery Ajax test</title>
<style type="text/css">
#mybox {
width: 300px;
height: 250px;
border: 1px solid #999;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function myCall() {
var request = $.ajax({
url: "ajax.php",
type: "GET",
dataType: "html"
});
request.done(function(msg) {
$("#mybox").html(msg);
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
}
</script>
</head>
<body>
The following div will be updated after the call:<br />
<div id="mybox">
</div>
<input type="button" value="Update" onclick="myCall()" />
</body>
</html>

Set input type as button not submit
<input name="btn" type="button" id="btn" value="Sum of Total Price" />

try thse codes and edit them the way you want
And let me know where you need an help on kitisaac2001#yahoo.fr
<?php
$cn=mysql_connect('localhost','root','yourpassword');
if ($cn)
{
mysql_select_db('inv',$cn);
}
if(isset($_POST['save']))
{
$name=$_POST['name'];
$location=$_POST['location'];
mysql_query("insert into tbl_order(name,location) VALUES ('$name','$location')");
$id=mysql_insert_id();
for($i = 0; $i<count($_POST['productname']); $i++)
{
mysql_query("INSERT INTO tbl_orderdetail
SET
order_id = '{$id}',
product_name = '{$_POST['productname'][$i]}',
quantity = '{$_POST['quantity'][$i]}',
price = '{$_POST['price'][$i]}',
discount = '{$_POST['discount'][$i]}',
amount = '{$_POST['amount'][$i]}'");
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Invoice</title>
<script src="https://code.jquery.com/jquery-1.12.0.min.js">
</script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$('#add').click(function()
{
addnewrow();
});
$('body').delegate('.remove','click',function()
{
$(this).parent().parent().remove();
});
$('body').delegate('.quantity,.price,.discount','keyup',function()
{
var tr=$(this).parent().parent();
var qty=tr.find('.quantity').val();
var price=tr.find('.price').val();
var dis=tr.find('.discount').val();
var amt =(qty * price)-(qty * price *dis)/100;
tr.find('.amount').val(amt);
total();
});
});
function total()
{
var t=0;
$('.amount').each(function(i,e)
{
var amt =$(this).val()-0;
t+=amt;
});
$('.total').html(t);
}
function addnewrow()
{
var n=($('.detail tr').length-0)+1;
var tr = '<tr>'+'<td class="no">'+n+'</td>'+'<td><input type="text" class="form-control productname" name="productname[]"></td>'+'<td><input type="text" class="form-control quantity" name="quantity[]"></td>'+'<td><input type="text" class="form-control price" name="price[]"></td>'+'<td><input type="text" class="form-control discount" name="discount[]"></td>'+'<td><input type="text" class="form-control amount" name="amount[]"></td>'+'<td><a href="#" class="remove">Delete</td>'+'</tr>';
$('.detail').append(tr);
}
</script>
</head>
<body>
<form action="" method="POST">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">Invoice </h3>
</div>
<div class="box-body">
<div class="form-group">
ReceiptName
<input type="text" name="name" class="form-control">
</div>
<div class="form-group">
Location
<input type="text" name="location" class="form-control">
</div>
</div>
<input type="submit" class="btn btn-primary" name="save" value="Save Record">
</div><br/>
<table class="table table-bordered table-hover">
<thead>
<th>No</th>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Discount</th>
<th>Amount</th>
<th><input type="button" value="+" id="add" class="btn btn-primary"></th>
</thead>
<tbody class="detail">
<tr>
<td class="no">1</td>
<td><input type="text" class="form-control productname" name="productname[]"></td>
<td><input type="text" class="form-control quantity" name="quantity[]"></td>
<td><input type="text" class="form-control price" name="price[]"></td>
<td><input type="text" class="form-control discount" name="discount[]"></td>
<td><input type="text" class="form-control amount" name="amount[]"></td>
<td><a href="#" class="remove">Delete</td>
</tr>
</tbody>
<tfoot>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th style="text-align:center;" class="total">0<b></b></th>
</tfoot>
</table>
</form>
</body>
</html>
CREATE TABLE tbl_orderdetail (
order_id int,
product_name varchar(255),
quantity varchar(255),
price varchar(255),
discount varchar(255),
amount varchar(255)
)
CREATE TABLE tbl_order (
name varchar(255),
location varchar(255)
)

Hide input boxes based on drop down selection

I want a drop down menu at the top of the page to determine how many boxes are then showing on the page.
If the user selects 1, only 1 table shows
If the user selects 2, 2 tables show
I have added the code so hopefully it makes more sense
<body>
<p>Please select number of puppies:</p>
<p>
<select>
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<form id="form1" name="form1" method="POST" action="<%=MM_editAction%>">
<p>Puppy 1: </p>
<p> </p>
<table width="330" border="0">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName1" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour1" /></td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex1" id="PuppySex1">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip1" id="PuppyMicrochip1">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td> </td>
</tr>
</table>
<p>Puppy 2:</p>
<table width="330" border="0">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName2" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour2" /></td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex2" id="PuppySex2">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip2" id="select2">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td>
<input name="PuppyMicrochipNum2" type="text"
id="PuppyMicrochipNum2" />
</td>
</tr>
</table>

jsFiddle: http://jsfiddle.net/h3XLP/
very common to get jQuery answers but it's really not that comprehensive with standalone JavaScript
note: add the attribute style="display:none;" to the second table
var select = document.getElementsByTagName("select")[0];
select.onchange=function(){
if(select.value=="2"){
document.getElementsByTagName("table")[1].style.display="inline";
}else{
document.getElementsByTagName("table")[1].style.display="none";
}
}
however you should alternatively use below, as you may have more select and table elements in your document
http://jsfiddle.net/h3XLP/1/
var select = document.getElementById("selectnopuppies");
select.onchange=function(){
if(select.value=="2"){
document.getElementById("secondpuppytable").style.display="inline";
}else{
document.getElementById("secondpuppytable").style.display="none";
}
}
<p>Please select number of puppies:</p>
<p>
<select id="selectnopuppies">
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<form id="form1" name="form1" method="POST" action="<%=MM_editAction%>">
<p>Puppy 1:</p>
<p> </p>
<table width="330" border="0">
<tr>
<td>Name:</td>
<td>
<input type="text" name="PuppyName1" />
</td>
</tr>
<tr>
<td>Colour:</td>
<td>
<input type="text" name="PuppyColour1" />
</td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex1" id="PuppySex1">
<option value=" "></option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip1" id="PuppyMicrochip1">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td>
<p>Microchip/DNA Number:</p>
</td>
<td> </td>
</tr>
</table>
<div id="secondpuppytable" style="display:none;">
<p>Puppy 2:</p>
<table width="330" border="0">
<tr>
<td>Name:</td>
<td>
<input type="text" name="PuppyName2" />
</td>
</tr>
<tr>
<td>Colour:</td>
<td>
<input type="text" name="PuppyColour2" />
</td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex2" id="PuppySex2">
<option value=" "></option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip2" id="select2">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td>
<p>Microchip/DNA Number:</p>
</td>
<td>
<input name="PuppyMicrochipNum2" type="text" id="PuppyMicrochipNum2" />
</td>
</tr>
</table>
</div>

Given that option 1 should show table 1, option 2 show table 1 and 2, and so on.
Try this:
$('#dropdown').change(function(){
var dropdown = $(this);
var tables = $('.tableSelector');
tables.hide();
tables.slice(0,dropdown.val()).show();
});
Working jsfiddle: http://jsfiddle.net/v5TTz/
I have tagged all tables with a css class "tableSelector", then everytime the dropdown changes value, I show the number of tables corresponding to the current value of the dropdownlist. This solution requires the tables to be positioned in the correct order in the DOM.
However, in my ears, this sounds like a case for templates, like jQuery templates or Hoganjs.

I have modified your code... It's working now... try this...
<html>
<head>
<title>Sample</title>
<script type="text/javascript">
function go()
{
var Count = document.getElementById("selCount").options[document.getElementById("selCount").selectedIndex].value;
if(Count==1)
{
document.getElementById("Puppy1").style.display = '';
document.getElementById("Puppy2").style.display = 'none';
}
if(Count==2)
{
document.getElementById("Puppy1").style.display = '';
document.getElementById("Puppy2").style.display = '';
}
}
</script>
</head>
<body>
<p>Please select number of puppies:</p>
<p>
<select onchange = "go()" id="selCount">
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<form id="form1" name="form1" method="POST" action="<%=MM_editAction%>">
<p>Puppy 1: </p>
<p> </p>
<table width="330" border="0" id="Puppy1">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName1" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour1" /></td>
</tr>
<tr>
<td>Sex:</td>
<td><select name="PuppySex1" id="PuppySex1">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td><select name="PuppyMicrochip1" id="PuppyMicrochip1">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select></td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td> </td>
</tr>
</table>
<p>Puppy 2:</p>
<table width="330" border="0" id="Puppy2">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName2" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour2" /></td>
</tr>
<tr>
<td>Sex:</td>
<td><select name="PuppySex2" id="PuppySex2">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td><select name="PuppyMicrochip2" id="select2">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select></td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td><input name="PuppyMicrochipNum2" type="text" id="PuppyMicrochipNum2" /></td>
</tr>
</table>
</body>
</html>

You can do something like this:
When you select 1st option, it will show you firSt table and for 2nd it will show you both tables.
$("table").hide();
$("select option").change(function(){
Val = $(this).val();
If(Val ==1) {
$("table")[0].show();
$("table")[1].hide();
} else {
$("table").show();
}
});

A little bit of javascript:
<script>
function showtable(o){
if(o.value==2){document.getElementById('table2').style.display='block';}
else{document.getElementById('table2').style.display='none';}
}
</script>
<p>Please select number of puppies:</p>
<p>
<select onchange="showtable(this)">
<option selected value="1">1</option>
<option value="2">2</option>
</select>
<table id='table2' width="330" border="0" style="display:none">

HTML Changes
<select onchange="showForm(this.options[this.selectedIndex]);">
Why it's needed ?
For listening the select box value change .
<table width="330" border="0" class="puppy">
Added class=puppy attribute for readability . For hiding table element will be generic and error prone.
Javascript Changes
function showForm(option){
//option user has selected.
var val = parseInt(option.value);
//form elements in a document.
var forms = document.getElementsByClassName("puppy");
for(var i=0,total=forms.length;i<total;i++){
var form = forms[i];
var display = form.style.display;
if(i<val && display == "none"){
form.style.display = "block";
}else if(i >= val && display != "none"){
form.style.display = "none";
}
}
}
Live Demo # http://jsfiddle.net/A3eFz/31/

Please try with following example, hope this helps.
<label for ="amount">Please select number of parameter</label><br/>
<select name="amount" id="amount" title="amount">
<option value="00">0</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
</select>
<form name = "AddQuery" id = "AddQuery" method = "POST" action = "submit.php">
<div id="groups">
</div>
<div id="other">
</div>
<input type="submit" value="Submit">
</form>
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#amount').change(function(){
$('#groups').empty();
var group = '';
var number = parseInt($(this).val());
for(var i=0;i<number;i++){
group += '<div id="group">' +
'<label for="name['+i+']">Name'+i+'</label> '+
'<input name="name'+i+'" type="text" id="name'+i+'" value="">' +
'<label for="type['+i+']">Type'+i+'</label> '+
'<input name="type'+i+'" type="text" id="type'+i+'" value="">' +
'</div>';
}
$('#groups').append(group);
$('#other').empty();
var other = '';
other +='<div id="other"><input type="hidden" name="n" id ="n" value="'+number+'"/></div>';
$('#other').append(other);
});
});
</script>

Categories

Resources