Develop Reference

How to append input type submit elements on table using Jquery and bind it?

I am trying to append a table row which has a form and input type submit. Typically, this is what my loop looks like:
#foreach (var item in Model)
{
using (Html.BeginForm("Edit", "User"))
{
<tr>
<input type="hidden" name="Id" value="#item.Id" />
<td>
#Html.DisplayFor(modelItem => item.Email)
#Html.HiddenFor(modelItem => item.Email, new { name = "Email" })
</td>
Edit
<button type="submit" onclick="return confirm('Disable this?');" name="btnDisable" id="btnDisable">Disable</button>
</td>
</tr>
}
}
Now on my AJAX call, I need to add additional user here on this table row, here's how I usually do it:
$.ajax({
type: "POST",
url: 'URL',
dataType: 'json'
}).done(function (data) {
if (data.status == 'True') {
var usrObj = data.uobj;
$(function () {
var table = $('#tblUsers tbody');
for (var i = 0; i < usrObj.length; i++) {
$('#tblUsers').find('tbody')
.append('<tr><form action="/User/Edit" method="post">' +
'<input type="hidden" name="Id" value=' + usrObj[i].Id + '>' +
'<td>' + usrObj[i].Email + '</td>' +
"<td></i>Edit" +
`<button type='submit' name='btnDisable' id = 'btnDisable' onclick="return confirm('Disable this?')";>Disable</button></td>` +
'</form></tr>');
}
}
});
Now what is happening is that, the appended link is working fine since everything the link that is needed to function is already set on it's attributes:
</i>Edit
This is I am having a hard time submitting the form:
<button type='submit' name='btnDisable' id = 'btnDisable' onclick="return confirm('Disable this?')";>Disable</button>
I tried adding the following code below but still, nothing is happening, the confirm dialog box is popping up, but upon clicking Ok button, nothing is happening. The form is not submitting. But the other rows are working fine after the append.
Here's what I tried, but all of these are not working fine.
$(function () {
$(document).on('submit', 'form', function (event) {
$(this).submit();
});
});
I guess the way I appended my table row is the problem but I am not clearly sure.

Problem in your current jquery code was that when you were appending new rows inside table it was going outside tr tag that's the reason form submit was not working . Instead you can put form tag inside td tag and the input field as well which you need to pass to backend so that form gets trigger using button inside it .
Demo Code :
//this is for demo :)
var usrObj = [{
"Email": "cdcdc",
"Id": 11
}, {
"Email": "cdcdc2",
"Id": 12
}]
for (var i = 0; i < usrObj.length; i++) {
$('#tblUsers').find('tbody').append('<tr><td>' + usrObj[i].Email + '</td>' + "<td><form action='/User/Edit' method='post'></i>Edit" + `<button type='submit' name='btnDisable' onclick="return confirm('Disable this?')";>Disable</button>` + '<input type="hidden" name="Id" value=' + usrObj[i].Id + '/></form>' + "</td></tr>");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblUsers">
<tbody>
<form>
<tr>
<input type="hidden" name="Id" value="1" />
<td>
frg
</td>
<td>
Edit
<button type="submit" onclick="return confirm('Disable this?');" name="btnDisable" id="btnDisable">Disable</button>
</td>
</tr>
</form>
<form>
<tr>
<input type="hidden" name="Id" value="2" />
<td>
ckwlkev
</td>
<td>
Edit
<button type="submit" onclick="return confirm('Disable this?');" name="btnDisable" id="btnDisable">Disable</button>
</td>
</tr>
</form>
</tbody>
</table>

Please update your ajax code with
for (var i = 0; i < usrObj.length; i++) {
$('#tblUsers').find('tbody').append('<tr><form action="/User/Edit" method="post">' +
'<input type="hidden" name="Id" value=' + usrObj[i].Id + '>' +
'<td>' + usrObj[i].Email + '</td>' +
'<td></i>Edit' +
'<button type="submit" name="btnDisable" id = "btnDisable" onclick="return confirm(\'Disable this?\')";>Disable</button></td>' +
'</form></tr>');
}
Also, $(document).on has much lower performance than $('form.remember').on('submit'). It now has to listen for all submit events in the document. It's much better to restrict the scope a little than listen on document, if possible

i have add dynamic row using jquery now i want to add those column

i have add dynamic row using jquery now i want to add those column of the row. Down below is my code i am not able to add the column that is created dynamically.the first textbox is calculated and answer is displayed in grandtotal textbox but the rest textbox cannot be calculated.
<tbody>
<tr class="data-contact-person">
<td>
<input type="text" name="a" class="form-control a" />
</td>
<td>
<input type="text" name="b" class="form-control b" />
</td>
<td>
<input type="text" name="c" class="form-control c" />
</td>
<td>
<input type="text" name="d" class="form-control d" />
</td>
<td>
<button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>Grand-Total</td>
<td>
<input data-val="true" id="grdtol1" name="grdtol1" value="" class="form-control text-box single-line" type="text">
</td>
<td>
<input data-val="true" id="grdtol" name="grdtol2" value="" class="form-control text-box single-line" type="text">
</tr>
</tfoot>
$(document).ready(function () {
$(document).on("click", ".classAdd", function () { //
var rowCount = $('.data-contact-person').length + 1;
var contactdiv = '<tr class="data-contact-person">' +'<td><input type="text" name="a' + rowCount + '" class="form-control a" /></td>' +
'<td><input type="text" name="b' + rowCount + '" class="form-control b" /></td>' +
'<td><input type="text" name="c' + rowCount + '" class="form-control c" /></td>' +
'<td><input type="text" name="d' + rowCount + '" class="form-control d" /></td>' +
'<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
'<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
'</tr>';
$('#maintable').append(contactdiv); // Adding these controls to Main table class
});
});
$(document).on("click", ".deleteContact", function () {
$(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls
});
$(document).ready(function (e) {
$("input").change(function () {
var grdtol1 = 0;
$("input[name=c]").each(function () {
grdtol1 = grdtol1 +parseInt( $(this).val());
})
$("input[name=grdtol1]").val(grdtol1);
});
})

First, a piece of advice, don't create multiple $(document).ready() functions in the same javascript file, you just need one.
You haven't post your html code, so I'm guessing here, but I suppose you initially have row with the inputs and you also have an input with name="grdtol1" where you want to calculate the sum of the values of the column, and it has to refresh when you change the value in any of the inputs.
According to that, I see this problems...
You need to use event delegation for the input onchange event (like you do for the .deleteContact button). You're associating the event directly, so it only applies to the elements that are in the DOM when the page loads, and not for the rows you add dinamically. You can associate the event to the table and delegate it to the input, for example.
Inside of the event, you're selecting $("input[name=c]"), but according to the previous code, your inputs will have name="c' + rowCount + '". You chould use the class to select them.
If you delete one row, you should also recalculate the sum, because the input of that row will disappear.
Putting all together...
$(document).ready(function () {
$(document).on("click",".classAdd",function() {
var rowCount = $('.data-contact-person').length + 1;
var contactdiv = '<tr class="data-contact-person">' +'<td><input type="text" name="a' + rowCount + '" class="form-control a" /></td>' +
'<td><input type="text" name="b' + rowCount + '" class="form-control b" /></td>' +
'<td><input type="text" name="c' + rowCount + '" class="form-control c" /></td>' +
'<td><input type="text" name="d' + rowCount + '" class="form-control d" /></td>' +
'<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
'<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
'</tr>';
$('#maintable').append(contactdiv); // Adding these controls to Main table class
});
function calculateGrandtotal() {
var grdtol1 = 0;
$('input.c').each(function() {
grdtol1 += parseInt($(this).val());
})
$("input[name=grdtol1]").val(grdtol1);
}
$('#maintable').on('click','.deleteContact',function () {
$(this).closest('tr').remove();
calculateGrandtotal()
})
.on('change','input.c',function() {
calculateGrandtotal()
});
});
I hope it helps

hide last element of an array

How to hide the last index of an array as I want to hide the label and show the input when user clicks on add button . Couldn't find help . Here is my code:-
<tr ng-repeat="personalDetail in personalDetails">
<td>
<label ng-show="lab[$index]=true" for="settings" > {{personalDetail.Sname}}</label>
<input ng-show="lab[$index]=false" type="text" ng-model="personalDetail.Sname" />
</td>
<input type="button" class="btn btn-primary addnew pull-right btn-space" ng-click="addNew($index)" value=" Add New">
And my angular code :
$scope.addNew = function(val) {
$scope.personalDetails.push({
'Sname': "",
'Settings': "",
});
var ind = $scope.personalDetails.length - 1;
$("label[data-val='" + ind + "']").hide();
$("input[data-val='" + ind + "']").show();
$scope.PD = {};
};

try this
<tr ng-repeat="personalDetail in personalDetails">
<td>
<label ng-hide="$last" for="settings" > {{personalDetail.Sname}}</label>
<input ng-show="$last" type="text" ng-model="personalDetail.Sname" />
</td>
<tr>
Reference: ngRepeat

Just check for $last,
<td>
<label ng-show="lab[$index]==true" for="settings"> {{personalDetail.Sname}}</label>
<input ng-show="lab[$index]==false" type="text" ng-model="personalDetail.Sname" />
</td>

On enter, search for the string in db

i have this code:
<body>
Please make your selection:
<div id="div1">
<tr>
<td>
<input type="button" value="Insert" onclick="form.html" />
</td>
<td>
<input type="button" value="View" onclick="window.location='view-master.php';" />
</td>
<td>
<input type="button" value="Edit" onclick="edit.html" />
</td>
<td>
<input type="button" value="Search" onclick="showsearchform()" />
</td>
</tr>
</div>
</body>
then the JS:
<script type="text/javascript">
function showsearchform()
{
var tr = document.createElement("tr");
var td = document.createElement("td");
var label = document.createElement("label");
label.id = "label1";
label.value = "Surname";
var input = document.createElement("input");
tr.appendChild(td);
td.appendChild(label);
td.appendChild(input);
var element = document.getElementById("div1");
element.appendChild(tr);
$('#input').keyup(function (e) {
var str = $('#search').val();
var url = "search.php";
if (e.keyCode == 13) {
location.href = url;
}
});
}
</script>
when i click on search i get the inoutbox, but what i want to do now is when i type a surname into the box and hit enter i want to connect to the db and search for this surname
I can do the db stuff just not sure of the JS and Jquery

html
<input type="text" name="txt" onkeypress="Search" />
javascript
<script>
function Search(e){
if(e.keyCode === 13){// enter key value is 13
**// Your ajax request write here , and in server side you can
**check corresponding results in database and return if data is present and take it as ajax replay****
}
return false;
}
</script>

retrieving multiple cookie values in a single cookie in javascript

I had post this problem before, dealing with the shopping cart application. The application so far does everything that i would like it to do. I'm able to store and retrieve the cookies. But right now, my problem is extracting the individual values from the cookies and placing them into a table i have created. This is the format of the cookie when retrieved.
ItemName = quantity$price. what i am trying to do is retrieve the quantity and price values from the cookie, and display that data into my table. the cookie is being created in my store page, and then retrieved and displayed in my cart page. here is the code for my store page
store.html
<html>
<head>
<title> Store </title>
<h1> My store </h1>
<script type="text/javascript">
function retr(circle)
{
var cke = document.cookie.split(';');
var nameCk= name + "=";
for(var i=0; i < cke.length; i++)
{
var c = cke [i];
while (c.charAt(0)==' ') c = c.substring(1, c.length);
if (c.indexOf(nameCk) == 0)
return c.substring(nameCk.length, c.length);
}
return null;
}
function createCookie()
{
var exdate = new Date();
exdate.setDate(exdate.getDate() +10);
if (document.getElementById("circle").checked)
{
document.cookie = "Circle=" + document.getElementById("quantity1").value + document.getElementById("price1").value + ";expires="+exdate.toGMTString();
}
}
function retrieve()
{
if (document.getElementById("circle").checked)
{
document.getElementById("ret").value = document.cookie;
}
}
function Calc()
{
var fpri = document.getElementById("price1").value;
var pri = fpri.substr(1);
var qty = document.getElementById("quantity1").value;
var spri = document.getElementById("price2").value;
var pri2 = spri.substr(1);
var qty2 = document.getElementById("quantity2").value;
if (document.getElementById("circle").checked)
{
document.getElementById("total").value ='$' + Number(pri) *
Number(qty);
}
else
document.getElementById("total").value = '$' + Number(pri2) *
Number(qty2);
}
</script>
</head>
<body>
<table border = "1">
<tr>
<td> <input type="checkbox" id="circle" /> Circle </td>
<td> <img src="circle.jpg"> </img> </td>
<td> Price: <input type="text" size="4" value = "$10.00"
id="price1" name = "price1" /></td>
<td> Quantity: <input type="text" size = "4"
id="quantity1"/></td>
</tr>
<tr>
<td> <input type = "checkbox" id="stickman" /> Stickman </td>
<td> <img src = "stickman.gif"> </img> </td>
<td> Price: <input type="text" size="4" value = "$5.00"
id="price2" /> </td>
<td> Quantity: <input type="text" size="4" id="quantity2" />
</td>
</tr>
</table>
<br />
<input type = "button" value = "Add to cart"
onclick="createCookie()">
<br />
<br />
<a href ="cart.html" > View Cart </a>
<br />
<input type = "text" size = "8" id = "total" readonly = "readonly"
/> Total
<br />
<input type = "button" id = "calcu" value = "calc" onclick = "Calc
()" />
<input type = "button" value = "retrieve" onclick = "retrieve()" />
<input type = "text" readonly = "readonly" name = "ret" id =
"ret"/>
</body>
</html>
the calculate and retrieve buttons, and the readonly text boxes are there just so i know the cookie is being stored and retrieved, and that i'm able to get the total, which will be displayed on my cart page.
here is the code for my cart page
cart.html
<html>
<head>
<title> Cart </title>
<h1> My cart </h1>
<script type = "text/javascript">
function retr(circle)
{
document.getElementById("q2").value = document.getElementById("quantity1").value
}
function retrieve()
{
var quvalue = retr("circle")
if (quvalue != false) {
document.getElementById("q2").value = quvalue
}
document.getElementById("ret").value = document.cookie;
}
</script>
</head>
<body onload = "retrieve()">
<table border = "1">
<td>Stickman </td>
<td><input type = "text" size = "8" id = "q2" readonly = "readonly" /></td>
<td id ="p1"> price per </td>
<td id ="t1"> total </td>
<tr> </tr>
<td> Circle </td>
<td> quantity order </td>
<td> price per </td>
<td> total </td>
<tr> </tr>
<td colspan = "3"> TOTAL: </td>
<td> total price </td>
</table>
<br /> <br />
<input type ="text" id = "ret" readonly = "readonly" />
<br / > <br />
<input type = "button" value = "Checkout">
<br /> <br />
<a href = "store.html" > Continue Shopping </a>
</body>
</html>
the values that are supposed to be retrieved in the table are invoked using the onload event attribute which is suppose to call the retrieve() function.
also, i understand that the way i created the table in my carts page isn't completely correct. but my main focus right now is to get the necessary values to be displayed in my table, then i will go back in rewrite my table code.