submit button doesn't work with html code

1
votes

I have this HTML code:

<!DOCTYPE html>
<html>
<head>
    <title>Modal</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="modalUI.css">

    <script src="jquery-3.1.1.js"></script>
    <script src="jquery-3.1.1.min.js"></script>

    <link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.min.css">
    <script src="jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
    <script src="jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $('#create-user').click(function(){
                $('#dialog').dialog("open");
            });

            $('#dialog').dialog({
                draggable: true, 
                resizable: false, 
                closeOnEscape: true,
                modal: true,  
                autoOpen: false
            });
        });
    </script>
</head>
<body>
    <form id="form1">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John</td>
                    <td>Doe</td>
                    <td>[email protected]</td>
                </tr>
                <tr>
                    <td>Mary</td>
                    <td>Moe</td>
                    <td>[email protected]</td>
                </tr>
            </tbody>
        </table><br>

        <input type="button" value="Show Dialog" id="create-user"/>
        <div id="dialog" title="Create new User">
            <form id="form2" action="">
                <label for="name">FirstName</label><br>
                <input type="text" name="fname" ><br>

                <label for="lastname">LastName</label><br>
                <input type="text" name="lname" ><br>

                <label for="email">Email</label><br>
                <input type="email" name="email" ><br><br>

                <button type="submit" value="Submit" id="submitDemo">Submit</button>
                <button type="reset" value="Reset">Reset</button>
            </form>
        </div>
    </form>
</body>
</html>

My submit button doesn't work when the dialog popup. What should I write on my jQuery? p.s Submit works outside the div dialog. But how to make it work into the dialog??

Dont mind this lorem ipsum thing. (Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.)

3
jqueryhtml
Have you closed the brackets of $(document).ready(function(){ – m1crdy
Why are you calling submit() function on submit button click? It should be called automatically. – Vaidas
@Vaidas <button type="submit", which the OP's code already has will do exactly the same thing as your suggestion. – ADyson
You're including jQuery 3 times. You can remove the second two. You're also including jQueryUI twice, remove the first one (the non '.min.js'). There's also a mis-matched form tag which will be causing problems and needs to be removed. – Rory McCrossan
@MattCowley yep, you're right. I missed the closing tag as it wasn't clearly formatted. OP: nested forms are not valid HTML. – Rory McCrossan

3 Answers

7
votes

The submit button in your dialog is not working because you've got nested forms - form2 is inside form1, which is not valid.

Move the dialog (<div id="dialog" and everything inside it) outside of form1 and the submit button will cause a postback as expected.

P.S. Despite the title of the question, the root cause of this issue is nothing to do with jQuery, or even Javascript. It's simply malformed HTML.

0
votes

Form tag is missing instructions, namely... method="post" action=""

-1
votes

If you can use inline Javascript, you could try using an onclick attribute.

This would be like:

<input type="button" value="Show Dialog" id="create-user" onclick='$("#dialog").dialog("open");' />

If you can use inline Javascript, try ditching jQuery with the event listener.

<input type="button" value="Show Dialog" id="create-user"/>
<script>
document.addEventListener("DOMContentLoaded", function () {
    document.getElementById("create-user").addEventListener("click", function () {
        $('#dialog').dialog("open");
    });
});
</script>

EDIT: As others said, you could also change the input element to a button. That would look better, since the button is not in a form.

<button type="button" id="create-user">Show Dialogue</button>