how to get all the data from query and put it input box using jquery

Question

i want to get all data to be put in input box where i will select in option box the name of the ingredients that i want to view for example in my data my ingID has a 1,2,3 name has a potato,carrot,beans kilo has a 3,4,5

if i have select the potato the value in input ingID will be 1 and value of input name will be potato and value of input kilo will be 5

is this possible?

<input type="text"  id="ingID" name="ID">
<input type="text"  id="name" name="name">
<input type="text"  id="kilo" name="kilo">


<?php
    include "core/database/connect.php";
    $result = mysql_query("SELECT  ingID , name , kilo FROM ingredients");
    while($row = mysql_fetch_array($result)) {
        echo '<option value = " ' .$row["name"]. ' " >'.$row["name"].'</option>';
    }                   
?>

I'm in my phone so I can only suggest: put inside the value of the option the Id of the ingredient and the kilos, ex: value='1:5'. using the onchange jquery function retrieve this value with val(), then the name of the ingredient with text(),you can use the split function to divide the information of the value. Finally you can write the value inside the input with: val(value) — Razorphyn
– Razorphyn, Commented Sep 30, 2013 at 9:22

secelite · Accepted Answer · 2013-09-30 09:34:46Z

1

You can simple do this with jQuery. I set the value attribute of each option to the ID of the record from the DB. But you could also use something like data-id.

I have setup a jsfiddle: http://jsfiddle.net/8Pe9E/

HTML:

<div>ID: <input type="text"  id="ingID" name="ID"></div>
<div>Name: <input type="text"  id="name" name="name"></div>
<div>Kilo: <input type="text"  id="kilo" name="kilo"></div>
<div>Ingredients:
<select name="ingredients">
    <option value = "1" data-kilo="3" >potato</option>
    <option value = "2" data-kilo="4" >carrot</option>
    <option value = "3" data-kilo="5" >beans</option>
</select>
</div>

And the jQuery:

$('select[name="ingredients"]').change(function() {
    var opt = $(this).find('option:selected');
    $('input#ingID').val($(opt).val());
    $('input#name').val($(opt).text());
    $('input#kilo').val($(opt).data('kilo'));
});

The select field is currently static, but you can change this easyily.

edited Sep 30, 2013 at 9:34

answered Sep 30, 2013 at 9:24

secelite

1,3381 gold badge11 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Allan Paul Mamangun Rosero Over a year ago

but the value that im putting on input box is on database how can i change the value coming from the row of ingredients table?do i ave to use array?im not good on using array .please help.

secelite Over a year ago

@AllanPaulMamangunRosero in your case it should look like:

echo '<select name="ingredients">';     while($row = mysql_fetch_array($result)) {         echo '<option value="' .$row['ingID']. '" data-kilo="' . $row['kilo'] . '">' . $row['name'] . '</option>';     }    	echo '</select>';

Parag Kuhikar · Accepted Answer · 2013-10-02 10:53:30Z

0

You could also use data attribute for that.

include "core/database/connect.php";
 $result = mysql_query("SELECT  ingID , name , kilo FROM ingredients");
 $select = "<select class='getData'>";
 while($row = mysql_fetch_array($result)) {
            $select .= '<option value = " ' .$row["name"]. ' "  data-kilo="'.$row["kilo"].'" data-name="'.$row["name"].'"  data-ingID="'.$row["ingID"].'">'.$row["name"].'</option>';
        }      
 $select .= "</select>";
 echo $select;

And your jquery code.

$(document).ready(function(){

 $(".getData").bind('click',function(){
       var name = $(this).attr('data-name');
       var kilo = $(this).attr('data-kilo');
       var ingID = $(this).attr('data-ingID');

       $("#ingID").val(ingID);
       $("#name").val(name);
       $("#kilo").val(kilo);

 })
})

edited Oct 2, 2013 at 10:53

answered Sep 30, 2013 at 9:21

Parag Kuhikar

4852 gold badges6 silver badges17 bronze badges

1 Comment

Allan Paul Mamangun Rosero Over a year ago

where did you get the data-name is coming from my database?is it like row['name'] row['kilo'] row['ingID']? im gonna try thanks for reply

Collectives™ on Stack Overflow

how to get all the data from query and put it input box using jquery

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related