1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Using Jquery to populate cloned textarea based on dropdown

Discussion in 'jQuery' started by GNetCoder, Jan 19, 2010.

0
  1. #1
    Hello, all. I am working with an example from the net, but there seems to be a bug.

    The idea is to select a product, and the price field is populated with the product price.

    The user can clone the set of boxes and make another entry.

    Problem is that when you clone the fields, the previous price field loses the value.

    Can someone help me figure this out? Here is the code example:

    
<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--  <script language="javascript" type="text/javascript" src="js/niceforms.js"></script>-->
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<!-- <link rel="stylesheet" type="text/css" media="all" href="css/niceforms-default.css" />  -->
<script type="text/javascript">
    var newRowNum = 0;
$(document).ready(function(){
    $('#add-order-row').click(function(){
		newRowNum += 1;
        var addRow = $(this).parent().parent();
        var masterRow = addRow.next();
        var newRow = masterRow.clone(false);
        // Change the ids for the new row
        $(newRow).attr({
			'id'    : 'order-row-' + newRowNum,
			'name'  : 'order-row-' + newRowNum
        }).find(':input, button, select').each(function(){
		$(this).attr({
			'id'    : $(this).attr('id') + "_" + newRowNum,
			'name'  : $(this).attr('name') + "_" + newRowNum
		});
                  }); 
                  // Append new row to DOM                
                  masterRow.after(newRow);
                  $('#order_item_product_' + newRowNum).change(function () {
                          var id = $('#order_item_product_' + newRowNum).val();
                      $('#order_item_price_' + newRowNum).val($('#order_item_product').data(id).price);
                  }).change();
                  // Add the remove function to the new row
                  //$('button#order_item_delete_' + newRowNum).click(function(){
                  //        $(this).parent().parent().remove();
                  //        return false;                           
                  //});
    
                  // prevent the default click
                  return false;
         });
});
 
$(document).ready(function(){
         $.extend({
                  getUrlVars: function(){
                           var vars = [], hash;
                           var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
                           for(var i = 0; i < hashes.length; i++)
                           {
                                         hash = hashes[i].split('=');
                                         vars.push(hash[0]);
                                         vars[hash[0]] = hash[1];
                           }
                           return vars;
                  },
                  getUrlVar: function(name){ return $.getUrlVars()[name]; }
         });
         $('#order_item_product').data('1', { name: 'p1', price: '1.99' });
         $('#order_item_product').data('2', { name: 'p2', price: '2.99' });
         $('#order_item_product').data('3', { name: 'p3', price: '3.99' });
         $('#order_item_product').append('<option value="1">p1</option><option value="2">p2</option><option value="3">p3</option>')
         $('#order_item_product').change(function () {
                  var id = $('#order_item_product').val();
                  $('#order_item_price').val($('#order_item_product').data(id).price);      
    }).change();
});
 
 
</script>
 
</head>
 
<body>
 
<div id="container">
        <form action="#" method="post" class="niceform" name="moe-order-screen" id="moe-order-screen">
        <fieldset>
                <legend>Product Order Sheet</legend>
                <dl>
                        <p style="line-height: 5px;"><button type="button" name="add-order-row" id="add-order-row">Add Row</button></p>
                </dl>
        <dl id="order-row" name="order-row">
                <dd style="line-height: 5px; text-align: right;">Qty:<input type="text" name="order_qty" id="order_qty" size="6" maxlength="6" />&nbsp;&nbsp;&nbsp;Product:<select size="1" name="order_item_product" id="order_item_product"></select>&nbsp;&nbsp;&nbsp;Price:<input type="text" name="order_item_price" id="order_item_price" size="6" maxlength="20" />&nbsp;&nbsp;&nbsp;Total:<input type="text" name="order_item_total" id="order_item_total" size="6" maxlength="20" /></dd>
                </dl>
        </fieldset>
        </form>
 
</div>
 
</body>
</html>
    Code (markup):

     
    GNetCoder, Jan 19, 2010 IP
  2. GNetCoder

    GNetCoder Peon

    Messages:
    68
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Maybe I am making this too complex? I started out using a jquery clone plugin set up as below.

    Maybe there is an easier way to auto-populate the prices based on the product selection using this as a basis? I thought about Ajax, but it seems like overkill for this;

    if I could get the products and prices into a javascript array from php (easily done), it could be all nice and neat on the client side, but I have no idea how to set up the fields (an onchange(), I guess?)

    Ideas anyone?

    
<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--  <script language="javascript" type="text/javascript" src="js/niceforms.js"></script>-->
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/relCopy.jquery.js"></script>
<!-- <link rel="stylesheet" type="text/css" media="all" href="css/niceforms-default.css" />  -->
<script type="text/javascript">
   
 $(function(){
   $('a.copy').relCopy();	
});
</script>
 
</head>
 
<body>
 
<strong>Items:</strong><br />
	<!-- current plugin: http://www.andresvidal.com/labs/relcopy.html -->
<p><a href="#" class="copy" rel=".item">Add Item</a></p>
<p class="item">
	<label>Qty: <input type="text" name="qty[]" value="1" size="1" /></label>
	<label>Item: 
		<select  name="qty[]">
			<option value="1">p1</option>
			<option value="2">p2</option>
			<option value="3">p3</option>
		</select>
	</label>
	<label>Price: <input type="text" name="price[]" size="5" /></label>
</p>
</body>
</html>
    Code (markup):
     
    GNetCoder, Jan 19, 2010 IP
  3. GNetCoder

    GNetCoder Peon

    Messages:
    68
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I think I figured it out!!!! (I am happy because I learned a few things!!)

    Can someone critique this? Is there some thing I am missing, it seems to be functioning as planned, but maybe I am missing something?

    To reiterate, I needed the user to be able to select a product from a dropdown menu, and have it's corresponding price appear in an editable text-input field; Then also have a button or link so that the user could clone the fields and choose the next product.

    Here is my solution:

    <!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/relCopy.jquery.js"></script>
<!-- current cloning plugin: http://www.andresvidal.com/labs/relcopy.html -->
<script type="text/javascript">

 $(function(){
   $('a.copy').relCopy();	
});

$(document).ready(function(){
	
	$('.item').data('1', { name: 'p1', price: '1.99' });
	$('.item').data('2', { name: 'p2', price: '2.99' });
	$('.item').data('3', { name: 'p3', price: '3.99' });
	$('.item:last').append('<option value="1">p1</option><option value="2">p2</option><option value="3">p3</option>')
         
	$(".item:last").change(function () {
		var id = $('.item:last').val();
		$('.price:last').val($('.item').data(id).price);
	}).change();

});

</script>
 
</head>
<?php
	if (isset($_POST['submit'])) {
		echo "<pre>";
		print_r($_POST);
		echo "<pre>";
	}
 ?>
<body>
 
<strong>Items:</strong><br />
<form method="post">
<p><a href="#" class="copy" rel=".item_select">Add Item</a></p>
<p class="item_select">
	<label>Qty: <input type="text" name="qty[]" value="1" size="1" /></label>
	<label>Item: 
		<select class="item" name="item[]">
		</select>
	</label>
	<label>Price: <input type="text" class="price" name="price[]" size="5" /></label>
</p>
 <input name="submit" type="submit" value="Click Here to Submit" />
</form>
</body>
</html>
    Code (markup):
     
    Last edited: Jan 19, 2010
    GNetCoder, Jan 19, 2010 IP