I have implemented a working Modal form using HTML, Bootstrap CSS and PHP, which displays information about a document. In the footer of the Modal I have a 'Delete Document' button which should post to the same page (index.php). The form doesn't react to the submit button.
Reading up on the subject a lot of people are using AJAX to submit from a Bootstrap Modal. This seems unnecessary? Do I really need to implement a JSON post in AJAX just to submit this Modal?
The code:
<div class="modal-footer">
<form action="index.php" method="post">
<input type="hidden" name="DocumentID" value="<?php echo $row['DocumentID']; ?>" />
<input type="hidden" name="top-search" value="<?php echo $_POST['top-search']; ?>" />
<button type="submit" name="deleteDocument" class="btn btn-w-m btn-danger" onclick="return confirm('Are you sure you want to delete this Document?')">Delete</button>
</form>
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
</div>
I have an example where a Modal submits successfully although to a different page using a similar method but using target="_blank"
Its not onclick - but onClick.
Also, you need to place the scripts inside {}. The following code should work.
/*
* A simple React component
*/
class Application extends React.Component {
render() {
return (<div class="modal-footer">
<form action="index.php" method="post">
<input type="hidden" name="DocumentID" value="<?php echo $row['DocumentID']; ?>" />
<input type="hidden" name="top-search" value="<?php echo $_POST['top-search']; ?>" />
<button type="submit" name="deleteDocument" class="btn btn-w-m btn-danger" onClick={ function() {
return confirm("Yes/No?");
}}>Delete</button>
</form>
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
</div>);
}
}
/*
* Render the above component into the div#app
*/
React.render(<Application />, document.getElementById('app'));
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.