We Keep Coding

Show error on specific input field in html table td using jQuery

I am trying to highlight the input field which is in html table td. I am looping the html table but unable to highlight the input field if quantity is 0 in input field. what i have tried is below.
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li>details</li>
<li>captain</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="details">
<div class="row">
<div class="col-sm-12">
<h4 class="info-text">
Let's start with the basic details.
</h4>
</div>
<div class="form-horizontal">
<div class="form-group">
<div class="col-md-12">
<div class="persons">
<table class="table table-condensed table-hover" id="tblPurchaseOrders">
<tr>
<th>
Product Code
</th>
<th>
SKU
</th>
<th>
Product Name
</th>
<th>
Quantity
</th>
</tr>
<tr>
<td>
<input type="text" name="ProductCode" value="A" class="form-control" />
</td>
<td>
<input type="text" name="SKU" value="A1" class="form-control" />
</td>
<td>
<input type="text" name="Name1" value="A1" class="form-control" />
</td>
<td>
<input type="text" id="Quantity" value="0" class="form-control" />
</td>
</tr>
<tr>
<td>
<input type="text" name="ProductCode" value="B" class="form-control" />
</td>
<td>
<input type="text" name="SKU" value="B1" class="form-control" />
</td>
<td>
<input type="text" name="Name1" value="B1" class="form-control" />
</td>
<td>
<input type="text" id="Quantity" value="1" class="form-control" />
</td>
</tr>
</table>
</div>
</div>
</div>
<hr />
</div>
</div>
</div>
<div class="tab-pane" id="captain">
<div class="row">
<div class="form-group">
<div class="col-md-12">
<table class="table table-condensed table-hover" id="tbOrderDetail">
<tr>
<th>
Product Code
</th>
<th>
SKU
</th>
<th>
Product Name
</th>
<th>
Quantity
</th>
</tr>
</table>
</div>
</div>
</div>
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;">First</li>
<li class="previous">Previous</li>
<li class="next last" style="display:none;">Last</li>
<li class="next">Next</li>
</ul>
</div>
</div>
<div class="tab-content">
</div>
Below is my jquery code where i am looping the html table and want to highlight the input field which is in html table td.
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({
onTabShow: function(tab, navigation, index) {
if (index == 1) {
$('#tblPurchaseOrders').find('tr:has(td)').each(function() {
if (parseInt(($(this).find('#Quantity')).val()) == 0)
{
//show error
}
});
}
}
});
});

You are filtering per ID (#Quantity). Two (or more) elements cannot share the same ID. Try to select elements by name, for example:
$('#tblPurchaseOrders').find('td > input[name=Quantity]').each(function() {
var val = $(this).val();
if (parseInt(val) == 0)
{
// show error
// note: if needed, you can obtain a reference
// to container <tr> using: $(this).parent('tr');
}
});
Remember to change id property of Quantity elements to name.
Note: untested code that might not work as-is, I'm just showing you the right direction.

If your intention is to use the Twitter Bootstrap Wizard (TBW from now on) for your validation flow, you probably don't want this validation to trigger when you open the tab, which is what happens, when you place your code inside of the onTabShow function.
I assume you want the validation of the fields to be done when the user wants to go to the next step, by pressing the "Next" link you have, or rather, when you want to load the "next tab". For this, you should use onNext rather than onTabShow for your validation.
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({
tabClass: 'nav nav-pills',
onNext: function(tab, navigation, index) {
var res = $("input[name='Quantity']").each(function() {
var val = $(this).val();
if(parseInt(val) == 0) {
$(this).focus();
// This will stop the .each-iteration
// We only want to focus the _first_ element, otherwise it
// would keep iterating, and change focus to the next 0-valued input
return false;
}
});
// We use the result returned from running the each function
// If false was returned at any point during the .each function,
// var res will be false. Pass this onto the onNext call, to
// prevent the the user to move to next tab.
if(!res) return false;
}
});
});
For this to work, you'll have to replace id="Quantity" with name="Quantity", in both your instances.
If you want to use .focus() on the first element, regardless of which input is invalid, you should remove $(this).focus() from the previous example, and instead replace if(!res) return false with the following:
if(!res) {
$("input[name='Quantity']").first().focus();
return false;
}

