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">
<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">

<script type="text/javascript">

var message = new Array() 


		function (){
        var message_index 
        message_index = $(".item_select").val(); 
        //if (message_index > 0) 

<br />
<br />
<font color='#CC3300' size='5'>Catalogue</font><br />
<br />
<form method='POST' name='signupForm' class='cmxform' id='signupForm' action='#'>
  <table cellspacing='0'>
      <th style='text-align: center;'></th>
      <td><input type='button' class='delRow' style='height: 25px; margin: 0 0 10px 0;' value='X'/></td>
        <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>
        <td><input type='text' name='price' class='price' style='margin: 0 0 10px 0;' size='2' value=''></td>
      <td colspan='3' align='right'><input type='button' class='addRow' name='add' value='Add Row'/></td>
      <td colspan='5' align='center'><input type='submit' name='send' value='Send'></td>
7 Years
Discussion Span
Last Post by PetrQ


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

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


Edited by Airshow: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.