I want a certain portion of code to be inserted into a text area depending on which option is clicked in a dropdown box.
Where it says you selected header. I want it to display about 10 lines of code for each option. Can I store the lines of code in a varibale then just call the variable for each option? Any help on theis would be really appreciated. Thanks

<form class="form-horizontal form-box" role="form">
                                    <h4 class="form-box-header">Text Inputs</h4>
                                    <div class="form-box-content">                                      

                                       <div class="form-group">
                                            <label class="col-lg-4 control-label">Page Area</label>

                                            <div class="col-lg-8">                                             
                                                <select class="form-control" id="options" onchange="Edit()">
                                                    <option value="1">Header</option>
                                                    <option value="2">Footer</option>
                                                    <option value="3">Sidebar</option>
                                                    <option value="4">Background</option>                                                    
                                                </select>
                                            </div>
                                        </div>


                                        <script type="text/javascript">
                                        function Edit()
                                        {
                                            var frm = document.forms[0];
                                            var abc = frm.options.value;
                                            if (abc === "1")
                                                frm.text1.value = "You selected Header";
                                            else if (abc === "2")
                                                frm.text1.value = "You selected Footer";
                                            else if (abc === "3")
                                                frm.text1.value = "You selected Sidebar";
                                            else
                                                frm.text1.value = "You selected Background";
                                        } 
                                        </script>

                                        <div class="form-group">
                                            <label class="col-lg-4 control-label">Content</label>

                                            <div class="col-lg-8">
                                                <textarea class="form-control" name="text1" rows="20" placeholder="Textarea"></textarea>
                                            </div>
                                        </div>

                                        &nbsp;


                                    </div>
                                </form>

I used ckeditor. Thanks for your help really appreciate it.

Member Avatar
diafol

Well this should be straightforward.

It can all be done with client side code (js). You can store data as json if you want and attach button click (or dropdown/select change event) to changing editor content.

Member Avatar
diafol
function setMyData( selectedItem )
{
    CKEDITOR.instances.editor1.setData( myCodeData[selectedItem] );
}

myCodeData global var that contains all your html data (json)
selectedItem is the option value passed from your dropdown onchange event.