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

Question

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

You will need a proper format to differentiate between postcode, houseno and street in the select options. Like 5 Footer street AA2 2KK should probably be 5, Footer street, AA2 2KK. If the data can be formatted like that then yes it is possible. — Think Different
– Think Different, Commented Jun 25, 2014 at 12:56

Think Different · Accepted Answer · 2014-06-25 13:14:13Z

4

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>

edited Jun 25, 2014 at 13:14

answered Jun 25, 2014 at 13:04

Think Different

2,8251 gold badge14 silver badges18 bronze badges

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

5 Comments

Amjad Over a year ago

Thank you @ThinkDifferent can i ask you some thing here.. as you can see that drop-box will show the first item selected but i don't want anything selected at the beginning of the page just blank once an option is selected that blank should disappear

Think Different Over a year ago

@UsmanSharifAmjadKhan yes you can. Please check the updated answer.

Amjad Over a year ago

and would that disappear once changed because i don't want to show that empty select option once user have chosen the correct option... thanks

Think Different Over a year ago

Yes once user chose an option, the user will only see the chosen one :)

Amjad Over a year ago

Thank very much for the answer but i was asking something else but that's fine i'll use jquery to remove that first blank option #

SNAG · Accepted Answer · 2014-06-25 13:08:03Z

2

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
})

answered Jun 25, 2014 at 13:08

SNAG

2,1332 gold badges24 silver badges46 bronze badges

Comments

Jay Blanchard · Accepted Answer · 2014-06-25 13:05:27Z

2

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]);
});

answered Jun 25, 2014 at 13:05

Jay Blanchard

34.5k17 gold badges82 silver badges130 bronze badges

Comments

Vicky · Accepted Answer · 2014-07-31 05:03:32Z

2

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) ;
             }

});

edited Jul 31, 2014 at 5:03

answered Jun 25, 2014 at 13:02

Vicky

6135 silver badges6 bronze badges

4 Comments

Jay Blanchard Over a year ago

The only issue with this is that you might not know how many words may be in the address parts.

Think Different Over a year ago

Yes @JayBlanchard and the option value is empty. Need to use the text part.

PugsOverDrugs Over a year ago

You would ave t change the $(this).val().split to $(this).text().split he is not assigning a value to the drop down menus, only a text. ( although he should set a value on the options for better manipulation and for use when the form gets submitted )

PugsOverDrugs Over a year ago

also, split on ',', not on space, the road Fire Flower Avenue would parse into more pieces than Dove Road.

Collectives™ on Stack Overflow

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

4 Answers 4

5 Comments

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related