Can you try this
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li>details</li>
<li>captain</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="details">
<div class="row">
<div class="col-sm-12">
<h4 class="info-text">
Let's start with the basic details.
</h4>
</div>
<div class="form-horizontal">
<div class="form-group">
<div class="col-md-12">
<div class="persons">
<table class="table table-condensed table-hover" id="tblPurchaseOrders">
<tr>
<th>
Product Code
</th>
<th>
SKU
</th>
<th>
Product Name
</th>
<th>
Quantity
</th>
</tr>
<tbody id="dtTable">
<tr>
<td>
<input type="text" name="ProductCode" value="A" class="form-control" />
</td>
<td>
<input type="text" name="SKU" value="A1" class="form-control" />
</td>
<td>
<input type="text" name="Name1" value="A1" class="form-control" />
</td>
<td>
<input type="text" id="Quantity" value="0" class="form-control" />
</td>
</tr>
<tr>
<td>
<input type="text" name="ProductCode" value="B" class="form-control" />
</td>
<td>
<input type="text" name="SKU" value="B1" class="form-control" />
</td>
<td>
<input type="text" name="Name1" value="B1" class="form-control" />
</td>
<td>
<input type="text" id="Quantity" name="Quantity" value="1" class="form-control" />
</td>
</tr>
</table>
</div>
</div>
</div>
<hr />
</div>
</div>
</div>
<div class="tab-pane" id="captain">
<div class="row">
<div class="form-group">
<div class="col-md-12">
<table class="table table-condensed table-hover" id="tbOrderDetail">
<tr>
<th>
Product Code
</th>
<th>
SKU
</th>
<th>
Product Name
</th>
<th>
Quantity
</th>
</tr>
</table>
</div>
</div>
</div>
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;">First</li>
<li class="previous">Previous</li>
<li class="next last" style="display:none;">Last</li>
<li class="next">Next</li>
</ul>
</div>
</div>
<div class="tab-content">
And Javascript code
$(document).ready(function () {
$('#rootwizard').bootstrapWizard({
onTabShow: function (tab, navigation, index) {
if (index == 0) {
$('#dtTable tr').each(function (i, row) {
$(this).find('[name=Quantity]').each(function () {
alert($(this).val())
})
if ($(this).val() == 1) {
///Do something
}
});
}
}
});
});

get id from a table, with a outside button

well i have a html table, and a button next to it, i try to get the id from the table when the user click that button.
This is the HTML
<table id="table_domExtra2_pro" class="col m12 bordered striped centered ">
<thead>
<tr>
<th>No.</th>
<th>PROPIETARIO DEL INMUEBLE</th>
<th>REGIMEN DE PROPIEDAD</th>
<th>COMO SE ACREDITA LA <br>POSESION DE LA PROPIEDAD</th>
<th>SUPERFICIE DE <br>LA UNIDAD</th>
</tr>
</thead>
<tbody>
<tr>
<td class="count">
</td>
<td>
<input name="propietario" id="propietario" type="text" class="validate" required>
</td>
<td>
<input name="reg_propiedad" id="reg_propiedad" type="text" class="validate" required>
</td>
<td>
<input name="pose_propiedad" id="pose_propiedad" type="text" class="validate" required>
</td>
<td>
<input name="sup_unidad" id="sup_unidad" type="text" class="validate" required>
</td>
</tr>
</tbody>
</table>
<div class="add_icon col s1 m6 ">
<a id="btn_agregar_pro" class="btn waves-effect red">Agregar</a>
</div>
<div class="add_icon col s1 m6 ">
<a id="btn_eliminar_pro" class="btn waves-effect red">Eliminar</a>
</div>
This is the js
$('#btn_eliminar_pro').on("click", function(){
var idTable3 = $(this).parent().closest("table").attr("id");
var trs4 = $("#"+idTable3+" tr").length;
if(trs4 > 2){
$("#table_domData_pro tr:last").remove();
$("#table_domExtra_pro tr:last").remove();
$("#table_domExtra2_pro tr:last").remove();
}
});
I try with .prev() to, but Im really lost, i have other tables in the document and the js just select other table, not the one previus to the button, thanks a lot for your help :D

Use siblings() of the div to find the closest table. The below gets the id of the table. I have just added siblings() to your existing code.
var idTable3 = $(this).parent().siblings().closest("table").attr("id");

after using clone function in a row how can create different id for each row

