CODEWITHSUNDEEP
phpmysqlajax
Abdullah
Abdullah

Reputation: 175

Changing the value of Input field when user select option from select box

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.

Upvotes: 1

Views: 4176

Answers (1)

Fenistil
Fenistil

Reputation: 3801

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/

Upvotes: 0

Related Questions