Wavelet Wavelet - 8 days ago 6
HTML Question

submit button doesn't work with html code

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>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</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.)

Answer

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.

Comments