I want to develop a multilevel add more button using jquery.
I did that functionality, but its not success. It has many bugs. Some Logical issues are there...
My actual requirement there is one "Add more" button. When we click this add more button one Div will open. In side that div there is one text box and another one "add more" button
For example, First i add the main option value is "Bajaj". Under this option i want to add some options like "Discover", "Platina",...
Then i click next add more button and add the next option value is "Yamaha" under this Option i need to add sub options like FZ,YBR, Ray...
<div id="tabularoptions">
<input id="btnAdd" type="button" value="Add Options" />
<br />
<br />
<div id="TextBoxContainer">
<!--Textboxes will be added here -->
<?php
if ($form['tabularOptions'] != '') {
foreach ($form['tabularOptions'] as $opt) {
?>
<div style="border:1px solid #ccc;margin: 10px;">
<table>
<tr>
<td>Option Value :</td>
<td>
<input name = 'tabluarOptionValue_<?php echo $opt['id']; ?>' type="text" value = "<?php echo $opt['tabularOptionValue']; ?>" />
<input type="hidden" name="tabluarOptionId_<?php echo $opt['id']; ?>" value="<?php echo $opt['id']; ?>">
</td>
<td><input type="button" value="Remove" class="remove" /></td>
<?php
if ($form['tabularSubOptions'] != '') {
foreach ($form['tabularSubOptions'] as $optsub) {
if ($optsub['tabularOptionId'] == $opt['id']) {
?>
<tr>
<td>
<input type="text" name="tabularSuboptionValue_<?php echo $optsub['id']; ?>" value="<?php echo $optsub['tabularSuboptionValue']; ?>">
<input type="hidden" name="tabularSuboptionId_<?php echo $optsub['id']; ?>" value="<?php echo $optsub['id']; ?>">
<input type="button" class="subOptionRemove" value="X">
</td>
</tr>
<?php
}
}
}
?>
</tr>
<tr>
</tr>
<tr>
<table>
<tr class="subOptionDiv">
<td><input class = "btnAdd1" type="button" value = "Add Suboptions" /></td>
</tr>
</table>
</tr>
</table>
</div>
<?php
}
}
?>
</div>
<script>
$(function () {
$("#btnAdd").bind("click", function () {
var div = $("<div />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("body").on("click", ".remove", function () {
$(this).closest("div").remove();
});
$("body").on("click",".btnAdd1", function () {
$(this).closest("table").append('<tr>\n\
<td>\n\
<input type="text" name="tabularSuboptionValue_'+j+'[]">\n\
<input type="button" class="subOptionRemove" value="X">\n\
</td>\n\
</tr>');
});
$("body").on("click",".subOptionRemove", function () {
$(this).parent().remove();
});
});
var j = 1;
function GetDynamicTextBox(value) {
j=j+1;
$('#optionCount').val(j);
// alert(j);
return '<div id='+j+' style="border:1px solid #ccc;margin: 10px;"><table>\n\
<tr>\n\
<td>Option Value :</td>\n\
<td><input name = "tabluarOptionValue_'+j+'[]" type="text" value = "' + value + '" /></td>\n\
<td><input type="button" value="Remove" class="remove" /></td>\n\
</tr>\n\
<tr>\n\
</tr>\n\
<tr>\n\
<table>\n\
<tr class="subOptionDiv"><td><input class = "btnAdd1" type="button" value = "Add Suboptions" /></td></tr>\n\
<tr>\n\
<td>\n\
<input type="text" name="tabularSuboptionValue_'+j+'[]">\n\
<input type="button" class="subOptionRemove" value="X">\n\
</td>\n\
</tr>\n\
</table>\n\
</tr>\n\
</table></div>';
}
</script>
Please try this code may be usefull for you.
Put this jquery/javascript code where you js code is.
<script type="text/javascript">
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="mytext[]"/>Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
Put this code in your php/html file where you want the text box.
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]"></div>
</div>
Try this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<table width="100%" cellpadding="0" cellspacing="0" id="type">
<tr >
<td align="left">Subcategory</td>
</tr>
<tr>
<td>Type : <input type="text" name="type" id="type" /></td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" >
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" id="subtype1">
<tr>
<td>
Subtype : <input type="text" name="type" id="type" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div>
<input type="button" name="addsub" value="Add Subtype" onclick="addmore('1')" />
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div>
<input type="button" name="add" value="Add Type" onclick="addmoretype()" />
</div>
Javascript
num = 2;
function addmore(id)
{
var tablename = "#subtype"+id;
$(tablename+' tr:last').after('<tr><td> Subtype: <input type="text" name="type" id="type" /> </td> </tr>');
}
function addmoretype()
{
$('#type tr:last').after('<tr> <td>Type : <input type="text" name="type" id="type" /></td></tr> <tr> <td><table width="100%" cellspacing="0" cellpadding="0" > <tr> <td> <table width="100%" cellspacing="0" cellpadding="0" id="subtype'+ num+'"> <tr> <td> Subtype : <input type="text" name="type" id="type" /></td></tr> </table></td> </tr><tr> <td> <div> <input type="button" name="addsub" value="Add Subtype" onclick="addmore('+ num+')" /> </div> </td> </tr></table> </td></tr>');
num++;
}
see working example
Related
I have tried to add input text element to my form
through this jquery code below
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
counter++;
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" class="" name="item'+counter+'"/></td>';
cols += '<td><input type="text" class="" name="rate'+counter+'"/></td>';
cols += '<td><input type="text" class="" name="quantity'+counter+'"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("#myTable").append(newRow);
$("#itemcounter").val(counter);
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
var count = $("#itemcounter").val();
$("#itemcounter").val(count-1);
counter = count -1;
});
});
Now the form is as below:
<form action="{{url('/billgenerate')}}" method="post">
<input type="hidden" name="itemcounter" id="itemcounter" value="">
<table id="myTable" class="table order-list">
<thead>
<tr>
<td>Item Name</td>
<td>Rate</td>
<td>Quantity</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4">
<input type="text" name="item0" class="" style="width:22em" />
</td>
<td class="col-sm-3">
<input type="text" name="rate0" class=""/>
</td>
<td class="col-sm-3">
<input type="text" name="quantity0" class=""/>
</td>
<td class="col-sm-2"><a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block" name="addrow" id="addrow" value="Add Row" />
</td>
</tr>
<tr>
</tr>
</tfoot>
</table>
</form>
when I add add new row, it adds successfully, and also the element is added with its name increment by 1 so that while posting the page the name does not get conflicts.
but when I try to add a input predefined inside the table, php recognizes that particular element.
but when I try to add it through jquery code, it does not return the elements which are added. where am i going wrong?
I have table . There are three columns : Name , Price and button "Make Order". I must get data from each row to my Javascript. Each input have id such as productName and productPrice .
Table code:
<table border="2px">
<tr>
<th>Name</th>
<th>Price</th>
</tr>
<c:forEach items="${productList}" var="product" varStatus="status">
<tr>
<form>
<td> ${product.getProductName()}</td>
<input type="hidden" id="productName" name="productName" value=${product.getProductName()}>
<td>${product.getPrice()}</td>
<input type="hidden" id="productPrice" name="productPrice" value=${product.getPrice()}>
<td><input type="submit" onclick="makeOrder()" value="Make Order"></td>
</form>
</tr>
</c:forEach>
</table>
And my js:
<script type="text/javascript">
function makeOrder() {
var n=document.getElementById("productName").value;
var p=document.getElementById("productPrice").value;
alert("n="+n);
alert("p="+p);
//var win=window.open("/user/makeOrder?productName=" + n + "&productPrice=" + p);
}
But when I click on my button I always alert first row of my table .
How can I alert other row ?
Use a unique row id for each row and pass that id with makeOrder() function and then find child elements inside that row whose id is passed in function...
Here is working example....
function makeOrder(rowId)
{
var n=document.getElementById(rowId).childNodes[5].value;
var p=document.getElementById(rowId).childNodes[9].value;
alert("n="+n);
alert("p="+p);
//var win=window.open("/user/makeOrder?productName=" + n + "&productPrice=" + p);
}
<table border="2px">
<tr>
<th>Name</th>
<th>Price</th>
</tr>
<tr id="row1">
<form>
<td>P1</td>
<input type="hidden" id="productName" name="productName" value="P1">
<td>$5</td>
<input type="hidden" id="productPrice" name="productPrice" value="5">
<td><input type="button" onclick="makeOrder('row1')" value="Make Order"></td>
</form>
</tr>
<tr id="row2">
<form>
<td>P2</td>
<input type="hidden" id="productName" name="productName" value="P2">
<td>$6</td>
<input type="hidden" id="productPrice" name="productPrice" value="6">
<td><input type="button" onclick="makeOrder('row2')" value="Make Order"></td>
</form>
</tr>
</table>
You could call a function that gives all inputs with name productName, see below.
var n=document.getElementsByName("productName").value;
var p=document.getElementsByName("productPrice").value;
for(var i = 0; i < n.length; i++) {
alert("row 1: " + n[i].value + p[i].value);
}
This should return all your rows. Each alert will show the data of 1 row.
I`ve dynamiclally added rows, and i want to auto calculate values on it.
Here are part of my code:
<table id="itemsTable" class="general-table">
<thead>
<tr>
<th></th>
<th>Код на продукт</th>
<th>Описание</th>
<th>Брой</th>
<th>Цена</th>
</tr>
</thead>
<tbody>
<tr class="item-row">
<td></td>
<td><input name="itemCode[]" value="" class="tInput" id="itemCode" tabindex="1" /> </td>
<td><input name="itemDesc[]" value="" class="tInput" id="itemDesc" readonly="readonly" /></td>
<td><input name="itemQty[]" value="" class="tInput" id="itemQty" tabindex="2"/></td>
<td><input name="itemPrice[]" value="" class="tInput" id="itemPrice" readonly="readonly" /> </td>
</tr>
</tbody>
</table>
<span> <img src="images/icon-plus.png" alt="Add" title="Add Row" /> Добави ред</span>
<div style="float: right; width: 100px;">
<div id="container">Общо: <span style="clear:both;" id="added"></span><br></div>
</div>
And jquery
$('input').keyup(function(){ // run anytime the value changes
var firstValue = parseFloat($('#itemQty').val()); // get value of field
var secondValue = parseFloat($('#itemPrice').val()); //
$('#added').html(firstValue * secondValue); // add them and output it
});
The problem is that that script calculate only the first row.
You have repeated IDs in your webpage. And whenever you will use repeated IDs it will always treated for the first Element. So, you have to make dynamic ids for this purpose:
Making HTML with PHP:
<table id="itemsTable" class="general-table">
<thead>
<tr>
<th></th>
<th>Код на продукт</th>
<th>Описание</th>
<th>Брой</th>
<th>Цена</th>
</tr>
</thead>
<tbody>
<?php
foreach( $yourArray as $key=>$item){}
?>
<tr class="item-row">
<td></td>
<td><input name="itemCode[]" value="" class="tInput" id="itemCode_<?php echo $key;?>" tabindex="1" /> </td>
<td><input name="itemDesc[]" value="" class="tInput" id="itemDesc_<?php echo $key;?>" readonly="readonly" /></td>
<td><input name="itemQty[]" value="" class="tInput" id="itemQty_<?php echo $key;?>" tabindex="2"/></td>
<td><input name="itemPrice[]" value="" class="tInput" id="itemPrice_<?php echo $key;?>" readonly="readonly" /> </td>
</tr>
<?php
}
?>
</tbody>
</table>
<span> <img src="images/icon-plus.png" alt="Add" title="Add Row" /> Добави ред</span>
<div style="float: right; width: 100px;">
<div id="container">Общо: <span style="clear:both;" id="added"></span><br></div>
</div>
Javascirpt/JQuery:
$(document).ready(function(){
$('input').keyup(function(){ // run anytime the value changes
// getting parent TR of current Input
var parent_tr = $(this).closest('tr');
//gettting parent TR's child input named as 'itemQty[]'
var firstValue = parseFloat($("input[name='itemQty[]']", parent_tr).val()); // get value of field
//gettting parent TR's child input named as 'itemPrice[]'
var secondValue = parseFloat($("input[name='itemPrice[]']", parent_tr).val()); //
$('#added').html(firstValue * secondValue); // add them and output it
});
});
Demo will Static HTML 2 rows: http://jsfiddle.net/Lvjff4ga/
$('input','#itemsTable').change(function(){
var tot = 0;
$('tbody tr','#itemsTable').each(function(){
tot += $('[name=itemQty\[\]]', this).val() * $('[name=itemPrice\[\]]', this).val();
});//each
$('#added').html(tot);
});
I am trying to show text box on the row clicked by hiding the labels of the clicked row and on button click the text box data should be printed on a "showresult" Div
My problem is am not able to hide and show the textbox i have gathered a script which change the color but am not sure how to hide and show the text box and print the data.
$(document).ready(function () {
$('tr').click(function () {
if(this.style.background == "" || this.style.background =="white") {
$(this).css('background', 'red');
}
else {
$(this).css('background', 'white');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellspacing="1" width="100%" id="table1">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
<th>Column5</th>
</tr>
<tr>
<td><label>data1</label> <input type="text" value="1" /></td>
<td><label>data2</label> <input type="text" value="2" /></td>
<td><label>data3</label> <input type="text" value="3" /></td>
<td><label>data4</label> <input type="text" value="4" /></td>
<td><label>data5</label> <input type="text" value="5" /></td>
</tr>
<tr>
<td><label>data6</label> <input type="text" value="6" /></td>
<td><label>data7</label> <input type="text" value="7" /></td>
<td><label>data8</label> <input type="text" value="8" /></td>
<td><label>data9</label> <input type="text" value="9" /></td>
<td><label>data10</label> <input type="text" value="10" /></td>
</tr>
</table>
<input type="button" value="printdata"/>
<div id="showresult"></div>
Say i have two rows, The textbox will be hidden and the label will be
available as a display when a user click on a selected row the label
should be hidden and the text box should be visible and after that if
the user clicks on the button then the data or the clicked row textbox
value should be printed #showresult
Try utilizing .toggle() to display , not display label , input elements within tr clicked element ; create variable index corresponding to tr element clicked ; at click of #printdata , iterate
tr at index using .each() , create an object having property of label , value of input , set #showresult html to created object
$(document).ready(function() {
var index = null;
$("tr").click(function() {
$("input, label", this).toggle();
index = $(this).index("tr");
});
$("input[type=button]").click(function() {
var obj = {};
var elems = $("tr").eq(index).find("label, input");
elems.each(function(i, el) {
if ($(el).is("label")) {
obj[el.textContent] = elems[i + 1].value
}
});
$("#showresult").html("<pre>" + JSON.stringify(obj, null, 2) + "</pre>")
})
});
tr td input {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" cellspacing="1" width="100%" id="table1">
<tbody>
<tr style="background:transparent">
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
<th>Column5</th>
</tr>
<tr>
<td>
<label>data1</label>
<input type="text" value="1" />
</td>
<td>
<label>data2</label>
<input type="text" value="2" />
</td>
<td>
<label>data3</label>
<input type="text" value="3" />
</td>
<td>
<label>data4</label>
<input type="text" value="4" />
</td>
<td>
<label>data5</label>
<input type="text" value="5" />
</td>
</tr>
<tr>
<td>
<label>data6</label>
<input type="text" value="6" />
</td>
<td>
<label>data7</label>
<input type="text" value="7" />
</td>
<td>
<label>data8</label>
<input type="text" value="8" />
</td>
<td>
<label>data9</label>
<input type="text" value="9" />
</td>
<td>
<label>data10</label>
<input type="text" value="10" />
</td>
</tr>
</tbody>
</table>
<input type="button" value="printdata" />
<div id="showresult"></div>
This is my html code for form
<form action="add.php" method="post">
<table style="border: 1px solid black;padding:20px;" cellspacing="1px">
</br>
</br>
<tr>
<td>Issue No:</td>
<td>
<input name="issueno" type="text" id="issueno" />
</td>
<td>Issue Date:</td>
<td>
<input name="issuedate" type="date" id="issuedate" />
</td>
</tr>
</br>
</br>
<tr></tr>
<tr>
<td>Item Code:</td>
<td>
<input name="itemcode" type="text" id="itemcode" />
</td>
<td>Description:</td>
<td>
<input name="des" type="text" style="width:250px; height:23px" id="desc" />
</td>
<td>Bal Quantity:</td>
<td>
<input name="bal" type="text" id="bal" />
</td>
</tr>
</br>
<tr>
<td>Issue Quantity:</td>
<td>
<input name="issuequ" type="text" id="issuequ" />
</td>
</tr>
</br>
<tr></tr>
<tr>
<td>Remark:</td>
<td>
<input name="remark" type="text" style="width:250px; height:23px" id="remark" />
</td>
</tr>
</br>
<tr>
<td colspan="6">
<center>
<input type="submit" value="submit">
</center>
</td>
</tr>
</table>
</form>
So I want to disable submit button if issue quantity is more than bal quantity and remain enable if issue quantity is less than bal quantity. And I am getting bal quantity on change of item code from ajax call. So how Do I do it??
<script>
/**
* the submit handler...
*/
function checkBeforeSubmit() {
// build your own condition ... :)
if(CONDITION == false) {
alert("You can not submit...");
}else {
// all is good ? so we submit the form ....
document.myForm.submit();
}
}
</script>
<form name="myForm" action="add.php" method="post">
...
<!-- i have changed the type from submit to button and add a handler to execute basic JavaScript function-->
<input type="button" value="submit" onClick="checkBeforeSubmit();">
</form>
Why not you try yo Add/remove disabled attribute to the submit button on qtty change.
This is my working code...
$('#issuequ').blur(function(){
var issueqty = $(this).val();
var bal = $('#bal').val();
if(issueqty > bal){
$('input[type="submit"]').attr('disabled','disabled');
} else if (issueqty < bal){
$('input[type="submit"]').removeAttr('disabled');
}
});
I am here disabling submit on change of issuequ otherwise remain active.