Each not working on array of elements - javascript

I am trying to find all form input elements and iterate through them, unfortunately Each iterator do not work. I have checked the $inputs variable and it has 5 elements in it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Home Page - My ASP.NET MVC Application</title>
<script src="/Scripts/jquery-1.9.1.js"></script>
</head>
<body>
<script>
$(document).on('click', '#test-endpoint', function () {
var $form = $(this).parents('#test-form').first();
var $inputs = $form.find('input, textarea');
$inputs.each(function () {
//The code never executed
});
}
</script>
<form action="http://do.convertapi.com/Word2Pdf" method="post" accept-charset="utf-8" enctype="multipart/form-data" id="test-form">
<input type="button" name="submitButton" id="test-endpoint" value="Submit1">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Endpoints</h3>
</div>
<div class="panel-body">
POST http://do.convertapi.com/Word2Pdf
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Authentication</h3>
</div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th>Parameter</th>
<th>Description</th>
<th>Authentication</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<strong>ApiKey</strong>
<p>Optional</p>
</td>
<td>
<strong>String</strong>
<p>API Key should be passed if you purchased membership with credits. Please login to your control panel to find out your API Key http://www.convertapi.com/a</p>
</td>
<td>
<input type="text" name="ApiKey" placeholder="Optional">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Parameters</h3>
</div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th>Parameter</th>
<th>Description</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<strong>File</strong>
<p>Required</p>
</td>
<td>
<strong>Binary</strong>
<p>Supported source file formats.</p>
</td>
<td>
<input type="file" name="File">
</td>
</tr>
<tr>
<td>
<strong>DocumentTitle</strong>
<p>Optional</p>
</td>
<td>
<strong>String</strong>
<p>Set the title of the generated Pdf file. If value is not set a source document title is used instead.</p>
</td>
<td>
<input type="text" name="DocumentTitle" placeholder="Optional">
</td>
</tr>
<tr>
<td>
<strong>DocumentSubject</strong>
<p>Optional</p>
</td>
<td>
<strong>String</strong>
<p>Set the subject of the generated Pdf file. If value is not set a source document subject is used instead.</p>
</td>
<td>
<input type="text" name="DocumentSubject" placeholder="Optional">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Output</h3>
</div>
<div id="test-output" class="panel-body">
</div>
</div>
</form>
</body>
</html>
I use jQuery 1.9.1


Try surrounding it with $(document).ready(), like:
$(document).ready( function() {
var $form = $(this).parents('#test-form').first();
var $inputs = $form.find('input, textarea');
$inputs.each(function () {
//The code never executed
});
});
Probably your elements do not exist when you call the .each?


You have a missing )
$(document).on('click', '#test-endpoint', function () {
var $form = $'#test-form');
var $inputs = $form.find('input, textarea');
console.log($inputs.get());
$inputs.each(function () {
console.log(this)
//The code never executed
});
});//missing ) here
Demo: Fiddle


