jQuery plugin cut my input and set it outside of the form

Question

I am using jqx dropdown button for some elements in a form on my jsp page.

when I set them as the following

<form name="myForm">

    <input type="button" value="one" onclick="validate(this.form);">

        <div style="float: left;" id="dropDownButton">
              <div style="border: none; display: none;" id='jqxTree'>
            <ul>
               <li>
              <input type="button" value="two" onclick="validate(this.form);">
               </li>
               <li>
               <input type="button" value="three" onclick="validate(this.form);">
               </li>
              </ul>
           </div>
        </div>

    <input type="button" value="four" onclick="validate(this.form);">

    </form>

and the following to get what I want:

$("#dropDownButton").jqxDropDownButton({ width: 90, height: 22, theme: theme });

doing this it somehow sets the dropDownButton div out of the form and it obviously throws error saying this.form is unknown.

How can I fix this issue or is it possible to assign an external element back to my form?

Answer 1

Without seeing any CSS, it's hard to say why something might be misaligned. One thing for sure though is that your input tags are not properly formed. These should be self-closing <input type="button" /> - the ending /> is the key so they aren't looking for an ending tag.

I would also suggest not using inline onclick attributes to call the validate function. This could all be done with a simple JS function. So here's my proposed revision:

Here's the cleaned up HTML

<form name="myForm" id="myForm">

    <input type="button" value="one"/>

    <div style="float: left;" id="dropDownButton">
        <div id='jqxTree'>
            <ul>
                <li>
                    <input type="button" value="two"/>
                </li>
                <li>
                    <input type="button" value="three"/>
                </li>
            </ul>
        </div>
    </div>

    <input type="button" value="four"/>

</form>

And here's the JavaScript/jQuery

$(function(){
    //Hide the dropdown with JS, then call the plugin
    $("#dropDownButton")
        .hide()
        .jqxDropDownButton({
            width: 90,
            height: 22,
            theme: theme
        });

    //Save the form to a variable so we only have to select it once
    var $theForm = $("#myForm");

    //Find all the buttons inside the form, then attach a click event
    $theForm
        .find("input[type='button']")
        .on("click",function(){
            //Pass the form into the validate function when a button is clicked
            validate(theForm);
        });

});