CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Amjad
Amjad

Reputation: 2100

PHP HTML JQuery on select change fill the text fields with php values

Don't know how to title this question but i can explain my situation here, I've the following code (this is not a real data I had to create this to show you guys what I want)

<!DOCTYPE html>
<html>
<head>
    <title>Multiple form submit </title>


</head>
<body>
<form action="test.php" method="POST">
    First Name : <input type="text" name="fname" /><br />
    Last Name : <input type="text" name="lname" /><br />
    Gender : <input type="text" name="gender" /><hr />
    <select class="form-control input-sm" name="rta_address" id="rta_address">
        <option value="2">5, Footer street, AA2 2KK</option>
        <option value="23">44, Header street ZZ6 7FF</option>
        <option value="28">56, Oak street, DD5 5LL</option>
        <option value="33">5, (flat 5) Temple street, EE2 9HH</option>
    </select>
    <br />
    Postcode : <input type="text" name="postcode" /><br />
    House No : <input type="text" name="houseno" /><br />
    Street : <input type="text" name="street" /><br />

    <input type="submit" name="submit" value="Save" />

</form>
</body>
</html>

What I would like to know is... if user does not have any other address than those provided in drop-box, then user can select one value from drop-box and that value should fill those address text-fields otherwise user can type it manually

Please keep that in mind if form has about 40 items I only show you here 7 or 8 so submitting a form I don't think would be a good idea because at that point form is no fully filled..

Please also note that all the address are coming from database through a loop.

I hope you're getting my point

please feel free to ask anything if necessary to solve this...

Regards

Upvotes: 1

Views: 1325

Answers (4)

Vicky
Vicky

Reputation: 613

You can use jQuery library to achieve it easily. Code sample is below 

$(document).on('change','#rta_address',function(e){
             if($.trim($(this).val())!=''){

                       var tmp= $(this).val().split(" ");
                       var house_no=tmp[0];
                       var street=tmp[1]+" "+tmp[2];
                       var post_code=tmp[3]+" "+tmp[4]; 
                       $('input[name="postcode"]').val(post_code) ;
                       $('input[name="houseno"]').val(house_no) ;
                       $('input[name="street"]').val(street) ;
             }

});

Upvotes: 2

Think Different
Think Different

Reputation: 2815

You can do it like this:

 $('#rta_address').change(function(){
      var data = $(this).text().split(',');
      $('input[name="houseno"]').val($.trim(data[0])) ;
      $('input[name="street"]').val($.trim(data[1])) ;
      $('input[name="postcode"]').val($.trim(data[2])) ;  

 });

Yes you can do an empty select like:

in jquery

 $('#rta_address').append($('<option>-- SELECT --</option>');
 $('#rta_address').text('-- SELECT --');

or in html (add this to the select)

 <option selected="selected">-- SELECT --</option>

Upvotes: 4

SNAG
SNAG

Reputation: 2113

you can use data attributes for each option for eg:

<option data-houseno="5" data-street="Footer Street" data-pincode="AA2 2KK">
   5, Footer street, AA2 2KK
</option>

to get the data in jquery use this

$(document).on('change','#rta_address',function(){
      $('input[name="postcode"]').val($(this).find('option:selected').data('postcode')) ;
      //AND SO ON
})

Upvotes: 2

Jay Blanchard
Jay Blanchard

Reputation: 34426

Here is an example - http://jsfiddle.net/3UA7X/2/

$('#rta_address').change(function(){
    var addressParts = $(this).val().split(',');
    $('input[name="postcode"]').val(addressParts[2]);
    $('input[name="houseno"]').val(addressParts[0]);
    $('input[name="street"]').val(addressParts[1]);
});

Upvotes: 2

Related Questions