Menu
I'm using a modal from the Kube CSS & JS framework (6.5.2) with a form inside it. When I hit enter, the modal closes without submitting the form.
Edit: this doesn't happen when focused on password or search inputs - changing the type from 'text' to 'password' fixes the issue.
<!DOCTYPE html>
<html>
<head>
<title>Basic Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Kube CSS -->
<link rel="stylesheet" href="dist/css/kube.css">
</head>
<body>
<h1>Hello, world!</h1>
<div id='ui-modal-test' class='modal-box hide'>
<div class='modal' style='width:95%'>
<span class='close'></span>
<div class='modal-header'>Modal Form Test</div>
<div class='modal-body'>
<form id="ui-modal-form">
<input type="text" name="field1">
<input type="text" name="field2">
<input type="text" name="field3">
<button>Apply</button>
</form>
</div>
</div>
</div>
<button data-component="modal" data-target="#ui-modal-test">Open</button>
<!-- Kube JS + jQuery are used for some functionality, but are not required for the basic setup -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="dist/js/kube.js"></script>
</body>
</html>
JS:
$('#ui-modal-form').on('submit', function(event){
event.preventDefault(); // modal still closes before submitting form
var field1 = $(this).find('input[name=field1]').val().toLowerCase();
var field2 = $(this).find('input[name=field2]').val();
var field3 = $(this).find('input[name=field3]').val();
$.post('/post.php', {
field1: field1,
field2: field2,
field3: field3,
}, function(response){
var response = JSON.parse(response);
});
});
I'd like the form to submit when the user hits enter on any of the inputs, without closing the modal box.
619
I had no idea about Kube, but I tried what you said, that was an issue. Then I opened the kube.js file in dist folder to check out the modal. I found this specific function to be the cause at line number 2167 -
handleEnter: function(e)
{
if (e.which === 13)
{
e.preventDefault();
this.close(false);
}
}
13 is the code for Enter key event. It's by default in kube, I guess. Maybe you can override this, I think there are some functions in it to disable events. If I change the parameter like this this.close(true), it works well.
Hope this gives you the cause of why this is happening.
Kube seems nice :)
103
<form onSubmit={event => event.preventDefault()}>
<input type="text" name="field1">
<input type="text" name="field2">
<input type="text" name="field3">
<button>Apply</button>
</form>
you can also refer if still not work:
submit isn't required, so in your case I would recommended moving your logic over to beforeSubmit and always return false as this is triggered before the modal closes. Currently, there's no way to manually close the modal, other than triggering the event modal:destroy. This is an example:
var Modal = Backbone.Modal.extend({
template: _.template($('#modal-template').html()),
submitEl: 'button',
beforeSubmit: function() {
// show your awesome loader here
this.model.save(this.model.attributes, success: function() {
this.trigger('modal:destroy');
});
return false;
}
});
Your modal doesn't submit if it doesn't succeed and beforeSubmit is only triggered onEnter and onClick of the button.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
