Develop Reference

html login form not able to generate any post data

i have put my login form inside a bootstrap modal component.Upon entering the values inside the input fields and clicking submit, nothing happens and the modal simply closes. Inside my inspect element under the networks tab, I do not see any post request being made.
have used passport-local for authorisation and mysql as database.
Here is my html snippet
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="login modal">Login</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="post" action="/login"></form>
<div class="modal-body">
<div class="form-group">
<label for="Email login">Email address</label>
<input type="email" name="email" class="form-control" id="Email login" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="Password login">Password</label>
<input type="password" name="password" class="form-control" id="Password login" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" name="remember" class="form-check-input" id="remember">
<label class="form-check-label" for="exampleCheck1">Remember Me</label>
</div>
<!-- <button type="submit" class="btn btn-primary">Submit</button> -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success" data-dismiss="modal">Submit</button>
</div>
</form>
</div>
</div>
</div>
and here is the route.js code
route.get('/login', (req, res) => {
res.render('login')
})
route.post(
'/login',
passport.authenticate('local', {
successRedirect: '../chat',
failureRedirect: '/',
failureFlash: false,
badRequestMessage: 'Please enter your account credentials to login.'
}),
function(req, res) {
console.log(req.param('remember'));
if(req.isAuthenticated(req, res)) {
res.redirect('../chat');
} else {
var errors = req.flash('error');
if(errors) {
assign['errors'] = errors;
}
res.render('index.html', {errors: errors});
}
}
);
here chat is the folder in my parent directory where i want to redirect the user after a successful login.
Please look into this as soon as possible.I have been trying to debug this since about 40 days.I know it could be a minor syntax error which has croosed my mind.
Thank you

just remove ( data-dismiss="modal" ) from submit button, data-dismiss is closing your popup before execution.

just remove the closing form tag here:
<form method="post" action="/login"></form>

Show modal on submit form

Here's the code of an Angular 4 component used to collect contact information from visitors:
.html:
<form (submit)="onCreateContact()">
<div class="form-group">
<input type="text" [(ngModel)]="contactname" name="contactname" class="form-control form-control-lg" placeholder="Name">
</div>
<div class="form-group">
<input type="email" [(ngModel)]="contactemail" name="contactemail" class="form-control form-control-lg" placeholder="Email">
</div>
<div class="form-group">
<input type="text" [(ngModel)]="contactphone" name="contactphone" class="form-control form-control-lg" placeholder="Phone">
</div>
<input type="submit" class="btn btn-outline-light btn-block" data-toggle="modal" data-target='#addContactModal'>
</form>
<!-- Modal -->
<div class="modal fade" id="addContactModal" tabindex="-1" role="dialog" aria-labelledby="addContactModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addContactModalLabel">Contact</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Thanks for contacting us! We will get in touch with you shortly.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
.ts:
onCreateContact() {
let contact = {
contactname: this.contactname,
contactemail: this.contactemail,
contactphone: this.contactphone
}
return this.http.post('api/contacts/add', contact).map(res => res.json()).subscribe(data => {
if(data.success) {
console.log(data);
} else {
console.log('Failed to add contact');
}
}
);
}
All contact fields are required; the data is not passed to the backend if not all fields are filled.
Currently, the Bootstrap modal popups every time I press the submit button, even when the data is not passed. How can I show it only when the data is actually passed to the server?

You are toggling the modal when the user clicks on the submit button.
What you need to do is, toggle the modal from component class(.ts) after getting the response from the backend.
So in your ".ts" file add below line under the imports section
declare var $: any;
Then toggle modal after receiving response from backend as below
onCreateContact() {
return this.http.post('api/contacts/add', contact).map(res => res.json()).subscribe(data => {
if(data.success) {
console.log(data);
$('#addContactModal').modal('show'); // Add this line
} else {
console.log('Failed to add contact');
$('#errorModalId').modal('show'); // If you are planning to show error modal when something goes wrong.
}
});
}
Don't forget to remove data-toggle and data-target attribute from submit button.
Hope this helps.

Validating whether text lies in a particular range on dynamically created table not working?

