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

Dev Shed Forums Sponsor:

November 5th, 2012, 01:38 PM

DavidPr

Contributing User

Join Date: Mar 2007

Posts: 98

Time spent in forums: 1 Day 2 h 56 m 15 sec
Reputation Power: 8

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?

November 5th, 2012, 07:13 PM

E-Oreo

Lost in code

Join Date: Dec 2004

Posts: 7,931

Folding Points: 945 Folding Title: Novice Folder

Time spent in forums: 2 Months 7 h 48 m 54 sec
Reputation Power: 7053

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
How to program a basic, secure login system using PHP

Quote:

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

November 6th, 2012, 04:30 PM

DavidPr

Contributing User

Join Date: Mar 2007

Posts: 98

Time spent in forums: 1 Day 2 h 56 m 15 sec
Reputation Power: 8

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.

November 6th, 2012, 05:44 PM

E-Oreo

Lost in code

Join Date: Dec 2004

Posts: 7,931

Time spent in forums: 2 Months 7 h 48 m 54 sec
Reputation Power: 7053

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?

November 6th, 2012, 05:55 PM

DavidPr

Contributing User

Join Date: Mar 2007

Posts: 98

Time spent in forums: 1 Day 2 h 56 m 15 sec
Reputation Power: 8

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.

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

Developer Shed Advertisers and Affiliates