I need your help. Trying to build form in php + jquery, and have trouble with some functionality.
For example, I have this code:
<form action="" method="post" id="multiform">
<!-- Product selector -->
<table class="multi" id="MultiRow">
<tr><td>
<select name="store[product][]" required>
<option value="" selected="selected">-Product-</option>
<option value="430">OCTA</option>
<option value="440">KASKO</option>
<option value="19041">TRAVEL</option>
<option value="19063">HOUSEHOLD</option>
</select>
</td>
<!-- /Product selector -->
</table>
<input type="submit" value="ok">
How can I do that, If selected value is 430 or 440, then at right side inserts
<td><input type="text" id="motor[]" name="multiarray[vehicle_type][]"></td>
<td><input type="text" id="deadline[]" name="multiarray[end_date][]"></td>
<td><a class="del" href="#">DELETE BUTTON</a></td>
If selected value is 19041 or 19063, then inserts
<td><input type="text" id="location[]" name="multiarray[travel_location][]"></td>
<td><a class="del" href="#">DELETE BUTTON</a></td>
I need that there also will be +Add button and -delete button where i write:
<a class="del" href="#">DELETE BUTTON</a>
But for datepicker functionality I need that id for inputs will be unique, for ex: id="location1" , at next added row id="location2".
JsFiddle
$("#productselect").change(function(){
var select = document.getElementById("productselect");
var selecedproduct = select.options[select.selectedIndex].value;
$("tr[id^='forselect']").remove();
if(selecedproduct==430 || selecedproduct==440 )
{
var html ='<tr id="forselect"><td><input type="text" id="motor[]" name="multiarray[vehicle_type][]"></td>';
html +='<td><input type="text" id="deadline[]" name="multiarray[end_date][]"></td>';
html +='<td><a class="del" OnClick="removetags();return false;" href="#">DELETE BUTTON</a></td></tr>';
html +='<tr id="forselect"><td>add datepicker </td></tr>';
$("#MultiRow").append(html);
}
else if(selecedproduct==19041 || selecedproduct==19063 )
{
var html ='<tr id="forselect"><td><input type="text" id="location[]" name="multiarray[travel_location][]"></td>';
html +=' <td><a class="del" OnClick="removetags();return false;" href="#">DELETE BUTTON</a></td></tr>';
html +='<tr id="forselect"><td>add datepicker </td></tr>';
$("#MultiRow").append(html);
}
});
deldatepicker = function deldatepicker(id)
{
$("#remove"+id).remove();
}
adddatepicker = function adddatepicker()
{
var N = $("input[id^='location']").length;N++;
var html ='<tr id="remove'+N+'"><td><input type="text"id="location'+N+'" placeholder="date"></td><td><button OnClick="deldatepicker('+N+')">delete datepicker </button> </td></tr>';
$("#MultiRow").append(html);
$("#location"+N).datepicker();
}
removetags = function removetags()
{
$("tr[id^='forselect']").remove();
}
It may help you for you work.
Here it is.
Since you need the ids to be unique I have used Date.now() and then object.now.getUTCMilliseconds(). That will ensure that event when you delete and reinsert another row with same rowIndex it will not crash. Then the rest is trivial!
jQuery(document).ready(function(){
jQuery('select').on('change', function(e){
var tr = jQuery(this).closest('tr').get(0);
var cell = tr.insertCell(1);
var now = Date.now();
switch(jQuery('option:selected', this).val()){
case '430':
case '440':
cell.innerHTML = "<td><input type='text' id='motor[]' name='multiarray[vehicle_type][]'></td><td><input type='text' id='deadline[]' name='multiarray[end_date][]'></td><td><a class='del' href='#'>DELETE BUTTON</a></td><td><a class='del' href='#'>DELETE BUTTON</a></td>";
break;
cell.innerHTMl = "<td><input type='text' id='location"+now.getUTCMilliseconds()+"[]' name='multiarray[travel_location][]'></td><td><a class='del' href='#'>DELETE BUTTON</a></td><td><a class='del' href='#'>DELETE BUTTON</a></td>";
case '19041':
case '19063':
break;
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<form action="" method="post" id="multiform">
<!-- Product selector -->
<table class="multi" id="MultiRow">
<tr><td>
<select name="store[product][]" required>
<option value="" selected="selected">-Product-</option>
<option value="430">OCTA</option>
<option value="440">KASKO</option>
<option value="19041">TRAVEL</option>
<option value="19063">HOUSEHOLD</option>
</select>
</td>
<!-- /Product selector -->
</table>
<input type="submit" value="ok">
Related
I have a table where I have multiple rows, one of the columns being an input for the charge. The html is below:
<tbody>
#foreach($shipment_details as $sd)
<tr style="height:40px" tr id="row{{$sd->id}}">
<td style="width:8%;text-align:center;">
<input type="text" id="piecesNumber" class="form-control" placeholder="No. Pieces" required name="shipment_details[{{$sd->id}}][piecesNumber]" value="{{$sd->pieces_number}}">
</td>
<td style="width:16%;text-align:center;">
<select id="pieces_type" class="form-control full-width" required name="shipment_details[{{$sd->id}}][piecesType]">
#foreach($cPiecetypes as $cPt)
<option value="{{$cPt->id}}"
#if ($sd->pieces_type == $cPt->id) selected="selected"
#endif>{{$cPt->label}}</option>
#endforeach
</select>
</td>
<td>
<select id="pieces_type" class="form-control full-width" required name="shipment_details[{{$sd->id}}][rateType]">
#foreach($cRatetypes as $cRt)
<option value="{{$cRt->id}}"
#if ($sd->rate_type == $cRt->id) selected="selected"
#endif>{{$cRt->label}}</option>
#endforeach
</select>
</td>
<td style="width:16.5%;text-align:center;">
<input type="text" id="weight" class="form-control" placeholder="Weight" required name="shipment_details[{{$sd->id}}][weight]" value="{{$sd->weight}}">
</td>
<td style="width:16.5%;text-align:center;">
<select id="hazmat" class="form-control full-width" required name="shipment_details[{{$sd->id}}][hazmat]">
<option value="0"
#if ($sd->hazmat = 0) selected="selected"
#endif>No</option>
<option value="1"
#if ($sd->hazmat = 1) selected="selected"
#endif>Yes</option>
</select>
</td>
<td style="width:16.5%;text-align:center;">
<input type="text" id="description" class="form-control" placeholder="Description" required name="shipment_details[{{$sd->id}}][description]" value="{{$sd->description}}">
</td>
<td style="width:16.5%;text-align:center;">
<input type="text" id="charge" class="form-control charges" placeholder="Charge" required name="shipment_details[{{$sd->id}}][charge]" value="{{$sd->charge}}">
</td>
<td><button type="button" name="removeExisting" id="{{$sd->id}}" class="btn btn-danger btn_removeExisting">X</button></td>
</tr>
#endforeach
</tbody>
As you see, there is a button at the end of reach row with the class of "btn_removeExisting" which connects to this script:
$(document).on('click', '.btn_removeExisting', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
$( '.charges' ).trigger( 'change' );
alert('removeExisting');
});
The alert is only there to notify me that the script has completed correctly, which is where my problem is. By pressing the button, it correctly deletes the correct row, and alerts me, but the trigger in the middle is where my problem originates.
The script regarding my change of charge trigger:
$(document).on('change', '.charges', function() {
var sum = 0.00;
$('.charges').each(function(){
sum += +$(this).val();
});
$('input[name^="freightBillSubtotal"]').val(sum.toFixed(2));
calcTotal();
});
Now what's odd is if I just change a charge input, the code works, so if I change the charge on one line from 10.00 to 0.00, the subtotal subtracts 10.00. But for some reason it won't do the same for when an entire row (and it's specific charge) is deleted.
Instead of trying to trigger events manually like that, it is better to make a function and call it from both events:
$(document).on('click', '.btn_removeExisting', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
calcSum();
alert('removeExisting');
});
$(document).on('change', '.charges', calcSum);
function calcSum() {
var sum = 0.00;
$('.charges').each(function() {
sum += $(this).val();
});
$('input[name^="freightBillSubtotal"]').val(sum.toFixed(2));
calcTotal();
});
Note: I assumed there was a harmless typo on your line:
sum += +$(this).val();
so I changed it to:
sum += $(this).val();
Have problem to display select on change attribute id.
PHP:
<form action="" class="form-inline">
<div class="form-group">
<select name="kategorijos" id="kategorijos" class="category form-control" onchange="fetch_select_category(this.value);">
<option value=""></option>
FOREACH
</select>
</div>
<div class="form-group">
<fieldset disabled>
<select id="disabledSelect" name="subcategories" class="subcategory form-control" onchange="fetch_select_product(this.value);" required>
<option value="" disabled selected>Select Subcategory</option>
</select>
</fieldset>
</div>
<div class="form-group">
<td><input type="text" name="gramai" class="form-control" value=""></td>
</div>
<div class="form-group" id="kalb">
<input type='text' name='1[]' value="-" disabled>
<input type='text' name='12[]' value="-" disabled>
<input type='text' name='123[]' value="-" disabled>
<input type='text' name='1234[]' value="-" disabled>
</div>
</form>
My jquery code:
$("select").on('change', function() {
var status = $('select').attr('id');
alert(status);
});
var categoryId = 0;
var category = 0;
var product = 0;
var disableId = 0;
$("#add").click(function () {
categoryId = categoryId + 1;
category = category + 1;
product = product + 1;
disableId = disableId + 1;
$("#item").append('<div class="col-xs-12"><form action=""
class="form-inline"><div class="form-group"><select name="kategorijos"
**....... same code as above (php)**
});
When I select the first row it alerts value. But then I add new row with add button, and then change second select the alert don't work, and I don't get the select id. Where can be the problem? Maybe it doesn't work with append html ?
You need to use event delegation for dynamically generated element and also use this instead of 'select' to get the id of dropdown.
$(document).on('change', 'select', function() {
var status = $(this).attr('id');
alert(status);
});
I'm trying to build a drop menu where the content is filled with data from a database. I have this working in plain html/jquery, but it doesn't work in a Google apps script.
Code :
function buildDropDown(inTitle, inName, inMenuId, inFilterId, inArray)
{
// Create the drop down menu
var div = $('<div id="' + inMenuId + '" class="funnelFiltermenu">');
var input = $('<input type="text" name="' + inName + '" value="All" class="field" readonly />').appendTo(div);
var ul = $('<ul class="funnelFilterlist">').appendTo(div);
// Add the items of the drop down menu
$.each(inArray, function(index,item) {
$(ul).append('<li>'+item+'</li>')
});
// Add the drop down menu to the funnel
$( div).appendTo(".dropdown");
}
This works outside of Google script. It does not work in the Google apps script. I guess this has something to do with the caja stuff. So I changed the code so it would look for classes which then looks like:
function buildDropDown(inTitle, inName, inMenuId, inFilterId, inArray)
{
// Create the drop down menu
var div = $('<div id="' + inMenuId + '" class="funnelFiltermenu">');
$( div).appendTo(".dropdown");
var theId = app.getElementById(div);
var input = $('<input type="text" name="' + inName + '" value="All" class="field" readonly />').appendTo(theId);
var ul = $('<ul class="funnelFilterlist">').appendTo(".funnelFiltermenu");
// Add the items of the drop down menu
$.each(inArray, function(index,item) {
$(".funnelFilterlist").append('<li>'+item+'</li>')
});
}
Since there will be more than one drop down (with the same classes), I cannot use classes. I'll have to use Ids instead. But caja changes the Id.
Any thoughts on how to approach this?
I have created the following work around:
I hard coded more elements in the html code:
<div class="SSCheader"><h1>Project Eigenschappen</h1></div>
<div class="SSCcontent">
<table>
<tbody>
<tr>
<td><b>Project Nr</b></td>
<td><?= getProjectData(2, 1) ?></td>
</tr>
<tr>
<td><b>Project Initiatief</b></td>
<td>
<div id="dropdown2" class="dropdown">
<div id="dd2" class="funnelFiltermenu">
<input type="text" name="aansturing" value="<?= getProjectData(2, 5) ?>" class="field" readonly />
<ul id="ul2" class="funnelFilterlist"></ul>
</div>
</div>
</td>
</tr>
<tr>
<td><b>Primair domein</b></td>
<td>
<div id="dropdown3" class="dropdown">
<div id="dd3" class="funnelFiltermenu">
<input type="text" name="aansturing" value="<?= getProjectData(2, 6) ?>" class="field" readonly />
<ul id="ul3" class="funnelFilterlist"></ul>
</div>
</div>
</td>
</tr>
<tr>
<td><b>Aansturing door</b></td>
<td>
<div id="dropdown4" class="dropdown">
<div id="dd4" class="funnelFiltermenu">
<input type="text" name="aansturing" value="<?= getProjectData(2, 7) ?>" class="field" readonly />
<ul id="ul4" class="funnelFilterlist"></ul>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
And only add the in javascript:
var gDomains = ["Rapportage", "Relaties", "Leden", "Projecten", "Personeel", "Boekhouding", "Faciliteren", "Verkoop", "Inkoop"];
var gInitiatief = ["SSC", "BIP", "ICCO", "C&F", "IO", "FZ", "KIA", "KIO", "JOP", "MWK", "HRM"];
var gAansturing = ["RegieOverleg", "Beleidstafel", "Lijnmanagement", "Stuurgroep"];
// Add the items of the drop down menu
$.each(gInitiatief, function(index,item) {
$("#ul2").append('<li>'+item+'</li>')
});
// Add the items of the drop down menu
$.each(gDomains, function(index,item) {
$("#ul3").append('<li>'+item+'</li>')
});
// Add the items of the drop down menu
$.each(gAansturing, function(index,item) {
$("#ul4").append('<li>'+item+'</li>')
});
I think that because the IDs are now hard coded, the problem is no longer there.
I am developing ASP.NET MVC application.
I am adding the Div Run time by click event on View using Jquery.
After adding div , I am trying to remove it... but It cant get removed.
I have put alert box on the click function of remove link but that also not working.
here is my Complete Code....
<script type="text/javascript">
$(document).ready(function () {
$('.remove').click(function () {
alert("asd");
$(this).parent().parent().remove();
});
function getProductList(rIndex) {
//alert("In Product list");
var productList;
var mainList;
var productListArray = [];
$.ajax({
url: '#Url.Content("~/Product/GetProductList")',
success: function(data) {
mainList = data;
var options = '';
temp = 0;
for (var index = 0; index < data.length; index++) {
productListArray[index] = data[index].Id;
options += '<option value="' + data[index].Id + '">' + data[index].Name + '</option>';
}
productList = options;
$("select#ddProductList_" + rIndex).html(productList);
}
});
}
$('#lnkAddProduct').click(function () {
var rIndex = $("select.clsProductId").length;
// $('#ProductList').append("<div><span style='font-size:12px;'><select class='clsProductId' id='ddProductList_" + rIndex + "' name='ProductId' style = 'font-size:12px;width:120px;margin-right:10px;margin-left:0px;' /></span><input type='text' id='SectionCode' style='width:10%; margin-right:30px;'></div>");
$('#ProductList').append("<div><span style='font-size:12px;'><select class='clsProductId' name='ProductId' id='ddProductList_" + rIndex + "'name='ProductId' style = 'font-size:12px;width:150px;margin-right:10px;margin-left:0px;' /></span><input type='text' id='SectionCode' name='SectionCode' style='width:10%; margin-left:7px;'><input type='text' id='Size' name='Size' style='width:5%; margin-left:20px;'><input type='text' id='Length' name='Length' style='width:8%; margin-left:25px;'><input type='text' name='Thickness' id='Thickness' style='width:8%; margin-left:25px;'><input type='text' id='Weight' name='Weight' style='width:8%; margin-left:25px;'/><input type='text' id='Quantity' name='Quantity' style='width:8%; margin-left:30px;'/><span style='margin-left:10px;padding-top:6px;'> <a href='#' style='font-size:14px;text-decoration:none;font-weight:bold;' id='lnkRemove' class='clsRemove remove'>X</a></span></div>");
getProductList(rIndex);
});
getProductList(0);
});
</script>
<html>
<body>
<div class="span11 " style="margin-bottom : 20px; ">
<div class="row-fluid">
<div class="span1" style="margin-left:10px; width:100px;">
Section Name
</div>
<div class="span1" style="margin-left:60px;width:120px;">
Section Code
</div>
<div class="span1" style="margin-left:10px;width:60px;">
Size
</div>
<div class="span1" style="margin-left:20px;width:80px;">
Length
</div>
<div class="span1" style="margin-left:20px;width:80px;">
Thickness
</div>
<div class="span1" style="margin-left:20px;width:90px;">
Avg. Weight
</div>
<div class="span1" style="margin-left:35px;width:80px;">
Quantity
</div>
</div>
<div class="row-fluid" id="ProductList">
#*<input type="text" id="SectionName" style="width:10%; margin-right:40px;" />*#
<span style='font-size: 12px;margin-left:0px;'><select class='clsProductId span11' id='ddProductList_0' name='ProductId' style='font-size:12px;width:150px;margin-right:3px;margin-left:0px;'>
<option selected="selected" value=""></option>
</select></span>
<input type="text" id="SectionCode" name="SectionCode" style="width:10%; margin-left:10px;" />
<input type="text" id="Size" name="Size" style="width:5%; margin-left:20px;" />
<input type="text" id="Length" name="Length" style="width:8%; margin-left:20px;" />
<input type="text" id="Thickness" name="Thickness" style="width:8%; margin-left:20px;" />
<input type="text" id="Weight" name="Weight" style="width:8%; margin-left:20px;" />
<input type="text" id="Quantity" name="Quantity" style="width:8%; margin-left:30px;" />
#* <span style="margin-left:10px;padding-top:6px;"> <a href='#' style='font-size:14px;text-decoration:none;font-weight:bold;' id='lnkRemove' class='clsRemove remove'>X</a></span>
<a href='#' class='123'>X</a>
<div class="span10" style="margin-left:0px;">
Add Product
<span id="LinkErrorMsg" class="field-validation-error"></span>
</div>
</div>
</body>
</html>
Try event delegation using .on() as your remove link is created runtime.
$("#ProductList").on('click','.remove',function () {
alert("asd");
$(this).closest("div.row-fluid").remove(); // Avoid parent().parent() you can use .closest()
});
ref:
.closest() API docs
I have a jsp page which shows the radio button content(on clicking it,select box will appear ) of a table.But here I'm unable select one radio button(with select box) at a time.I'm showing you the code.
<table>
<tr>
<td><input type="radio" onclick="document.getElementById('select1000').style.display=(this.checked)?'inline':'none';" name="license" value="1000"> 1-1000</td>
<td>
<div id="select1000" style="display: none">
<select id="">
<option test="l25" value="25">25</option>
<option test="l100" value="100">100</option>
</select>
</div>
</td>
</tr>
<tr>
<td><input type="radio" onclick="document.getElementById('select3000').style.display=(this.checked)?'inline':'none';" name="license" value=""> 1001-3000</td>
<td>
<div id="select3000" style="display: none">
<select id="">
<option test="l1001" value="1001">1001</option>
<option test="l1075" value="1075">1075</option>
</select>
</div>
</td>
</tr>
<tr>
<td><input type="radio" onclick="document.getElementById('select5000').style.display=(this.checked)?'inline':'none';" name="license" value=""> 3001-5000</td>
<td>
<div id="select5000" style="display: none">
<select id="">
<option test="l3001" value="3001">3001</option>
<option test="l3075" value="3075">3075</option>
</select>
</div>
</td>
</tr>
</table>
Where I am going wrong ..... any valuable input will be appreciated.
Could you try to change the input element's name:
<td><input type="radio" onclick="change(this, 'select1000')" name="license[1]" value="1000"> 1-1000</td>
and create a function:
function change(t, div){
var ele = document.getElementsByTagName("div");
var radios = document.getElementsByName("license[1]");
for (var i = 0, radio; radio = radios[i]; i++) {
if (!radio.checked) {
if(ele[i].id != div){
ele[i].style.display = 'none';
}
}else{
document.getElementById(div).style.display='inline';
}
}
}
I'm not sure if this is what you want, but HERE you can see an example.
You just need to change your parenthesis:
document.getElementById('select5000').style.display = (this.checked ? 'inline':'none');
Here is your inputs
<input type="radio" onchange="hideElem(this,'select1000')" name="license" value="1000">
<input type="radio" onchange="hideElem(this,'select3000')" name="license" value="">
<input type="radio" onchange="hideElem(this,'select5000')" name="license" value="">
and the function:
<script type="text/javascript">
function hideElem(self,divId){
var divs = ['select1000','select3000','select5000'];
if(self.checked){
for(var i=0; i < divs.length; i++){
if (divs[i] === divId){
document.getElementById(divs[i]).style.display = 'inline';
} else{
document.getElementById(divs[i]).style.display = 'none';
}
}
}
}
</script>
DEMO
because when you click an input(radio), this is the current radio and you don't know the previous one, you need to record the previous select, use jQuery, code like:
(function () {
var oldSel = null;
$('input:radio').click(function () {
// get the current select
var sel = $('#select' + this.value);
// show current select
sel.show();
// if old select is exist, hide it
oldSel && oldSel.hide();
// store the current select when radio on click
oldSel = sel;
});
})();
see the demo