I have a dynamically created table and onclick of button in a row a modal opens like this:
If I type anything then it must show alert...
<div class="modal fade" id= "{{pl.id}}_1" role="dialog" data-id="{{pl.id}}">
<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">Do You want to accept <b>{pl.employee.emp_name|title }} </b> leave?</h4>
</div>
<form action={% url 'm_manage:accept' %} method="POST">
{% csrf_token %}
<div class="modal-body">
<p><input type="checkbox" name="email" class="email" > Notify Via Email<br></p>
<p><label for="message">Message </label>
<textarea rows="3" name="message" class="form-control input-md message"></textarea></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success accept" data-dismiss="modal" onclick="checkLength()">Accept</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
function checkLength(){
var textbox = document.getElementsByClassName("message");
console.log(textbox.value);
if(textbox.value.length <= 100 && textbox.value.length >= 0){
}
else{
alert("Make sure the input is between 1-100 characters long")
}
}
console.log is printing value as undefined...I am using get elements by classname as their is duplicacy if i use Id..What is the actual problem?

getElementsByClassName gets all elements having a particular class. To get access to message textarea, you need to change the following code:
var textbox = document.getElementsByClassName("message");
to
var textbox = document.getElementsByClassName("message")[0];

getElementsByClassName returns not just one element, but an array-like of elements. Try doing textbox[0].value.

try this JS code:
function checkLength(that){
var textbox = that.parentNode.parentNode.getElementsByClassName("message")[0];
console.log(textbox.value);
if(textbox.value.length <= 100 && textbox.value.length >= 0){
}
else{
alert("Make sure the input is between 1-100 characters long")
}
}
And in your HTML pass the parameter this in function checkLength(this).
<button type="button" class="btn btn-success accept" data-dismiss="modal" onclick="checkLength(this)">Accept</button>

How can i merge multiple functions on a single button on javascript?

I would like to use "confirm password form" (it is at bootstrap - modal) nested on a site tour step. Actually i have just did it. But the problem is i cant merge 2 different functions on one button which "confirms password" and the "next" step.
The purpose of merging these functions:
When a user confirms password normally closes the modal box and works fine thanks to this code below.
<script>
$(function(){
$("#basicModal").modal();
$(".update-password").click(function(){
var new_password = $("#new-password").val();
var confirm_password = $("#confirm-password").val();
if(new_password==""){
$("#new-password").focus();
return;
}
if(confirm_password==""){
$("#confirm-password").focus();
return;
}
});
setTimeout(function(){
$("#basicModal").modal('hide');
},25000);
$("#upd-btn").click(function(){
$("#basicModal").modal();
});
})
But it shouldnt close anymore and continue to next step.. So i try to merge them but i dont have enough code experience to solve this by myself.. so i need you to support me on this problem guys.. while you are reading i ll keep up to try.. thank you all..
related code of the "button" and the "next" link is here below
<div class="" id="step-id-1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">Create your password pls.</h4>
</div>
<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post">
<div class="modal-body">
<p>You should fill the field with password </p>
<p><input type="password" class="form-control input-lg" id="new-password" required placeholder="Yeni Şife.." name="new-password" /></p>
<p><input type="password" class="form-control input-lg" id="confirm-password" required placeholder="Repeat you password pls.." name="confirm-password" /></p>
<?php if($flag){ ?>
<div style="padding:5px 10px; color:#fff; background:#F00">Passwords are unmatched, refill the form please</div>
<?php } ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
**<button type="submit" class="btn btn-primary update-password">Confirm your password</button>**
</div></form>
**Next step**
</div>
</div>
</div>

Have the one function call the other, or create a 3rd function that calls both and call that 3rd function with the button.

Displaying modal dialog only once, then not displaying again until user has cleared cache or cookies

Displaying modal dialog only once, then not displaying again until user has cleared cache or cookies.
I have a modal dialog that I'd like to display when a user visits my website, but only once. If the user closes out of it or uses it, I'd like to not display it again for a very long time.
My jsFiddle is at:
http://jsfiddle.net/B84tq/
My html is:
<!-- Button to trigger modal -->
Launch demo modal
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h3 id="myModalLabel">Email Deals</h3>
</div>
<div class="modal-body">
<p>Sign up for email-only specials and news updates. We will not sell or rent your email address.</p>
<p>Sign up now!</p>
<form class="form-horizontal" method="post" action="http://www.gliq.com/cgi-bin/subunsub">
<div class="input-prepend">
<input type="hidden" name="acctname" value="amleo"/>
<input type="hidden" name="action" value="subscribe"/>
<input type="hidden" name="url" value="http://www.amleo.com/subscribe-successful/a/47/"/>
<input type="text" placeholder="Your email address" id="inputIcon" class="input-xlarge" name="email">
<input value="SUBSCRIBE" class="btn btn-orange" type="submit">
</div>
</form>
<p>Privacy Policy.</p>
</div>
</div>

Use cookies.
You can google how to handle cookies in js.
eg. in pseudocode
if (document.cookies['testvalX']!=1)
{
//display modal
document.cookies[] = 'testvalX=1';
}