What I want is that when I click on add more, append all text box with blank value add more function is properly working but at the time of appending input box append with value but I want to clear text box value.
<table>
<tbody>
<tr class="topdivdata">
<td> <input type="text" value="First Name"></td>
<td> <input type="text" value="Last Name"></td>
<td> <input type="text" value="Mobile Number"></td>
</tr>
<tr role="row" class="odd">
<td>
<span class="btn btn-xs cic" id="addnewunit">
<i class="icon-plus"></i>+ Add More</span>
</td>
</tr>
</tbody>
<tbody id="addmoreunit"></tbody>
</table>
<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script>
unitcount=1;
$('#addnewunit').click(function()
{
var topdiv = $('.topdivdata').html();
var refresdiv=topdiv;
$('#addmoreunit').append('<tr>.'+refresdiv+'.<td class="removes1"><span class="btn btn-xs"><i class="icon-plus"></i>- Remove</span></td></tr>');
unitcount++;
var value = $('.target').val();
$('.list').val(value);
$('.removes1').click(function()
{
$(this).parent().remove();
});
});
</script>
i want to when i click on add more append all text box with blank value add more function properly working but at append time input box upend with value but i want to clear text box value
<table>
<tbody>
<tr class="topdivdata">
<td> <input type="text" value="First Name"></td>
<td> <input type="text" value="Last Name"></td>
<td> <input type="text" value="Mobile Number"></td>
</tr>
<tr role="row" class="odd">
<td>
<span class="btn btn-xs cic" id="addnewunit">
<i class="icon-plus"></i>+ Add More</span>
</td>
</tr>
</tbody>
<tbody id="addmoreunit"></tbody>
</table>
<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script>
unitcount=1;
$('#addnewunit').click(function()
{
var topdiv = $('.topdivdata').html();
var refresdiv=topdiv;
$('#addmoreunit').append('<tr>.'+refresdiv+'.<td class="removes1"><span class="btn btn-xs"><i class="icon-plus"></i>- Remove</span></td></tr>');
unitcount++;
var value = $('.target').val();
$('.list').val(value);
$('.removes1').click(function()
{
$(this).parent().remove();
});
});
</script>
not understand your question, but you can do like these,
<table>
<tbody>
<tr class="topdivdata">
<td>
<input type="text" value="First Name">
</td>
<td>
<input type="text" value="Last Name">
</td>
<td>
<input type="text" value="Mobile Number">
</td>
</tr>
<tr role="row" class="odd">
<td>
<span class="btn btn-xs cic" id="addnewunit" style="cursor:Pointer;">
<i class="icon-plus"></i>+ Add More
</span>
</td>
</tr>
</tbody>
<tbody id="addmoreunit"></tbody>
</table>
and script is like,
var unitcount = 1;
$('#addnewunit').click(function () {
//Here i cloned your topDiv, so that i can add new inputs.
var CloneTopDiv = $('.topdivdata').clone(true);
CloneTopDiv.find(':input').attr('value', '');
CloneTopDiv.attr('class', 'txtInput')
CloneTopDiv = CloneTopDiv.html();
var refresdiv = CloneTopDiv;
$('#addmoreunit').append('<tr>.' + refresdiv + '.<td class="removes1"><span class="btn btn-xs" style="cursor:Pointer;"><i class="icon-plus"></i>- Remove</span></td></tr>');
unitcount++;
var value = $('.target').val();
$('.list').val(value);
//Code for Remove added row
$('.removes1').click(function () {
$(this).parent().remove();
});
//Clearing Code
$('.txtInput').val('')
});
See solution at https://jsfiddle.net/eua98tqa/3/
Related
so for some reason my table comes out wonky and unfinished looking and off place i cant figure out what i did wrong and i am stuck could someone please help me out
problems the script wont let me edit or save anything also random text box next to add row and total is messed up tooenter image description here
<!DOCTYPE html>
<html>
<head>
<script>
function edit_row(no)
{
document.getElementById("edit_button"+no).style.display="none";
document.getElementById("save_button"+no).style.display="block";
var fforder=document.getElementById("fforder_row"+no);
var ffaddress=document.getElementById("ffaddress_row"+no);
var ffstatus=document.getElementById("ffstatus_row"+no);
var ffdate=document.getElementById("ffdate_row"+no);
var fftotal=document.getElementById("fftotal_row"+no);
var fforder_data=fforder.innerHTML;
var ffaddress_data=ffaddress.innerHTML;
var ffstatus_data=ffstatus.innerHTML;
var ffdate_data=ffdate.innerHTML;
var fftotal_data=fftotal.innerHTML;
fforder.innerHTML="<input type='text' id='fforder_text"+no+"' value='"+fforder_data+"'>";
ffaddress.innerHTML="<input type='text' id='ffaddress_text"+no+"' value='"+ffaddress_data+"'>";
ffstatus.innerHTML="<select id='ffstatus_text"+no+"' value='"+ffstatus_data+"'><option value>-select-</option><option value='FF'>Shipped</option><option value='RF'>Delivered</option><option value='PF'>Canceled</option><option value='DF'>Open</option></select>";
ffdate.innerHTML="<input type='date' id='ffdate_text"+no+"' value='"+ffdate_data+"'>";
fftotal.innerHTML="<input type='text' id='fftotal_text"+no+"' value='"+fftotal_data+"'>";
}
function save_row(no)
{
var fforder_val=document.getElementById("fforder_text"+no).value;
var ffaddress_val=document.getElementById("ffaddress_text"+no).value;
var e =document.getElementById("ffstatus_text"+no);
var ffstatus_val=e.options[e.selectedIndex].text;
var ffdate_val=document.getElementById("ffdate_text"+no).value;
var fftotal_val=document.getElementById("fftotal_text"+no).value;
document.getElementById("fforder_row"+no).innerHTML=fforder_val;
document.getElementById("ffaddress_row"+no).innerHTML=ffaddress_val;
document.getElementById("ffstatus_row"+no).innerHTML=ffstatus_val;
document.getElementById("ffdate_row"+no).innerHTML=ffdate_val;
document.getElementById("fftotal_row"+no).innerHTML=fftotal_val;
document.getElementById("edit_button"+no).style.display="block";
document.getElementById("save_button"+no).style.display="none";
}
function delete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
}
function add_row()
{
var new_fforder=document.getElementById("new_fforder").value;
var new_ffaddress=document.getElementById("new_ffaddress").value;
var new_ffstatus=document.getElementById("new_ffstatus").value;
var new_ffdate=document.getElementById("new_ffdate").value;
var new_fftotal=document.getElementById("new_fftotal").value;
var table=document.getElementById("data_table");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='fforder_row"+table_len+"'>"+new_fforder+"</td><td id='ffaddress_row"+table_len+"'>"+new_ffaddress+"</td><td id='ffstatus_row"+table_len+"'>"+new_ffstatus+"</td><td id='ffdate_row"+table_len+"'>"+new_ffdate+"</td><td id='fftotal_row"+table_len+"'>"+new_fftotal+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";
document.getElementById("new_fforder").value="";
document.getElementById("new_ffaddress").value="";
document.getElementById("new_ffstatus").value="";
document.getElementById("new_ffdate").value="";
document.getElementById("new_fftotal").value="";
}</script>
</head>
<body>
<h2>Orders</h2>
<div id="wrapper">
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
<tr>
<th>Order Number</th>
<th>Address</th>
<th>Order Status</th>
<th>Date</th>
<th>Total</th>
</tr>
<tr id="row1">
<td id="fforder_row1">#123333</td>
<td id="ffaddress_row1">38923 Trevors Lane</td>
<td id="ffstatus_row1">Shipped</td>
<td id="ffdate_row1">2020-12-21</td>
<td id="fftotal_row1">10.00</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
</td>
</tr>
<tr id="row2">
<td id="fforder_row2">#233442</td>
<td id="ffaddress_row2">39002 Joint Ave</td>
<td id="ffstatus_row2">Delivered</td>
<td id="ffdate_row2">2020-12-21</td>
<td id="fftotal_row2">102.00</td>
<td>
<input type="button" id="edit_button2" value="Edit" class="edit" onclick="edit_row('2')">
<input type="button" id="save_button2" value="Save" class="save" onclick="save_row('2')">
<input type="button" value="Delete" class="delete" onclick="delete_row('2')">
</td>
</tr>
<tr id="row3">
<td id="fforder_row3">#990202</td>
<td id="ffaddress_row3">29783 Marc Jobs NE</td>
<td id="ffstatus_row3">Open</td>
<td id="ffdate_row3">2020-12-21</td>
<td id="fftotal_row3">1,020.00</td>
<td>
<input type="button" id="edit_button3" value="Edit" class="edit" onclick="edit_row('3')">
<input type="button" id="save_button3" value="Save" class="save" onclick="save_row('3')">
<input type="button" value="Delete" class="delete" onclick="delete_row('3')">
</td>
</tr>
<tr>
<td><input type="text" id="new_fforder"></td>
<td><input type="text" id="new_ffaddress"></td>
<td>
<select name="ffstatus" id="new_ffstatus">
<option value="">-select-</option>
<option value="FF">Shipped</option>
<option value="RF">Delivered</option>
<option value="PF">Canceled</option>
<option value="DF">Open</option>
</select>
</td>
<td><input type="date" id="new_ffdate"></td>
<td><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
<td><input type="text" id="new_fftotal"></td>
</tr>
</table>
</div>
</body>
</html>
I recommend using the plugin datatable. Because it is flexible and allows basic operations (add, modify, delete rows).
In my application have a table and one tr is display:none. I want to show using jquery.
$(document).on('click','.btn',function(){
var name = $('#name').val();
var email = $('#email').val();
var phno = $('#phno').val();
var mes= $('#message');
if (phno.length == 10) {
}else{
mes.style.display = "block";
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<tbody>
<tr>
<td><label>NAME</label></td>
<td><input type="text" class="form-control" id="name" style="text-transform:uppercase" name="txtname"></td>
</tr>
<tr>
<td><label>EMAIL</label></td>
<td><input type="email" class="form-control" id="email" name="txtemail"></td>
</tr>
<tr>
<td><label>PHONE NO.</label></td>
<td><input type="text" class="form-control" id="phno" maxlength="10" name="txtphno"></td>
</tr>
<tr id="message" style="display: none; color: red;">
<td>Invalid Phone Number</td>
</tr>
<tr>
<td colspan="2">
<button class="btn btn-success btn-lg btn-block" type="submit">REFER</button>
</td>
</tr>
</tbody>
</form>
this is my table. I want to show message row for 5 seconds.I am unable to do that.
this is my jquery. But it is not working. Please help me.
You should use $("#name") to get an element istead of ("#name") and querySelectorAll will retrieve a list of elements matching with input. Instead of this use $("#message") to get element.
Use below code:
$(document).on('click','.btn',function(){
var name = $('#name').val();
var email = $('#email').val();
var phno = $('#phno').val();
var mes= $('#message');
if (phno.length == 10) {
}else{
$('#message').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td><label>NAME</label></td>
<td><input type="text" class="form-control" id="name" style="text-transform:uppercase" name="txtname"></td>
</tr>
<tr>
<td><label>EMAIL</label></td>
<td><input type="email" class="form-control" id="email" name="txtemail"></td>
</tr>
<tr>
<td><label>PHONE NO.</label></td>
<td><input type="text" class="form-control" id="phno" maxlength="10" name="txtphno"></td>
</tr>
<tr id="message" style="display: none; color: red;">
<td>Invalid Phone Number</td>
</tr>
<tr>
<td colspan="2">
<button class="btn btn-success btn-lg btn-block" type="submit">REFER</button>
</td>
</tr>
</tbody>
</table>
<input class="btn" value="click me" type="button"/>
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 can not delete the proper row from an array using Angular.js. I am providing my code below:
<tr ng-repeat="d in days">
<td>{{d.day_name}}</td>
<td>
<table>
<tbody>
<tr ng-repeat="answer in d.answers">
<td>
<select class="form-control" id="answer_{{$index}}_{{$parent.$index}}_category" name="answer_{{$index}}_category" ng-model="answer.category" ng-options="cat.name for cat in listOfCategory track by cat.value" ng-change="removeBorder($index,answer.category.value,$parent.$index)" ng-init="renderWithMode($index,answer.category.value,$parent.$index,isEditMode)">
<option value="">Select Category</option>
</select>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr ng-repeat="answer in d.answers">
<td>
<select class="form-control" id="answer_{{$index}}_{{$parent.$index}}_subcategory" name="answer_{{$index}}_subcategory" ng-model="answer.subcategory" ng-options="sub.name for sub in listOfSubCategory[$parent.$index][$index] track by sub.value">
<option value="">Select Subcategory</option>
</select>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr ng-repeat="answer in d.answers">
<td>
<!--<input type="text" id="answer_{{$index}}_{{$parent.$index}}_comment" name="answer_{{$index}}_comment" placeholder="Add Comment" ng-model="answers.comment">-->
<input type="text" id="answer_{{$index}}_{{$parent.$index}}_comment" name="answer_{{$index}}_comment" placeholder="Add Comment" ng-model="answer.comment">
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr ng-repeat="answer in d.answers">
<td style="width:20px">
<input ng-show="d.answers.length>1" class="btn btn-red" type="button" name="minus" id="minus" value="-" style="width:20px; text-align:center;" ng-click="removeRow(d.answers, $index)">
</td>
<td ng-show="$last">
<input type="button" class="btn btn-success" name="plus" id="plus" value="+" style="width:20px; text-align:center;" ng-click="addNewRow(d.answers)">
<button type="button" id="btn" ng-click="checkAnswer(d.answers)">Check</button>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
The above table is giving the output like below.
Here I have added 3 row for monday and suppose I have clicked on middle row - button as per requirement the only middle row should delete but here it is deleting wrong subcategory part from the 3rd row whose screen shot is given below.
I have deleted second row from first screen shot still the second row subcategory part is present and 3rd row subcategory part has deleted which is wrong deletion process. Here is my controller side code:
$scope.days=[];
$http({
method:'GET',
url:"php/customerInfo.php?action=day",
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function successCallback(response){
//console.log('day',response.data);
angular.forEach(response.data, function(obj) {
obj.answers = [];
$scope.addNewRow(obj.answers);
$scope.days.push(obj);
});
},function errorCallback(response) {
})
}
$scope.addNewRow = function(answers,hasDelete) {
answers.push({
category: null,
subcategory: null,
comment: null,
hasDelete: hasDelete ? hasDelete : false
});
};
$scope.removeRow = function(answers, $index){
answers.splice($index, 1);
//answers.splice(answers.length-1,1);
};
Here all data are binding dynamically. I need to delete the right row.
Try to remove $ from $index parameter.
$scope.removeRow = function(answers, index){
answers.splice(index, 1);
//answers.splice(answers.length-1,1);
};
I am able to get the ImagesInputView to work in my ViewModel, but the other two will not. The way I know they are not working, is that I cannot delete the other two, and they add more than I am allowing them to.
Here is my html code:
<div id="image_inputs" class="image_gallery_area">
<table>
<thead>
<tr>
<th>
<label class="ae_field_label">Images:</label>
</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: imageInput">
<tr>
<td>
<input class="ae_filed_value" type="file" data-bind="value: value" />
</td>
<td>
<button type="button" class="minus" data-bind="click: $root.removeImageInput">X</button>
</td>
</tr>
</tbody>
</table>
<button type="button" class="plus" data-bind="click: addImageInput, enable: imageInput().length < 8">Add Image</button>
</div>
<div id="app_inputs" class="app_link_area">
<table>
<thead>
<tr>
<th><label class="ae_field_label">App Download Links:</label></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: appInput">
<tr>
<td>
<label class="ae_field_label" for="appLinkName">Link Name:</label>
</td>
<td>
<input class="ae_filed_value" data-bind="value: appLinkName" maxlengthe="255" />
</td>
<td rowspan="2">
<button type="button" class="minus" data-bind="click: $root.appInput">X</button>
</td>
</tr>
<tr>
<td>
<label class="ae_field_label" for="appURL">URL:</label>
</td>
<td>
<input class="ae_filed_value" data-bind="value: appURL" maxlengthe="255" />
</td>
</tr>
</tbody>
</table>
<button type="button" class="plus" data-bind="click: appInput, enable: appInput().length < 4">Add App Input</button>
</div>
<div id="web_link_inputs" class="web_thumbs_area">
<table>
<thead>
<tr>
<th>
<label class="ae_field_label">Web Thumbnail Links:</label>
</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: webLinkInput">
<tr>
<td>
<label class="ae_field_label" for="webLinkName">Link Name:</label>
</td>
<td>
<input class="ae_filed_value" data-bind="value: webLinkName" maxlengthe="255" />
</td>
<td rowspan="2">
<button type="button" class="minus" data-bind="click: $root.webLinkInput">X</button>
</td>
</tr>
<tr>
<td>
<label class="ae_field_label" for="webURL">URL:</label>
</td>
<td>
<input class="ae_filed_value" data-bind="value: webURL" maxlengthe="255" />
</td>
</tr>
</tbody>
</table>
<button type="button" class="plus" data-bind="click: webLinkInput, enable: webLinkInput().length < 2">Add Web Thumbnail</button>
</div>
Here is my knockout code:
function ImageInputView (value){
var self = this;
self.value = value
}
function AppLinkView (appLinkName, appURL){
var self = this;
self.appLinkName = appLinkName;
self.appURL = appURL;
}
function WebLinkView (webLinkName, webURL){
var self = this;
self.webLinkName = webLinkName;
self.webURL = webURL;
}
function ViewModel(){
var self = this;
self.imageInput = ko.observableArray();
self.addImageInput = function() {
self.imageInput.push(new ImageInputView(""));
}
self.removeImageInput = function(imageInput) {
self.imageInput.remove(imageInput);
}
self.appInput = ko.observableArray();
self.addAppInput = function() {
self.appInput.push(new AppLinkView("",""));
}
self.removeAppInput = function(appInput) {
self.appInput.remove(appInput);
}
self.webLinkInput = ko.observableArray();
self.addWebLinkInput = function() {
self.webLinkInput.push(new WebLinkView("",""));
}
self.removeWebLinkInput = function(webLinkInput) {
self.webLinkInput.remove(webLinkInput);
}
}
ko.applyBindings(new ViewModel());
here is my jsFiddle
I get a "RefferenceError: variableName is not defined" in my javascript errors.
Thank you in advance for any help. I am new to knockout, and have been at this for a few hours, and can't seem to figure it out or find any helpful sources in my searching.
Here is the fiddle that works http://jsfiddle.net/qj3y9/
You were missing a couple of things
This
<button type="button" class="plus" data-bind="click: appInput, enable: appInput().length < 4">Add App Input</button>
Must be changed to
<button type="button" class="plus" data-bind="click: addAppInput, enable: appInput().length < 4">Add App Input</button>
Same for
<button type="button" class="plus" data-bind="click: webLinkInput, enable: webLinkInput().length < 2">Add Web Thumbnail</button>
Must be changed to
<button type="button" class="plus" data-bind="click: addWebLinkInput, enable: webLinkInput().length < 2">Add Web Thumbnail</button>
Also your remove buttons were not bound to the correct function in the view model. You can look in the fiddle It is fixed now there.