Keeping the modal open after canceling a prompt - html

I am working on a modal that has a cancel button but if the cancel button is pressed, the user will be prompted to choose if they want to go back or stay. When the confirmation comes up and you select 'Ok', the modal exits as it should but I noticed that if you select 'No, don't go back', it still exits the modal. Is there any workaround for this?
Here's my modal code:
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Enter your Subject</h5>
</div>
<form action="/save-energystores" method="POST">
{{ csrf_field() }}
<div class="modal-body">
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Subject ID:</label>
<input type="text" name="subjectid" class="form-control" id="recipient-name" maxlength="6" style="text-transform:uppercase" required />
</div>
<div class="mb-3">
<label for="message-text" class="col-form-label">Description:</label>
<textarea name="energystore_detail" class="form-control" id="message-text" required></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="return confirm('Do you really want to quit?');">Close</button>
<button type="submit" class="btn btn-primary">Add</button>
</div>
</form>
</div>
</div>
</div>

Related

Why do I get redirected to the Forbidden page when clicking on form fields?

I am building a simple little personal site, and for the site I am making a modal contact form with Bootstrap. When I open the modal and click on any of the form fields, I am immediately redirected to the Forbidden page and see the error message "You don't have permission to access /none" on this server.". I can't for the life of me understand why this would happen. Below is the form modal:
<div class="modal fade" id="contact-form" tabindex="-1" role="dialog" aria-labelledby="contact-form" aria-hidden="true" style="color:darkslategray;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Shoot me a message!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Contact form -->
<form method="POST" action="index.php">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control mb-4" id="name" />
<label for="email">Email Address:</label>
<input type="email" class="form-control mb-4" name="email" id="email" />
<label for="message">Message:</label>
<textarea class="form-control mb-4" name="message" id="message"></textarea>
</div>
<button type="submit" class="btn btn-primary">Send</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
And below is the HTML for the link that triggers the modal:
<p>Want to chat? <span class="contact" data-toggle="modal" data-target="#contact-form">Contact me</span>.</p>
Could someone please help me understand why this is happening and how I can fix it? Many thanks in advance.

how to show modal from another file in to my html using laravel ajax

i use Laravel and ajax,
in index.blade.php i have :
<a onclick="addForm()" class="btn btn-success " style="float:right;">Tambah</a>
and
<script type="text/javascript">
function addForm(){
save_method = "add" ;
$('input[name=method]').val('POST') ;
$('#myModal').modal('show') ;
$('#myModal form')[0].reset() ;
$('.modal-title').text('Tambah Kategori') ;
}
</script>
and i want call modal from another file called form.blade.php in the same folder with index.blade.php, this is my form :
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form class="form-horizontal" data-toggle="validator" method="POST">
{{ csrf_field() }} {{ method_field('POST') }}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h3 class="modal-title"></h3>
</div>
<div class="modal-body">
<input type="hidden" name="id" id="id">
<div class="form-group">
<label for="nama" class="col-md-3 control-label">Nama</label>
<div class="col-md-6">
<input type="text" id="nama" class="form-control" name="nama" autofocus required>
<span class="help-block with-errors"></span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary btn-save">Simpan</button>
<button type="button" class="btn btn-warning" data-dismiss="modal">Batal</button>
</div>
</form>
</div>
</div>
Why my modal didn't show?
You need to include your form.blade.php file in your index.blade.php because your javascript has no reference to that file.
Doing this is explained in the blade documentation of laravel: https://laravel.com/docs/5.6/blade#including-sub-views

Form structure issue in html

