I try to render a form with ajax and show it in a modal.
But the fom tags in the modal just appears next to eachother when i check the source code in my browser. How can I resolve this?
Here is my written code of the modal in:
<!-- Modal Edit client -->
<div id="editClient" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit Client</h4>
</div>
<div class="modal-body">
<form id="editClientForm" action="{{ path('client_details') }}" method="POST">
{{ form_widget(form) }}
<br />
<input type="submit" class="btn btn-success" value="Save changes">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</form>
</div>
</div>
</div>
</div>
The modal opens with the form fields and closes when cancel is clicked.
Here is the source code from the browser:
<div class="modal-body">
<form id="editClientForm" action="/ruben/avr_symfony/web/app_dev.php/configurator/client/details" method="POST"></form>
=> here comes all the form fields and buttons.
</div>
As you can see, it closes the form tag before putting in the form fields.
I found the problem.
I hade a closing table tag wich i typed as < table > instead of < / table > in my code above the modal code.
This solved the issue.
Related
I've ran into a strange problem when playing around with Bootstrap 4 Modals.
When I tried to put a form inside a modal - submitting wouldn't do anything and after inspecting the element in Google Chrome I found out that it shows the input fields are outside the form tags.
My code in question is:
<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action='test-input.php' method='post' class='ajax-input'>
<input type='text' name='test-input-field'><input type='submit' name='test-submit'>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
But google chrome sees the "modal-body" like this:
<div class="modal-body">
<form action='test-input.php' method='post' class='ajax-input'></form>
<input type='text' name='test-input-field'><input type='submit' name='test-submit'>
</div>
Sadly on IE everything works fine. What can be the problem and is there a way to go around this problem if it persists ?
It looks like you are creating each modal immediately after the <tr>, still inside the <table>. This is probably what is causing the issue. You will want to move the modals outside of your table, giving you code something like:
<table>
<? foreach($item in $items) { %>
<tr> ... </tr>
<? } ?>
</table>
<? foreach($item in $items) { %>
<div class="modal" id="modal-<?= $item->id ?>">
...
</div>
<? } ?>
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
I have an html form. For the image file input, I have a modal that pops up to set the input field but also allow the user to crop. When I submit the form, it says the input field is empty.
Here is the form with modal embedded:
<form class="form-horizontal" role="form" action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
<h5>First Name</h5>
<div class="form-group">
{{ form.first_name|attr:"class:form-control"|attr:"placeholder:Enter Your First Name" }}
</div>
<h5>Profile Image (Square Image)</h5>
<div class="form-group">
<button data-toggle="tk-modal-demo" data-modal-options="slide-down" class="btn btn-primary">Upload</button>
</div>
{{ form.crop_coords }}
<!-- Create the modal dynamically via Handlebars -->
<script id="tk-modal-demo" type="text/x-handlebars-template">
<div class="modal fade" >
<div class="modal-dialog">
<div class="v-cell">
<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>
<h4 class="modal-title">Upload Profile Image</h4>
</div>
<div class="modal-body container">
<div class="max-width: 560px;">
<div>
<img style="max-width: 100%;" id="tempImg" src="{% static 'app/images/default-team-large.jpg' %}"/>
<h5>Profile Image (Square Image)</h5>
<div class="form-group">
<input id="id_profile_image2" type="file" name="pic" accept="image/*">
</div>
</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" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
</div>
</script>
<div class="form-group margin-none">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-sm btn-primary" href="nml-home.html"> Confirm User Changes<i class="fa fa-fw fa-arrow-right"></i></button>
</div>
</div>
</form>
To test, I click the data-toggle button to popup the modal. It then opens the tk-modal-demo which has a file upload. I upload an image and then I click the save button in tk-modal-demo to dismiss the modal. Then I submit the form with the bottom form submit button. My validator says that the field is empty.
How can I set this required form field from the modal and have it populated when I submit?
It might be that the modal input elements are not created inside the <form> element. Input elements outside of this container will not be sent to the server upon submit.
You can first check out what is actually transmitted with the development console of your browser (in Chrome it's the Network tab). If your fields aren't there, then you might need to write a bit of Javascript, to either:
copy the contents of the input elements inside the modal to hidden fields within the form, for using the regular submission process
or, hijack the submit event and manually compose which fields you want to send
The html for a modal popup for a login is below (html). When a customer tries to login they must click on each input field, put the username and then password and click the submit submit button. If they click "enter" after inputting the username or login, the modal popup disappears.
Is there a way to have proceed to being logged in when clicking "enter/return" after in the password input box instead of clicking on the "Login" button. I would like both to work-- login button and hitting return after typing in the password.
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-forward"></span> Login
</li>
</ul>
<div class="modal fade" id="customer-login" tabindex="-1" role="dialog" aria-labelledby="customer-login-header" aria-hidden="true">
<div class="modal-dialog">
<form action="https_link" method="POST" name="log-in">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h2 id="customer-login-header">Customer Login</h2>
<p class="hidden-xs">Log in below to receive access to your existing policies and quotes. The log in information was emailed to your after purchasing your policy or saving a quote.</p>
</div>
<div class="modal-body">
<fieldset>
<input type="text" class="form-control" id="cl_username" name="username" placeholder="Username?">
<br>
<input type="password" class="form-control" id="cl_password" name="password" placeholder="Password?">
</fieldset>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<input type="submit" class="btn btn-primary" value="Login">
</div>
<div class="modal-footer">
<p>Forgot your Username or Password?<br><a class="forgot-password" href="https://www.mexpro.com/client_login/retrieve_password.mhtml?aff_id=2149&lang=en&agtdst=www">Click here to Retrieve »</a></p>
</div>
</div>
</form>
</div>
</div>
Here is a possible solution: https://jsfiddle.net/99x50s2s/73/
When the user clicks on the Login button, alert will be displayed if either User Name or Password is left blank.
I have made minor changes in your HTML and used jquery as shown below,
HTML:
<button type='button' data-toggle="modal" data-target="#customer-login" data-backdrop="static">Click here</button>
<div class="modal fade" id="customer-login" tabindex="-1" role="dialog" aria-labelledby="customer-login-header" aria-hidden="true">
<div class="modal-dialog">
<form action="https://www.mexpro.com/client_login/do/login.mhtml?aff_id=2149" method="POST" name="log-in">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h2 id="customer-login-header">Customer Login</h2>
<p class="hidden-xs">Log in below to receive access to your existing policies and quotes. The log in information was emailed to your after purchasing your policy or saving a quote.</p>
</div>
<div class="modal-body">
<div id='error' class='alert alert-warning hide'></div>
<fieldset>
<input type="text" class="form-control" id="cl_username" name="username" placeholder="Username?"/>
<br/>
<input type="password" class="form-control" id="cl_password" name="password" placeholder="Password?"/>
</fieldset>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<input type="submit" class="btn btn-primary" value="Login" id="SubmitBtn"/>
</div>
<div class="modal-footer">
<p>Forgot your Username or Password?<br/><a class="forgot-password" href="https://www.mexpro.com/client_login/retrieve_password.mhtml?aff_id=2149&lang=en&agtdst=www">Click here to Retrieve »</a></p>
</div>
</div>
</form>
</div>
</div>
JS
$('#SubmitBtn').on('click', function(event){
var errorDiv = $('#error');
errorDiv.addClass('hide').empty();
var userName = $('#cl_username').val();
var password = $('#cl_password').val();
if ($.trim(userName) == '' || $.trim(password) == '')
{
errorDiv.removeClass('hide').append('User Name and Password is required');
event.preventDefault();
}
});
1.) Is there a way to make an error show up if they hit return without typing anything?
Yes. Handle the onSubmit event on the form and validate that you have entries in the fields you want.
2.) Is there a way to have proceed to next step when clicking "enter/return" -- i.e. cursor moves to the password/and submit takes
place?
Change the Login button from type="submit" to type="button" and write javascript code to handle the onClick event. By having it as type="submit" the browser automatically submits the form when the Enter key is pressed.
Bear in mind that many users expect the Enter key to submit a login form, not move them between fields. What you are trying to do goes against expected browser behavior.
I have a delete link , for that I am using bootstrap modal window . Here window appearing fine When I click yes button of window the record should be delete. So I have to call servlet in yes button along with a parameter Id here I am able to call servlet but parameter is not passing. How can I pass parameter to yes button of modal window. Here is code for it.
The bootstrap modal where I am calling,
<td>Edit
</td>
<td> Delete
</td>
in the same jsp page the markup of modal is,
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" 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" id="myModalLabel">Delete Teacher Record</h4>
</div>
<div class="modal-body">
<h3>Are you sure?</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
<a href="<%=request.getContextPath()%>/controller/TeacherManagementController?flowName=DELETE_TEACHER_INFO&teacherId=${teacherId.getTeacherId()}"
class="btn btn-primary">Yes</a>
</div>
</div>
</div>
</div>
The problem I am facing is the modal is appearing but record is not delete because of not able to pass the teacherId. Please any one help me in this.
I am using like this call function and assign value to hidden fields
Html:
<div id="add_button" >
<a data-toggle="modal" href="#myModal_new" onClick="pop_up('<?php echo $section_value['subject_name']; ?>','<?php echo $section_value['section_id']; ?>')">Add Subjects</a>
</div>
<script>
function pop_up(name,id){
var standard = document.getElementById("standard");
var standard_id = document.getElementById("standard_id");
var standard_id_new = document.getElementById("standard_id_new");
standard.value = name;
standard_id.value = id;
standard_id_new.value = id;
}
</script>
<div id="myModal_new" class="modal hide fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Create Sections</h3>
</div><br><br>
<div id="errorContainers">
<p>Please correct the errors and try again:</p>
<ul />
</div>
<div class="modal-body" style="margin-left: 17%;">
<!-- Modal Form Starts Here -->
<form name="modalForm" id="formss" method="post">
<input type="hidden" name="standard" id="standard">
<input type="hidden" name="standard_id" id="standard_id">
<input type="hidden" name="standard_id_new" id="standard_id_new">
<fieldset>
<div class="division_center"><div class="division_left"><label class="form-signin-signup" for="input1">Sections </label> </div>
<div class="division_right">
<input type="text" name="standard_new" id="standard_new"> </div></div>
</fieldset>
<!-- Modal Form Ends Here -->
</div>
<div class="modal-footer">
<a class="btn" data-dismiss="modal" >Close</a>
<input type="submit" name="newsubmit" class="btn btn-primary btn-large" value="Create">
</div>
</form>
</div>
</div>
</div>