after using clone function in a row, how can create different id for each row
i using add more button add new rows i like to create different id for each row
function cloneRow() {
var row = document.getElementById("clone");
var table = document.getElementById("data");
var selectIndex = 1;
var clone = row.cloneNode(true);
table.appendChild(clone);
clone.setAttribute("style", "");
var newSelectBox = document.createElement("select");
newSelectBox.setAttribute("id", "select-" + selectIndex++);
alert(newSelectBox.getAttribute("id"));
}
<div class="row">
<div class="col-sm-12">
<div class="col-sm-7"></div>
<div class="col-sm-2">
<button type="button"class="btn btn-primary default btn-xs" onclick="cloneRow()" >add more...</button>
</div>
</div>
</div><br>
<div class="row" id ="close">
<div class="col-sm-4"></div>
<div class='col-sm-4'>
<Form id="NAME_VALUE" method="POST" >
<table class="table-striped" >
<tbody id="data">
<tr id ="clone" style="display:none;">
<td>
Name :<input type="text" name="INPUT_NAME" style="width:100px;" id="name" name="INPUT_NAME">
</td>
<td>
Value :<input type="text" name="INPUT_VALUE" style="width:100px;" id="value" name="INPUT_VALUE">
</td>
<td>
<button type="button"class="btn btn-primary default btn-xs" name ="delete" style="margin-left: 5px;" onclick="deleteRow(this);
return false;">
<span class="glyphicon glyphicon-remove-circle" style="text-align:center" ></span></button>
</td>
</tr>
<tr>
<td>
Name :<input type="text" name="INPUT_NAME" style="width:100px;" id="name" name="INPUT_NAME">
</td>
<td>
Value :<input type="text" name="INPUT_VALUE" style="width:100px;" id="value" name="INPUT_VALUE">
</td>
<td>
<button type="button"class="btn btn-primary default btn-xs" name ="delete" style="margin-left: 5px;" onclick="deleteRow(this);
return false;">
<span class="glyphicon glyphicon-remove-circle" style="text-align:center" ></span></button>
</td>
</tr>
</tbody>
</table><br>
<button type="button"class="btn btn-primary default btn-xs" style="margin-left: 5px;" onclick="submit_login();
return false;"> save.</button>
</Form>
</div>
</div>
its coming only select-0 to every one i like to select-0,select-1, select-2 depends on the add more button clicked

You can set a variable like this outside your function :
var i = 0;
and update it inside your function :
i = i + selectIndex
https://jsfiddle.net/gg1eyqgu/

Form is presenting same data in php while loop

