1

I am working on an invoice module. There I have a button that generate new row using ajax and from this all fields have the same name like if the name of first field was field1 it will remain field1 for all new generated rows. And I have also one select box having product names that shows option from database (mysql) so when user select an option (product) from the select menu I want to print it's price on the input field. I have this ajax script. It's working fine for the first row. But when I generate a new row and select an option from the select box it doesn't work for that row. And when I change the select option from 1st row its change the value of all input fields. I don't know ajax so don't know how can I resolve this. Please have a view and tell me how can I resolve this problem. 

<html>
<head>
<script type="text/javascript">
    $(document).ready(function(){
        $(".pname").change(function(){
            var id=$(this).val();
            var dataString = 'id='+ id;
            $.ajax
            ({
                type: "POST",
                url: "get_price.php",
                data: dataString,
                cache: false,
                success: function(html)
                    {
                        $(".price").val(html);
                    } 
            });
        });
    });
</script>

</head>
<body>
<select name='pro_name[]'>
<option value='1'>Pro 1</option>
<option value='2'>Pro 2</option>
<option value='3'>Pro 3</option>
</select>

<input type='text' name='price[]'>

<br />

<select name='pro_name[]'>
<option value='1'>Pro 1</option>
<option value='2'>Pro 2</option>
<option value='3'>Pro 3</option>
</select>

<input type='text' name='price[]'>

<br />

<select name='pro_name[]'>
<option value='1'>Pro 1</option>
<option value='2'>Pro 2</option>
<option value='3'>Pro 3</option>
</select>

<input type='text' name='price[]'>

<br />

<select name='pro_name[]'>
<option value='1'>Pro 1</option>
<option value='2'>Pro 2</option>
<option value='3'>Pro 3</option>
</select>

<input type='text' name='price[]'>

<br />

</body>
</html>

P.S. here I write all fields myself but I am using an auto generating script.

Fenistil
  • 3,734
  • 1
  • 27
  • 31
Abdullah
  • 175
  • 3
  • 13

1 Answers1

0

The problem is not with your ajax request, but with the jquery selectors you use. In jquery $('.value') means all DOM elements with a class "value". So $(".price") will select ALL elements with a class "price", but I don't see any of them. To select something by its name you have to use $('input[name=price]'). This will select all inputs with the name "price". To select all inputs which name starts with price, use $('input[name^=price]'). The solution to your problem probably to put the SELECT and the INPUT element in a container, and select the correspondig INPUT only.

<div>
    <select name='pro_name[]'>
    <option value='1'>Pro 1</option>
    <option value='2'>Pro 2</option>
    <option value='3'>Pro 3</option>
    </select>

    <input type='text' name='price[]'>
</div>
<div>
    <select name='pro_name[]'>
    <option value='1'>Pro 1</option>
    <option value='2'>Pro 2</option>
    <option value='3'>Pro 3</option>
    </select>

    <input type='text' name='price[]'>
</div>

<script type="text/javascript">
    var $last_select = null;
    $(document).ready(function(){
        $("select[name^=pro_name]").change(function(){
            $last_select = $(this);
            var id=$(this).val();
            var dataString = 'id='+ id;
            $.ajax
            ({
                type: "POST",
                url: "get_price.php",
                data: dataString,
                cache: false,
                success: function(html)
                    {
                        $('input[name^=price]', $last_select.parent()).val(html);
                    } 
            });
        });
    });
</script>

Fiddle: http://jsfiddle.net/8rsxay8q/1/

Fenistil
  • 3,734
  • 1
  • 27
  • 31
  • Its not working mate :/ could you please try yourself? – Abdullah Jan 26 '15 at 10:15
  • @HafizAbdullahMajid: Have you checked the fiddle? Does it work for you? – Fenistil Jan 26 '15 at 10:17
  • @HafizAbdullahMajid: Accepting my answer would be a nice thanks. :) – Fenistil Jan 26 '15 at 10:58
  • hey brother @Fenistil ! your script is working perfect. But now I have added a clone option to generate new div, script is working for original div but don't work with cloned div. Please tell me what is wrong in scrip thanks :) Cloning script, 'template' is the ID of div – Abdullah Jan 27 '15 at 10:19
  • @HafizAbdullahMajid: The problem is, that you assign the `change` event in `document.ready`, which means that only those DOM elements have this event, that exists when the document is loaded. If you clone something you should assign the change event to the new objects as well. For this, it's a good practice to make the change event to an external function (like `OnSelectChange`) and assign it in the `document.ready` and after the cloning too. For example: `$("select[name^=pro_name]").change(OnSelectChange);` – Fenistil Jan 27 '15 at 14:53
  • @HafizAbdullahMajid: On the other hand, please accept my answer if it was good. Thanks. – Fenistil Jan 27 '15 at 14:55
  • Hey brother! If you don't mind could you please write new script in any fiddle or edit the above script. I will be very thankful to you. Actually I don't know jQuery or Ajax – Abdullah Jan 27 '15 at 16:09
  • @HafizAbdullahMajid First of all, If you don't mind, could you please accept my answer? Thanks again. – Fenistil Jan 27 '15 at 19:11
  • @HafizAbdullahMajid, thanks for the accept :) I can help you, but you should create a new question because I can't send you code formatted here, and can't really explain things. Comments are not for that. If you asked the question write me here and I'll check it ASAP. – Fenistil Jan 28 '15 at 20:40
  • @Fenistil sir please explain more about this by adding comment in it so me & future readers also easily learn. – KUMAR Jul 11 '20 at 17:05