1

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

17
  • Have you closed the brackets of $(document).ready(function(){
    – m1crdy
    Nov 25, 2016 at 14:35
  • Why are you calling submit() function on submit button click? It should be called automatically.
    – Vaidas
    Nov 25, 2016 at 14:36
  • 3
    @Vaidas <button type="submit", which the OP's code already has will do exactly the same thing as your suggestion.
    – ADyson
    Nov 25, 2016 at 14:44
  • 3
    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. Nov 25, 2016 at 14:46
  • 1
    @MattCowley yep, you're right. I missed the closing tag as it wasn't clearly formatted. OP: nested forms are not valid HTML. Nov 25, 2016 at 14:52

3 Answers 3

7

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.

4
  • Thanks a lot. It worked. Also, how can I submit the data into the form1?
    – Wavelet
    Nov 25, 2016 at 14:56
  • 3
    if you have done what I suggest, then you haven't got any data in form1 to submit. All the form fields are within your dialog, and enclosed within form2
    – ADyson
    Nov 25, 2016 at 14:58
  • Yes I did it, and worked perfectly. But now, The data that I will put into the form 2(into the dialog), I need them to be showed into the form1. Can I do it in anyway without using db?
    – Wavelet
    Nov 25, 2016 at 15:10
  • yes you can use javascript/jQuery to just copy the contents of each form element into an element somewhere else on the page. You don't have to save it to the db at at all, unless you want the data to persist beyond the life of the page. BTW, you don't need a <form> if all you want to do is display data (e.g. form1 in your case) - forms in HTML are for data entry, not display.
    – ADyson
    Nov 25, 2016 at 15:47
0

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

-1

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>
1
  • 2
    Don't use inline JS code. Use unobtrusive event handlers. This is also logically no different to what the OP already has. Nov 25, 2016 at 14:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.