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? ps 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.)
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.
PS 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.
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>
上一篇: javascript摘要我检查的输入
下一篇: 提交按钮不适用于HTML代码