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.
Rahul SehrawatAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
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 PaseurCommented:
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 SehrawatAuthor Commented:
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?
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Rahul SehrawatAuthor Commented:
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 PaseurCommented:
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 SehrawatAuthor Commented:
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 PaseurCommented:
OK, just wanted to be sure I was not missing anything!
Ray PaseurCommented:
This seems to test out OK.

First the server-side script.  It expects a number in numeric form, and returns the number in text form, or the word "Unknown."
<?php // demo/temp_rahul_server.php
error_reporting(E_ALL);

// SET THE DEFAULT RESPONSE
$response = 'Unknown';

// INTERPRET THE REQUEST
$request
= !empty($_GET['de_name'])
? $_GET['de_name']
: 0
;
// CHOOSE THE APPROPRIATE RESPONSE
switch($request)
{
    case 1: $response = 'One';
    break;

    case 2: $response = 'Two';
    break;

    case 3: $response = 'Three';
    break;
}

// WRITE THE RESPONSE
echo $response;

Open in new window

Next the client-side script.  Note the correspondence of the .index() method in the change function, and the .eq() method in the value-setting function.  You can test here:
http://iconoun.com/demo/temp_rahul_client.php
<!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[0]" id="de_name[0]" 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[1]" id="de_name[1]" 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[2]" id="de_name[2]" 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

HTH, ~Ray

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Rahul SehrawatAuthor Commented:
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 PaseurCommented:
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 SehrawatAuthor Commented:
Awesome Thanks!
Rahul SehrawatAuthor Commented:
Hi Again,

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

Thanks
Ray PaseurCommented:
Suggest you post a new question giving the example code and showing us what is wrong.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.