0

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>
2
Contributors
4
Replies
28
Views
2 Years
Discussion Span
Last Post by diafol
0

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.

0
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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.