Select field controlled and populated by JavaScript using JSON, PHP and MySQL

Question

I have a select field currently being populated using a simple bit of PHP for looping. The purpose of this field is to make completion of the form easier and quicker. By allowing the user to select presets that are available in the select field.

When an option is selected in the field a JavaScript function will be activated , which will populate the other fields in the form with data associated to that option.

Example situation what the JavaScript will do:

Please select an option - {Off peak tariff, Texter Package, GPRS package, Custom}

If user selects package that is not equal to Custom

Then insert values into fields {Voice allowance, SMS allowance, Internet allowance, Voicemail allowance}

Here is a screenshot of the form and illustration of what I am trying to do:

enter image description here

Currently I have my options populated purely with PHP like so.

//prints out option list for select field    
foreach ($result as $array)
    echo '<option value="'. $array.' ">'. $array. '"</option>';

This works fine at the moment however I have just realised I am going to make my life difficult at a later stage of development for the form as I am going to be using Javascript to manage that field, so it makes sense for the whole field to be done in JavaScript.

This means the JavaScript will :

Load data from JSON that contains data for the select field and its associated data that will go in other fields.
Populate the select field with data from JSON.
Monitor the field for onchange.
Effect other fields in form

As this is all rather new territory for me, I was hoping you guys could point me in the right direction how to:

Pass data to JavaScript in the best possible way, do I have seperate arrays (one for pull down , one for other field values) or would an object be better to store everything and just pass that through JSON? ?
How do I handle the data passed to JavaScript from PHP? Is there an equivelant to foreach in JavaScript to handle an array?
Should I do all the preparation on PHP side or let JavaScript just handle the raw data?

Any examples of code or similar projects would be really welcome! :)

As you may be able to tell I have an idea in my head how I want to achieve this but I do not know if this is the best way.

Thanks for your time

You lost me at the part where creating the <select> options in PHP was going to make your life difficult. What exactly makes you think that? — Pointy
– Pointy, Commented Dec 15, 2011 at 14:57
Well if Im going to be passing stuff to the form in PHP and in Javascript as well , it could potentially get a bit messy I though. So I though just doing it all through JS would be neater? — tomaytotomato
– tomaytotomato, Commented Dec 15, 2011 at 14:59

Derk Arts · Accepted Answer · 2011-12-15 15:37:38Z

1

Ok, how I would do it, assuming you use jQuery.

Considering the dropdown with presets is already populated (I see no problem there).

Client side (JS):

//On page load
$().ready(function() {  
    //Onchange event for the dropdown
     $('#presetDropdown').change(function(){
        //Get the dropdown value
        var preset = $(this).val();
         //Make the AJAX request
         $.ajax({  
                        type: "POST", 
                        //Ajax php file here:
                        url: 'ajax.php', 
                        dataType: 'json', 
                        //Which data to send:
                        data: "req=getPreset&preset="+preset , 
                        //Oncomplete
                        complete: function(data){

                             try{
                                var result = JSON.parse(data.responseText);
                                //Populate the fields with the returned data
                                 $('#field1').html(result[0]);
                                 $('#field2').html(result[1]);
                                 $('#field3').html(result[2]);
                               }catch(err){
                                  alert(err.message);
                               }


                  }
            }); 
     });

});

You could also loop through the returned array in JS with each() (see jQuery docs)

On the PHP end (ajax.php):

switch ($_POST['req'])
{
    case 'getPreset':
        //Get preset here en stuff into array:
        $aReturnArray = array($sValForField1,$sValForField2,$sValForField3);
    break;

}
//JSON encode the return array
echo json_encode($aReturnArray);

You can greatly expand this, but with these info you should be able to get the basics working

answered Dec 15, 2011 at 15:37

Derk Arts

3,4702 gold badges20 silver badges36 bronze badges

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

2 Comments

tomaytotomato Over a year ago

Thanks, even though this is in jQuery It gives me a good idea how I will tackle this! Thanks for coming in here and giving me your advice! :)

Derk Arts Over a year ago

You could do it in plain JS as well, but that would make it more complex, so I really advise you to use the handy frameworks :)

Collectives™ on Stack Overflow

Select field controlled and populated by JavaScript using JSON, PHP and MySQL

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related