How to populate multiple form inputs from a single select element

TomBajzek

I'm to trying to populate two form inputs from a single select element: a person's name and the person's email address. So, I'd like to return these two values from a single option in my select, as both values exist in the same record of my related table. I think I can see how I could return return both values in a string (or in JSON), but I don't see how I can separate those into two inputs in the Javascript to populate two inputs in my form. For example, with a single option to my select, I'd like to be able to derive the name "Mickey Mouse" and the email "mmouse@example.com" and populate the fields name and email with those values. What is the right way to do that with DataTables / Editor?

Thanks

allan

dependent() is the method to use for populating other fields based on the value of another. If the information needed for the two other fields is available in the option then you could use a function in the dependent callback to populate the other fields. Otherwise you will need to make an Ajax call to get the name and e-mail based on whatever value the select contains (an id presumably).

Allan

TomBajzek

I'd read the documentation for dependent perviously and thought it was probably the method to use, but I couldn't figure out how to apply it. I think you might have put me onto the right track:

Let's assume that I pass back the value for the name field in my PHP, and define in the Javascript the email field as dependent on the name field. Then I give the email field a callback to an Ajax routine that provides the email value (that corresponds to the selected name). I think I don't even need to make the email field visible in the editor, since it is dependent on the name field.

Is that what you are suggesting?

Thanks

allan

From your original question you have three fields - a select input (I'm not sure what the values of it are - a joined table?) the name and email. The name and email will be derived solely from the select. Is that correct?

If so, the JSON return from the select can set both the value for the name and the email.

Regards,
Allan

TomBajzek

Allan,

Yes, the email and the name (actually a responder code combined with the name) are derived solely from the select.

The pulldown I generate from the select element displays the person's name. Upon selection of a name from that pulldown, I'd like to return two values - the email address of the selected person, and a responder code for that person (that is used elsewhere by previously existing software that I did not write and cannot influence). Both of these returned values are to be saved in a database record when the create or edit is submitted.

So, essentially, the selection of one entry in a pulldown should deliver two values to different form inputs in the editor. I can assemble both returned values into either a string or an object in the PHP to pass them back to the Javascript. However, I don't see how to populate the two form inputs with the desired values after separating the values in the Editor Javascript.

Assume records looks like this:
name, responderCode, email
"Alan Ames", "A - Alan Ames", "aames@example.com"
"Bruce Baker", "B - Bruce Baker", "bbaker@example.com"

When the user selects a name from the pulldown, I want to populate both the responderCode and email fields corresponding to the selected name.

Does that clarify what I'm trying to accomplish?

I've looked at the documentation for dependent, and I suspect that I need to use a callback function to unpack the json that I construct in PHP, but I don't see how to refer to the inputs at that point. That's where I think I'm hung up, unless there's an alternate way of doing this that I'm just not thinking of.

Thanks,
Tom

allan

Hi Tom,

Does that clarify what I'm trying to accomplish?

Yes thank you. dependent() is certainly the way to go. If you can have the server respond with something like:

{
  "values": {
    "name": "Value for name field",
    "email": "Value for email field"
  }
}

then that should do it.

Allan

TomBajzek

Allan,

It looks like I've got it now, and I thought I should show the working code, as I didn't find this solution in the forums, and I think it might be useful to someone else trying to do what I wanted to do. ( As a slight simplification, I changed this slightly to use the responder field itself, referred to as responderCode in my example above, as the field that the email field depends on.) So, the code below sets the value of an input field that is dependent on the selection made in another field.

My code is as follows:

    taskEditor.dependent('responder1', function(val, data, callback) {
        $.ajax( {
            url: './php/getResponder.php',
            dataType: 'json',
            data: { "responder": val },
            success: function( data ) {
                theEmail = data["values"]["email"];
                taskEditor.field('email1').input().attr( 'value', theEmail );
            }
        } );
    } );

I based this solution on your prior responses here and on the example in this discussion: (https://datatables.net/forums/discussion/42231 ).