#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2007
    Posts
    98
    Rep Power
    9

    Put specific information into field B based on a selection made in select field A


    I'd like to populate a form text field with content based on the selection of a select field. I'm thinking that javascript with ajax perhaps is the only way to do this. If ajax would I need to include a basic jquery script (or similar) such as
    PHP Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> 
    Here's what I'd like to do:
    PHP Code:
    <select name="align">
    <
    option value="right">Right</option>
    <
    option value="left">Left</option>
    </
    select>

    if (
    name == "right") {
    <
    input type="text" name="style" size="20" value="margin:0 0 8px 20px;" />
    }
    else
    {
    <
    input type="text" name="style" size="20" value="margin:0 20px 8px 0;" />

    Is there a javascript/ajax tutorial that teaches how to do this?
  2. #2
  3. No Profile Picture
    Lost in code
    Devshed Supreme Being (6500+ posts)

    Join Date
    Dec 2004
    Posts
    8,317
    Rep Power
    7170
    You only need to use AJAX if you have to retrieve data from the server. Based on your example, I don't see any need to do that.

    The basic premise, is that you bind to the select box so that a JavaScript function is triggered whenever the value is changed. Inside that function, you grab the current value of the select box and then do whatever you want with it, like change the properties on another element.

    Using jQuery, you would use the bind function to accomplish the first part, a selector to accomplish the second (retrieving the selected option value), and the css function to accomplish the final part.
    PHP FAQ

    Originally Posted by Spad
    Ah USB, the only rectangular connector where you have to make 3 attempts before you get it the right way around
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2007
    Posts
    98
    Rep Power
    9
    I used this in the head section:
    PHP Code:
    <script language="javascript" type="text/javascript">
    $(
    window).load(function(){
    $(
    'select').on('change', function() {
        $(
    "select option:selected").each(function () {
            $(
    '#styles').val('$' + $(this).attr('data-style'));
        });
    });
    });
    </script> 
    and this in the body:
    PHP Code:
    <select size="2" id="align" name="align">
        <
    option data-style="margin:0 20px 8px 0" value="left">Left</option>
        <
    option data-style="margin:0 0 8px 20px" value="right">Right</option>
    </
    select>

    <
    input type="text" id="styles" name="styles" /> 
    but no go. I have other select fields on the page so maybe that's a problem. I tried this with the javascript in the head and in the body.
  6. #4
  7. No Profile Picture
    Lost in code
    Devshed Supreme Being (6500+ posts)

    Join Date
    Dec 2004
    Posts
    8,317
    Rep Power
    7170
    Your code looks correct, however if you have more than one select box on your page that code will bind the handler to all of them.

    Make sure you don't have more than one element with an id of 'styles' on your page.

    Perform some basic debugging on it if it isn't working. Add alert statements in to see what is getting run. Does your load event trigger? Does your change event trigger? What is the value of the data-style attribute that it is retrieving?
    PHP FAQ

    Originally Posted by Spad
    Ah USB, the only rectangular connector where you have to make 3 attempts before you get it the right way around
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2007
    Posts
    98
    Rep Power
    9
    I only have one field with styles assigned. When I select either right or left nothing happens or should I say, that nothing is put into the styles field. I thought the "data-style" attribute was the tie that binds the select field and the text input field together.


    I think I know what the problem is... I'm trying to use this script in TinyMCE's advimage image.htm file and they already have a billion or so javascripts running and they're all intertwined, and my little script just can't compete. I don't like how TinyMCE takes your hspace and vspace image setting and split it for the top and bottom (for vspace) and left and right (for hspace).

    I wanted to bypass their vspace and hspace setting and insert in their Styles field my own margin setting for either left or right align, which is set through their align select field. I removed all the other options and limited it to just right align or left align. and had just the two margin settings to go into the Styles text input field.

    When you select either right or left align they have a script that inserts either "float: left;" or "float: right;" setting into the Styles field. I was hoping to add my margin setting to it as well and I don't see that working. When you remove their javascript the whole thing goes kaput.

    So, I'm not going to be able to use it for this purpose but if it works it will certainly be a blessing in some other things that I have, which I'll be testing it in within the next couple of days.

    Anyway, I appreciate the help.
    Last edited by DavidPr; November 6th, 2012 at 11:54 PM.

IMN logo majestic logo threadwatch logo seochat tools logo