Hi everyone just want you guys to check out and see what is wrong with my form tag. What I'm trying to do here is to submit values from 2 main divs, I'm using bootstrap.
This one doesn't work:
<form class="" action="" id="pos_data" method="post">
<div class="input-group barcode">
<input type="text" class="form-control" id="txtSearch" name="txtSearch" placeholder="barcode" autofocus>
<span class='input-group-addon' style='cursor: pointer;' data-toggle='modal' data-target='#myModal'><i class='fa fa-pencil'></i> Edit</span>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">The Value that would be Inputed will be added to the current value.</h4>
</div>
<div class="modal-body">
<input type="text" id="addtoQuantity" class="form-control" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Add</button>
</div>
</div>
</div>
</div>
</form>
But when I do this
<form class="" action="" id="pos_data" method="post">
<div class="input-group barcode">
<input type="text" class="form-control" id="txtSearch" name="txtSearch" placeholder="barcode" autofocus>
<span class='input-group-addon' style='cursor: pointer;' data-toggle='modal' data-target='#myModal'><i class='fa fa-pencil'></i> Edit</span>
</div>
</form>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">The Value that would be Inputed will be added to the current value.</h4>
</div>
<div class="modal-body">
<input type="text" id="addtoQuantity" class="form-control" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Add</button>
</div>
</div>
</div>
</div>
EDITED
I'm using ENTER button as submit. so if I click on the edit span the MODAL div would show and I can enter a value on the textbox of that div. after clicking the add button I put on what I want to search on the txtSearch of the input-group then press enter. The second form structure works but I want the value from the text box in the MODAL div to be submitted to. Does this make sense?
Check this .. i think this will help you ..
$(document).on('click','#add-qty-btn',function(){
var qty = $('#addtoQuantity').val();
var txtsearch = $('#txtSearch').val();
alert('TextSearch is: ' + txtsearch + ' - Quantity: ' + qty);
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br /><br />
<form class="" action="" id="pos_data" method="post">
<div class="input-group barcode">
<input type="text" class="form-control" id="txtSearch" name="txtSearch" placeholder="barcode" autofocus>
<span class='input-group-addon' style='cursor: pointer;' data-toggle='modal' data-target='#myModal'><i class='fa fa-pencil'></i> Edit</span>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">The Value that would be Inputed will be added to the current value.</h4>
</div>
<div class="modal-body">
<input type="text" name="addtoQuantity" id="addtoQuantity" class="form-control" />
</div>
<div class="modal-footer">
<button id="add-qty-btn" type="button" class="btn btn-default" data-dismiss="modal">Add</button>
</div>
</div>
</div>
</div>
</form>
If you want the text box from modal to be included so put the end that of the form after the end of the modal div
Else if you want to remove it and you don't want to include it value so remove it on submit with this jquery function
$("form").submit(function() {
$(this).children('#your input id').remove();
});
With CSS give display none to the modal
Then with the button edit modal click event set the modal display to block

Bootstrap modal not working with codeigniter form_open()

Bootstrap Modal code
<!-- Signup Modal -->
<div class="modal fade" id="signUpForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h3 class="modal-title" id="myModalLabel">Please Sing Up</h3>
</div>
<div class="modal-body">
<?php echo form_open('Registration')?>
<div class="form-group">
<label for="login-email" class="control-label">Email:</label>
<input type="text" class="form-control" name="login-email" id="login-email">
</div>
<div class="form-group">
<label for="username" class="control-label">Username:</label>
<input type="text" class="form-control" name="username" id="username">
</div>
<div class="form-group">
<label for="password" class="control-label">Password:</label>
<input type="password" class="form-control" name="password" id="password">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Signup</button>
</div>
<?php echo form_close()?>
</div>
</div>
</div>
And I have controller named Registration. when I click on button to launch the modal nothing happens. Button code that launches the modal.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signUpForm">Signup
</button>
You should add jQuery bootstrap "REQUEST"
More info here http://getbootstrap.com/2.3.2/javascript.html#modals
Add reference to jquery and bootstrap.min.js files in header and also add links for bootstrap css files.

No action clicking on Submit button in the bootstrap modal

I have the following modal and when user clicks on Submit, I want to redirect to another page.
My HTML Code:
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Add new card</h4>
</div>
<form action="addCard" method="post" id="addcard" class="form-horizontal" role="form">
<div class="modal-body" style="height: 190px;">
<div class="form-group" style="height: 30px;">
<label for="title" class="col-md-3 control-label">Title</label>
<div class="col-md-9">
<input type="text" class="form-control" name="title" placeholder="Enter Card title here...">
</div>
</div>
<div class="form-group" style="height: 30px; margin-bottom:30px;">
<label for="title" class="col-md-3 control-label">Description</label>
<div class="col-md-9">
<textarea class="form-control" name="desc" placeholder="Enter Card description here..."></textarea>
</div>
</div>
<div class="form-group">
<label for="priority" class="col-md-3 control-label">Priority</label>
<div class="col-md-9">
<select name="priority" class="form-control">
<option value="critical">Critical</option>
<option value="high">High</option>
<option value="normal">Normal</option>
<option value="low">Low</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="formSubmit" type="submit">Submit</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
app.js:
app.post('/addCard', routes.addCard);
index.js:
exports.addCard = function (req,res)
{
res.render('index');
}
When I click on 'Submit' button of the modal, no action is happening. Please advice. Thanks.
in
<button type="button" class="btn btn-primary" id="formSubmit" type="submit">Submit</button>
you have type=button ,and then type=submit
remove type=button