Member Avatar for PetrQ

Hi all,
please, help me with jquery - I'm totally amateur in javascript.
I use script to assign the value to item selected from html select box.
The second script adds row into my form.
The first row works o.k. but if I´m adding another rows, only value from the first row is functional.
Thanks for any advice. Petr

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.table.addrow.js"></script>
<script type="text/javascript">
(function($){
	$(document).ready(function(){
		$(".addRow").btnAddRow();
		$(".delRow").btnDelRow();
});
})(jQuery);
</script>

<script type="text/javascript">

var message = new Array() 

message["Acoustic"]="3000";
message["Electric"]="500";


	$(document).ready(
		function (){
 $(".item_select").change(function() 
    { 
        var message_index 
 
        message_index = $(".item_select").val(); 
        $(".message_display").empty(); 
 
        //if (message_index > 0) 
            $(".message_display").append(message[message_index]); 
			//$("input").val(message_index);
			$(".price").val(message[message_index]);
    }); 
});
	</script>

</head>
<body>
<br />
<br />
<font color='#CC3300' size='5'>Catalogue</font><br />
<br />
<form method='POST' name='signupForm' class='cmxform' id='signupForm' action='#'>
  <table cellspacing='0'>
    <tr>
      <th style='text-align: center;'></th>
      <th>Model</th>
      <th>Price</th>
    </tr>
    <tr>
      <td><input type='button' class='delRow' style='height: 25px; margin: 0 0 10px 0;' value='X'/></td>
      <div>
        <td><select class='item_select' name='item_select' style='width:200px; margin: 0 0 10px 0;'>
            <option value='Acoustic'>Acoustic</option>
            <option value='Electric'>Electric</option>
          </select>
        </td>
        <td><input type='text' name='price' class='price' style='margin: 0 0 10px 0;' size='2' value=''></td>
      </div>
    </tr>
    <tr>
      <td colspan='3' align='right'><input type='button' class='addRow' name='add' value='Add Row'/></td>
    </tr>
    <tr>
      <td colspan='5' align='center'><input type='submit' name='send' value='Send'></td>
    </tr>
  </table>
</form>
</body>
</html>
  • 2 Contributors
  • 2 Replies
  • 114 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by PetrQ
Member Avatar for Airshow

Petr,

You will have more success by working with ids rather than classes.

With classes, a statement like $(".price")....... will match ALL elements where class="price" .

With ids, a statement like $("#price_0")....... will match ONE element where id="price_0" .

On creating a new row, you should ensure that appropriate elements are given unique ids, for example by appending _0, _1, _2 etc. to a basic id.

You also need to introduce a means of attaching your "change" handler to the select menu in each new row as it is created. Without this, the desired functionality will not happen in new rows.

Personally, I would coordinate everything (adding rows and responding to user events) within a single $(document).ready(function(){} structure. It will look something like this:

<script type="text/javascript">
$(document).ready(function(){
	var rowIndex = 0;
	var message = {
		Acoustic : "3000",
		Electric : "500"
	};

	var modelSelect = function(){
		var val = this[this.selectedIndex].value;
		$('#price_'+this.rowIndex).val(message[val]);//"this" is the select menu that has just been changed by the user.
		$("#message_display").text(message[val]);//Not sure about message_display. Assume there's just one for the whole page.
	};

	//Set up the first row, served as HTML.
	$("#item_select_0").attr( {rowIndex:0} );//Set attribute that tells the select menu its unique reference number
	$("#item_select_0").change(modelSelect);//Attach onchange event handler.

	$("#addRow").click( function(){
		//Arrange for btnAddRow (in addition to creating and appending the new row) to return a reference to the new selectMenuObj that is included in the new row.
		var selectMenu = btnAddRow(++rowIndex);//Pass in incremented rowIndex so btnAddRow can append to base id.
		selectMenu.rowIndex = rowIndex;//Set attribute so the new select menu has a reference to its unique reference number
		selectMenu.onchange = modelSelect;//Attach onchange event handler to the new row's selectMenu.
	});

	$("#delRow").click( function(){ btnDelRow(); });
});
</script>

NOTE: Not tested and still plenty of work to do in btnAddRow().

Airshow

Edited by Airshow because: n/a
Member Avatar for PetrQ

Thank you Airshow!
I´m going to try it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.