asked on

Json Return Data To Corresponding Text Field

Hi Experts,

I have a table with multiple rows (dynamic as well, user can add multiple rows) and the structure is like this :

Table Code:

<table>
<tr>
<td>
	<select name="de_name[]" id="de_name" class="de_name">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>
</td>
<td>
	<input class="value-field" name="details[]" value="" type="text" readonly="readonly" />
</td>
</tr>

<tr>
<td>
	<select name="de_name[]" id="de_name" class="de_name">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>
</td>
<td>
	<input class="value-field" name="details[]" value="" type="text" readonly="readonly" />
</td>
</tr>

<tr>
<td>
	<select name="de_name[]" id="de_name" class="de_name">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>
</td>
<td>
	<input class="value-field" name="details[]" value="" type="text" readonly="readonly" />
</td>
</tr>

<tr>
<td>
	<select name="de_name[]" id="de_name" class="de_name">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>
</td>
<td>
	<input class="value-field" name="details[]" value="" type="text" readonly="readonly" />
</td>
</tr>
</table>

Open in new window

Javascript Code:

$(function(){
	$('.de_name').change(function(){
	    var SelectedItem = $(this).val();

	    $.get('fetch_data.php', {"de_name": SelectedItem})
	    .done(function(returnedData){

	        $('.value-field').val(returnedData);
	    });
	});
});

Open in new window

The issue is that it updates all the input text fields in the table. I want it to update only the corresponding textbox upon the change of dropdown.

How can I do it? please help.

Dave Baldwin

Your 'name's and 'id's are not unique and they need to be if you only want one of them to be updated.

Ray Paseur

Further to what Dave points out, the id= attribute must be unique in the entire document. It is associated with the # (hashtag) CSS selector. The class= attribute may be duplicated; it is associated with the . (dot) CSS selector. You can use the W3 Validation Service to see if your HTML markup is OK. Google Chrome Dev Tools can help, too.

Rahul Sehrawat

ASKER

Hi Experts,

Thanks for your replies. The situation is something like this:

The user specifies the number of rows he/she wants to add and then the rows are added to the table with the following code:

function AddRow(tableID) {

	var count = document.getElementById('NumberOfRowsToBeAdded').value;

	var table = document.getElementById(tableID);

	for (i = 0; i < count; i++) { 

		var rowCount = table.rows.length;
		var row = table.insertRow(rowCount);

		var cell1 = row.insertCell(0);
		cell1.innerHTML = '<select name="de_name[]" class="de_name"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>';


		var cell2 = row.insertCell(2);
		cell2.innerHTML = '<input class="value-field" name="details[]" value="" type="text" readonly="readonly" />';
	}

}

Open in new window

Is there any way how can I make the name different? and how would I submit them?

Rahul Sehrawat

ASKER

on a second thought, is there any way the JavaScript can count already the number of rows in the table and then add the dynamic fields with the name "de_name[rownumber]" and "details[rownumber]", this will make the name unique as well and will still pass as an array.

Ray Paseur

I can't work on this right now, but the design you're describing is very common. I'll get you an example later today if someone else does not beat me to it!

If there are other parts of this application you have not told us about yet, please include those in the future. It often helps to see the bigger picture.

Also, what is the PHP part of this question? I do not see any PHP involvement at all, but maybe I am missing something?

Rahul Sehrawat

ASKER

Sure. Will wait for the design. :)

for PHP, I am using PHP to input the data into the database. I suppose shouldn't have selected php as an category.

Ray Paseur

OK, just wanted to be sure I was not missing anything!

ASKER CERTIFIED SOLUTION

Ray Paseur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Rahul Sehrawat

ASKER

This works great. But I am still confused. Sorry!

I see you have kept the name as de_name[1]" and id as "de_name[1]. Users on my website will be adding these rows dynamically and the javascript code I am using to add dynamic rows is:

function AddRow(tableID) {

	var count = document.getElementById('NumberOfRowsToBeAdded').value;

	var table = document.getElementById(tableID);

	for (i = 0; i < count; i++) { 

		var rowCount = table.rows.length;
		var row = table.insertRow(rowCount);

		var cell1 = row.insertCell(0);
		cell1.innerHTML = '<select name="de_name[]" class="de_name"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>';


		var cell2 = row.insertCell(2);
		cell2.innerHTML = '<input class="value-field" name="details[]" value="" type="text" readonly="readonly" />';
	}

}

Open in new window

How can I make my dynamic fields to have numbers in them?

Thanks for all your help.

Ray Paseur

It seems to work well without the numbers in the array keys. I think the numbers were a left-over from an earlier experiment. As long as we are using the index values consistently between the de_name class and the value_field class it should be OK.

<!DOCTYPE html>
<!-- demo/temp_rahul_client.php -->
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style type="text/css">
/* STYLE SHEET HERE */
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
	$('.de_name').change(function(){
	    var ndx = $('.de_name').index(this);
	    var SelectedItem = $(this).val();

	    $.get('temp_rahul_server.php', {"de_name": SelectedItem})
	    .done(function(returnedData){
	        $('.value_field').eq(ndx).val(returnedData);
	    });
	});
});
</script>

<title>HTML5 Page With jQuery in UTF-8 Encoding</title>
</head>
<body>

<noscript>Your browsing experience will be much better with JavaScript enabled!</noscript>

<table>
<tr>
<td>
	<select name="de_name[]" id="de_name[]" class="de_name">
        <option value="0">Choose</option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>
</td>
<td>
	<input class="value_field" name="details[]" value="" type="text" readonly="readonly" />
</td>
</tr>

<tr>
<td>
	<select name="de_name[]" id="de_name[]" class="de_name">
        <option value="0">Choose</option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>
</td>
<td>
	<input class="value_field" name="details[]" value="" type="text" readonly="readonly" />
</td>
</tr>

<tr>
<td>
	<select name="de_name[]" id="de_name[]" class="de_name">
        <option value="0">Choose</option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>
</td>
<td>
	<input class="value_field" name="details[]" value="" type="text" readonly="readonly" />
</td>
</tr>

</table>

</body>
</html>

Open in new window

Rahul Sehrawat

ASKER

Awesome Thanks!

Rahul Sehrawat

ASKER

Hi Again,

I just noticed it doesn't work on dynamically generated elements. Can you please help me on this.

Thanks

Ray Paseur

Suggest you post a new question giving the example code and showing us what is wrong.