I am trying to get an edit form to work with the loop in the php. I have a delete button and it works just fine. The edit form keeps presenting only the first row in the table. In firebug, it shows that all the other forms are there with the correct unique id for each but only the first form shows when edit is clicked on different rows. Can someone help me as to why?
<table id="table_id" class="table table-hover table-striped">
<thead>
<tr>
<th>ID #</th>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<?php
while($row = mysqli_fetch_assoc($search_sql)) {
?>
<tr>
<td id = "clicked"><?=$row['ID']?></td>
<td id = "clicked"><?=$row['Product']?></td>
<td id = "clicked"><?=$row['Quantity']?></td>
<td id = "clicked">$ <?=$row['Price']?></td>
<td>
<button class="btn btn-warning btn-sm" onclick="div_show2(this, '<?=$row['ID']?>'); return false;"><span class="glyphicon glyphicon-edit"></span>Edit</button>
<!-- Modal for the Edit Data Form -->
<div id ="hidden-form2">
<div id = "popupContact">
<form action= "updateData.php" id = "editForm<?=$row['ID']?>" method="POST" name="editForm">
<input type="hidden" name="ID" value="<?=$row['ID']?>">
<div class="form-group">
<label for="product">Product</label>
<input type="text" class="form-control" id="product<?=$row['ID']?>" name="product" value="<?=$row['Product']?>">
</div>
<div class="form-group">
<label for="quantity">Quantity</label>
<input type="text" class="form-control" id="quantity<?=$row['ID']?>" name="quantity" value="<?=$row['Quantity']?>">
</div>
<div class="form-group">
<label for="price">Price</label>
<input type="text" class="form-control" id="price<?=$row['ID']?>" name="price" value="<?=$row['Price']?>">
</div>
<button type="button" class="btn btn-default" onclick="formHide2()">Close</button>
<button type="submit" id="save" class="btn btn-primary">Save changes</button>
</form>
</div>
</div>
<!--End of Edit Form-->
</td>
<td>
<!--Delete Button Form-->
<form method="post" action="deleteData.php">
<button class="btn btn-danger btn-sm" type="submit"><span class="glyphicon glyphicon-trash"></span>Delete</button>
<input type="hidden" id="ID" name="ID" value="<?=$row['ID']?>">
</form>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
//script for calling the edit forms as a modal popup
//Function To Display Popup for Edit form
function div_show2() {
document.getElementById("editForm").reset();
document.getElementById('hidden-form2').style.display = "block";
}
//Function to Hide Popup
function formHide2(){
document.getElementById('hidden-form2').style.display = "none";
}

Your show_div2 function is only showing one element.
document.getElementById('hidden-form2').style.display = "block";
That shows you why you are only seeing the first row.
Update your HTML and Javascript as follows
HTML
<div id="hidden-form2<?=$row['ID']?>">
Javascript
function div_show2(id) {
document.getElementById("editForm"+id).reset();
document.getElementById('hidden-form2'+id).style.display = "block";
}
To avoid having any problems like this in the future, always make sure that your id's are unique.

The first 4 td I see all use the same id name clicked. Try to fix that first and see what happens.
<td class="clicked" id="clickedID<?=$row['ID']?>"><?=$row['ID']?></td>
<td class="clicked" id="clickedProduct<?=$row['ID']?>"><?=$row['Product']?></td>
<td class="clicked" id="clickedQuantity<?=$row['ID']?>"><?=$row['Quantity']?></td>
<td class="clicked" id="clickedPrice<?=$row['ID']?>">$ <?=$row['Price']?></td>

Get td value when clicking the td row. MVC

I have a prblem with fetching the right value from a Td element. I can get the first element in the table when im clicking on that element but no other row is working. My code is looking like this:
<div id="Users">
<table id="UserTable" class="table table-striped table-bordered" width="100%" cellspacing="0">
<thead>
<tr>
<th name="id">ID</th>
<th name="UserName">Användarnamn</th>
<th>Installation</th>
<th>Säljföretag</th>
</tr>
</thead>
<tbody>
#foreach (var users in Model.AdminUsers)
{
<tr>
<td id="userId">#users.Id</td>
<td id="userName" >
<a id="userIds"href="#backdropreport" class="">#users.UserName </a>
</td>
<td>#users.InstallationId</td>
<td>#users.MerchantId</td>
</tr>
}
</tbody>
</table>
</div>
And my Jquery code:
$("#userName").click(function () {
var id = $("#userId").text();
$("#user").val(id);
});
Model content dialog
<div id="backdropreport">
<div class="modal-content">
<div class="header">
<h3>Återställ lösenord</h3>
</div>
#using (Html.BeginForm("ResetPassword", "Users", FormMethod.Post))
{
<div class="copy">
<div class="form-group">
<div class="m-form-item">
För att återställa lösenordet så tryck på återställ så kommer ett mail skickas med ett nytt lösenord
</div>
<div style="clear: both;">
</div>
<div class="m-form-item">
<input type="submit" id="reset" value="Återställ" class="btn btn-primary" />
<a id="close" href="#" class="btn btn-grey">Stäng</a>
</div>
<div class="m-form-item">
</div>
</div>
<input type="text" id="user" name="user" />
</div>
}
</div>
<div class="overlay"></div>
The thing i want to do is to fetch the id of a specific td element when a user is clicking on the username. At the moment just the first element in the table is working. Any suggestions?

Html attribute "id" should be unique, but when you're doing foreach loop, then in all rows < td > element has id="userId". I would recommend you adding userId to html id attribute:
<tbody>
#foreach (var users in Model.AdminUsers)
{
<tr>
<td id="userId_#users.Id">#users.Id</td>
<td id="userName_#users.Id" >
<a id="userIds"href="#backdropreport" class="">#users.UserName </a>
</td>
<td>#users.InstallationId</td>
<td>#users.MerchantId</td>
</tr>
}
</tbody>

An id is supposed to be unique through the whole DOM document. You can use classes instead, and use the .class selector.
#foreach (var users in Model.AdminUsers) {
<tr>
<td class="userId">#users.Id</td>
<td class="userName">
<a class="userIds" href="#backdropreport">#users.UserName</a>
</td>
<td>#users.InstallationId</td>
<td>#users.MerchantId</td>
</tr>
}
$(".userName").click(function() {
var userId = $(this).siblings(".userId").text();
alert(userId);
});