CODEWITHSUNDEEP
javascriptjqueryhtml
cadebe
cadebe

Reputation: 691

jQuery: Can't get the submit button to work

I am familiar with JavaScript but new to jQuery and very lost at the moment. I realise this question has been asked before, but I am not clear on how to solve this one. I am creating a dialog box with a submit button. When the submit button is clicked, it should direct to the function ’getUsername()’. I tested the code in JavaScript and I got it to work successfully, but can’t get the same result with the jQuery dialog box. The dialog box shows, with the text input and submit button, but clicking the button doesn't yield any result.

This is the html code:

<body onload="showDialog()">
        <form id="usernameInput" action="" onsubmit="return getUsername()">
            <br><br>
             <input type="text" id="usernameBox" required>
             <input type="submit" value="Start chatting!">
         </form>
     </div>
</body>

and this is the script:

 function showDialog(){
        $(document).ready(function(){
        $( "form" ).dialog({
            open: function() {
            $( this ).find( "[type=submit]" ).hide(); },
            title: 'Enter username',
            width: 500,
            height: 300,
            modal: false,
            buttons: [{
                text: "Start chatting!",
                click: $.noop,
                type: "submit"
            }
            ]
        });

    });     
  }

Upvotes: 0

Views: 432

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

Because the submit button is created outside the form, so the automatic form submit won't work

function showDialog() {
    $(document).ready(function () {
        $("form").dialog({
            open: function () {
                $(this).find("[type=submit]").hide();
            },
            title: 'Enter username',
            width: 500,
            height: 300,
            modal: false,
            buttons: [{
                text: "Start chatting!",
                click: function(){
                    $("form").submit()
                },
                type: "submit"
            }]
        });

    });
}

See the dom structure

DOM of the Dialog

Demo: Fiddle

Upvotes: 2

Related Questions