Your code as quoted has a syntax error, I can't see how you would ever see $inputs having anything:
$(document).on('click', '#test-endpoint', function () {
var $form = $(this).parents('#test-form').first();
var $inputs = $form.find('input, textarea');
$inputs.each(function () {
alert("Got: " + this.tagName);
});
} // <================= Missing ); here
Here's your original code live, which doesn't work.
Here's a copy with ); added, which does work.
In your web console, there will be an error:
Uncaught SyntaxError: Unexpected end of input


Here is the full code:
var $form = $(this).parents('#test-form').first();
var $inputs = $form.find('input, textarea');
$inputs.each(function ( idx, value) {
//The code never executed
});

Related

Javascript - Jquery shows only the first data in every case

I want to show a third data on my bootstrap modal. If a customer select 2 datas, it shows the relations between the 2 section. I used Jquery for it. It actually worked, but when I open the modal, it just show the first user in every case. I store the datas in MySQL, and the users also. So if I select Computer1 and Computer4, I want to print User1 and User4.
HTML
$(function() {
// cache jQuery objects that we will be re-using
var checkBoxes = $("input[name=case]");
var myModal = $("#myModal");
var user=checkBoxes.data("user");
// get all relationships i.e. key = name, value = connect or null
var relations = {};
checkBoxes.each(function() {
relations[this.dataset.name] = this.dataset.connect;
});
$('#checkBtn').click(function() {
// get checked checkboxes
var checkedBoxes = checkBoxes.filter(":checked");
// validate first
if (checkedBoxes.length !== 2) {
alert("You must check 2 checkbox!");
return false;
}
// build modal body
var html = "<div class='table-responsive'><table class='table table-bordered'><tr><td align='center'><b>Name</b></td><td align='center'><b>Connect to</b></td><td align='center'><b>User</b></td></tr>";
var current = checkedBoxes[0].dataset.name, // start with
end = checkedBoxes[1].dataset.name; // end with
while (current) {
html +="<tr><td>"+current+"</td>";
// check if it is connected
var next = relations[current];
// if it is not connected, stop
if (!next) {
html = 'Not related';
break;
}
// otherwise append HTML
html +="<td>"+next+"</td><td>"+user+"</td></tr>";
// if it is the end, stop
if (next === end) break;
// start over using connected one
current = next;
}
html+="</table></div>";
// update modal
myModal.find('.modal-body').html(html);
// open the modal dynamically once it is ready
myModal.modal('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Checkboxes -->
<div class="container">
<div class="row">
<div class="col-sm-6">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Connect to</th>
<th>Users</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="case" data-name="Computer1" data-connect="Computer3" data-user="User1"></td>
<td>Computer1</td>
<td>Computer3</td>
<td>User1</td>
</tr>
<tr>
<td><input type="checkbox" name="case" data-name="Computer2" data-connect="Computer3" data-user="User2"></td>
<td>Computer2</td>
<td>Computer3</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" name="case" data-name="Computer3" data-connect="Computer4" data-user="User3"></td>
<td>Computer3</td>
<td>Computer4</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" name="case" data-name="Computer4" data-user="User4"></td>
<td>Computer4</td>
<td></td>
<td>User4</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Input button -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<input type="button" id="checkBtn" value="View" class="btn btn-info">
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Title</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="modaldata">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Just like relations, handle users as well.
Culprit is below line, it gives user data of first checkbox.
var user=checkBoxes.data("user");
$(function() {
// cache jQuery objects that we will be re-using
var checkBoxes = $("input[name=case]");
var myModal = $("#myModal");
// get all relationships i.e. key = name, value = connect or null
var relations = {}, users = {};
checkBoxes.each(function() {
relations[this.dataset.name] = this.dataset.connect;
users[this.dataset.name] = this.dataset.user;
});
$('#checkBtn').click(function() {
// get checked checkboxes
var checkedBoxes = checkBoxes.filter(":checked");
// validate first
if (checkedBoxes.length !== 2) {
alert("You must check 2 checkbox!");
return false;
}
// build modal body
var html = "<div class='table-responsive'><table class='table table-bordered'><tr><td align='center'><b>Name</b></td><td align='center'><b>Connect to</b></td><td align='center'><b>User</b></td></tr>";
var current = checkedBoxes[0].dataset.name, // start with
end = checkedBoxes[1].dataset.name; // end with
while (current) {
html +="<tr><td>"+current+"</td>";
// check if it is connected
var next = relations[current];
// if it is not connected, stop
if (!next) {
html = 'Not related';
break;
}
// otherwise append HTML
html +="<td>"+next+"</td><td>"+users[current]+"</td></tr>";
// if it is the end, stop
if (next === end) break;
// start over using connected one
current = next;
}
html+="</table></div>";
// update modal
myModal.find('.modal-body').html(html);
// open the modal dynamically once it is ready
myModal.modal('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Checkboxes -->
<div class="container">
<div class="row">
<div class="col-sm-6">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Connect to</th>
<th>Users</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="case" data-name="Computer1" data-connect="Computer3" data-user="User1"></td>
<td>Computer1</td>
<td>Computer3</td>
<td>User1</td>
</tr>
<tr>
<td><input type="checkbox" name="case" data-name="Computer2" data-connect="Computer3" data-user="User2"></td>
<td>Computer2</td>
<td>Computer3</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" name="case" data-name="Computer3" data-connect="Computer4" data-user="User3"></td>
<td>Computer3</td>
<td>Computer4</td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" name="case" data-name="Computer4" data-user="User4"></td>
<td>Computer4</td>
<td></td>
<td>User4</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Input button -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<input type="button" id="checkBtn" value="View" class="btn btn-info">
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Title</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="modaldata">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Ajax not working on multiple inserts - CI

I want to save multiple data in one go using codeigniter and then on success load the data on my datatable wihtout refreshing the whole page. I am able to do this successfully if I use modal and insert a single value but when I try to save multiple values, it doesn't work. I produce my input boxes on button click. Below are my codes:
CONTROLLER
public function add_multiple_orders(){
$dataset=[];
$item_name=$this->input->post('m_item_name');
$quantity=$this->input->post('m_quantity');
$amount=$this->input->post('m_amount');
$order_comment=$this->input->post('m_order_comment');
$branch_name=$this->input->post('m_branch_name');
$date_added=$this->input->post('m_date_added');
for($i=0;$i<sizeof($item_name);$i++){
$dataset[$i]=array(
'date_added'=>$date_added,
'item_name'=>$item_name[$i],
'quantity'=>$quantity[$i],
'amount'=>$amount[$i],
'ordered_by'=>$this->session->userdata['username'],
'order_status'=>'ordered',
'order_comment'=>$order_comment[$i],
'branch_name'=>$branch_name
);
}
$result=$this->sales_model->insert_mult_orders($dataset);
}
VIEW
<a name="mult_page">
<button class="btn btn-info" data-toggle="collapse" data-target="#add_multiple" style="margin-left: 20px;">Add Multiple Orders</button>
<div class="collapse" id="add_multiple" style="width: 95%; margin: 0 auto; margin-top: 10px;">
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
</div>
<div class="panel-body">
<form class="form_mult_ordrs form-inline" method="post">
<div class="form-group">
<label for="m_date_added">Date</label>
<input type="date" name="m_date_added" required>
</div>
<div class="form-group">
<label for="m_branch_name" class="control-label">Branch Name</label>
<select name="m_branch_name" class="form-control">
<option value="superdome">Superdome</option>';
<option value="seaside">Sea Side</option>
<option value="robinsons">Robinsons</option>
</select>
</div>
<div class="btn btn-warning pull-right" onclick="add_new_row()">Add more</div>
<hr>
<div style="font-weight: bold;">Total Php <input type="text" id="total_result" placeholder="0.00" class="form-control"></div>
<br>
<table id="mult_ord_tbl" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th class="ui-help-center">Item Name</th>
<th class="ui-help-center">Quantity</th>
<th class="ui-help-center">Amount</th>
<th class="ui-help-center">Comment</th>
<th class="ui-help-center">Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select name="item_name[]" class="form-control">
<?php foreach($items as $item){
echo '<option value"='.$item->item_name.'">'.$item->item_name.'</option>';
} ?>
</select>
</td>
<td><input type="text" name="m_quantity[]" placeholder="Quantity"></td>
<td><input type="text" name="m_amount[]" id='m_amount[]' placeholder="Amount" onblur="total_values()"></td>
<td><input type="text" name="m_order_comment[]" placeholder="Commment"></td>
<td>
<button class="btn btn-danger" onclick="delete_row(this)"><i class="glyphicon glyphicon-remove"></i></button>
</td>
</tr>
</tbody>
</table>
<tr>
<td colspan="12">
<button id="btn_mult_ordrs" class="btn btn-success" onclick="save_mult_ordrs()" value="">Submit All</button>
</td>
</tr>
</form>
</div> <!-- end of panel body -->
<div class="panel-footer">
footer
</div>
</div> <!-- end of panel primary -->
</div> <!-- end of column 12 -->
</div> <!-- end of row -->
</div> <!-- end of collapse -->
<script type="text/javascript">
$(document).ready(function(){
$('#table_id').DataTable({
"order":[[0,"desc"]]
});
});
function save_mult_ordrs(){
if(confirm("Are you done?")){
var url="<?php echo site_url('sales/add_multiple_orders')?>";
add_new_row();
// $("#form_mult_ordrs").submit();
$.ajax({
url:url,
type:"POST",
data:$('#form_mult_ordrs').serialize(),
datatype:"JSON",
success:function(data)
{
alert('All data has been saved.');
location.reload();
},
error:function(jqXHR, textStatus, errorThrown){
alert('Error in saving.');
}
});
}
}
function add_new_row(){
var arrTables = document.getElementById('mult_ord_tbl');
var oRows = arrTables.rows;
var numRows = oRows.length;
var newRow = document.getElementById('mult_ord_tbl').insertRow( numRows );
var cell1=newRow.insertCell(0);
var cell2=newRow.insertCell(1);
var cell3=newRow.insertCell(2);
var cell4=newRow.insertCell(3);
var cell5=newRow.insertCell(4);
cell1.innerHTML = "<tr><td><select name='m_item_name[]' class='form-control'>" +
<?php
foreach($items as $item){
echo ('"<option value=\"'.$item->item_name.'\">'.$item->item_name.'</option>"+');
}
?>
+ "</select></td>";
cell2.innerHTML="<td height='5'><input type='text' name='m_quantity[]' placeholder='Quantity'></td>";
cell3.innerHTML="<td height='5'><input type='text' name='m_amount[]' placeholder='Amount' onblur='total_values()'></td>"
cell4.innerHTML="<td height='5'><input type='text' name='m_order_comment[]' placeholder='Comment'></td>";
cell5.innerHTML="<td><button class='btn btn-danger' onclick='delete_row(this)''><i class='glyphicon glyphicon-remove'></i></button></td></tr>";
}
</script>
MODEL
public function insert_mult_orders($data){
$this->db->insert_batch('piercapitan.sls_ordrs',$data);
return $this->db->affected_rows();
}
Your help is immensely appreciated.

Never mind guys. I found what's wrong. It's my form id! I somehow placed the name on the class and not on the id.
<form class="form_mult_ordrs form-inline" method="post">
It should have been:
<form id="form_mult_ordrs" class="form-inline" method="post">

jQuery display dynamic div by choosing different checkbox

I want to display contact information by choosing different checkbox, like this picture:
Here is my code:
$(document).ready(function() {
$('input[type="checkbox"]').on('change', function() {
$('input[name="' + this.name + '"]').not(this).prop('checked', false);
$(this).closest('div').css("display", "block");
});
});
.receipt_info{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr>
<td>
<input type="checkbox" name="receipt[]"/>
</td>
<td>Option1
<div class="receipt_info">
<div>
<label>name1</label>
</div>
<div>
<label>phone1</label>
</div>
<div>
<label>address1</label>
</div>
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="receipt[]"/>
</td>
<td>Option2
<div class="receipt_info">
<div>
<label>name2</label>
</div>
<div>
<label>phone2</label>
</div>
<div>
<label>address2</label>
</div>
</div>
</td>
</tr>
</tbody>
</table>
I think I'm selecting wrong div, but I don't know how to fix it.

Through your div and the checkbox are seperated by td you should use jQuerys parents to get the parent tr and from there start searching for the corresponding receipt_info.
Like so:
$(this).parents('tr').find('.receipt_info').show();
I edited your jsfiddle here.

Try this,
You need to first find the parent tr in which the required div is,
$(document).ready(function() {
$('input[type=checkbox]').on('change', function() {
if ($(this).is(':checked')) {
$(this).closest('tr').find('div.receipt_info').css("display", "block");
}
else
{
$(this).closest('tr').find('div.receipt_info').css("display", "none");
}
});
});
Fiddle : https://jsfiddle.net/9n9pfhe5/1/

Use $(this).closest('tr').find('div.receipt_info') selector!
this refers to element on which event is invoked.
jQuery.closest will traverse up in DOMTree and returned matched element.
jQuery.find will find all the child of he current element.
$(document).ready(function() {
$('input[type="checkbox"]').on('change', function() {
$('input[name="' + this.name + '"]').not(this).prop('checked', false);
$('.receipt_info').hide();
$(this).closest('tr').find('div.receipt_info').show();
});
});
.receipt_info {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr>
<td>
<input type="checkbox" name="receipt[]" />
</td>
<td>Option1
<div class="receipt_info">
<div>
<label>name1</label>
</div>
<div>
<label>phone1</label>
</div>
<div>
<label>address1</label>
</div>
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="receipt[]" />
</td>
<td>Option2
<div class="receipt_info">
<div>
<label>name2</label>
</div>
<div>
<label>phone2</label>
</div>
<div>
<label>address2</label>
</div>
</div>
</td>
</tr>
</tbody>
</table>

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);
});

Categories