jQuery working not working outside the php file - javascript

My jQuery is not working well if placed on the same file with the html the output will be just one value password, and email will not be displayed, but if placed on a different file when i click on the Login button the values console.log(datatopost) will disappear (like refreshing) on the console.
HTML Code
<!-- Login Modal -->
<form id="loginForm" method="post">
<div class="modal fade" id="loginModal" 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="exampleModalLabel">Login to your Account</h5>
<!-- SIGN IN ERROR MESSAGE-->
<div id="loginerrorMessage"></div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="loginemail" class="sr-only">Email address</label>
<input type="email" class="form-control" id="loginemail" aria-describedby="emailHelp" placeholder="Enter email" autocomplete="on">
</div>
<div class="form-group">
<label for="loginpassword" class="sr-only">Confirm Password</label>
<input type="password" class="form-control" name="password" id="loginpassword" placeholder="Enter Password" autocomplete="on">
</div>
<h6>Login as:</h6>
<div class="form-check form-check-inline">
<input type="radio" name="loginRadio" class="form-check-input" id="checkbank" value="bank">
<label class="form-check-label" for="checkbank">Bank</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="loginRadio" id="checkcustomer" value="customer">
<label class="form-check-label" for="checkcustomer">Customer</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="loginRadio" id="checkadmin" value="admin">
<label class="form-check-label" for="checkadmin">Admin</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary mr-auto" data-target="#signupModal" data-toggle="modal" data-dismiss="modal">Register</button>
<input type="submit" value="Login" class="btn btn-info" name="login">
<!-- <button type="submit" class="btn btn-info">Login</button> -->
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
jquery code
$(document).ready(function(){
$('#loginForm').on('submit', function(e){
//Stop the form from submitting itself to the server.
e.preventDefault();
let datatopost = $(this).serializeArray();
console.log(datatopost);
});
});
Please I'm just a Beginner...

The email doesn't appear because you didn't set name="email"
Correct is:
<input type="email" name="email" class="form-control" id="loginemail" aria-describedby="emailHelp" placeholder="Enter email" autocomplete="on">
Result:
[{
name: "email",
value: "test#test.it"
}, {
name: "password",
value: "passwordtest"
}, {
name: "loginRadio",
value: "bank"
}]

In Chrome, right click in the console to reveal a menu with "Preserve Log upon Navigation" as an option. Selecting this will keep your console content.
Try it out and run your code again.

Related

I just want to disable the Approve button in updating process with modal boostrap

This is the modal form that show after clicking the view button in my table.
Every field already have data value because I am updating a list.
Now I want to disabled the Approve button base on status which is "Pending" and "Approved"
<form action="code_book.php" method="POST">
<div class="modal fade" id="updatemodal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<input type="hidden" name="update_id" id="update_id">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Update Appointment Status</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- start modal content -->
<div class="modal-body">
<div class="mb-3">
<label for="#service" class="col-md-6">Appointment Date</label><label for="#description" class="col-md-6">Appointment Time</label><br>
<input type="text" class="col-md-6 inputdesign" name="date" id="date" readonly>
<input type="text" class="col-md-6 inputdesign" name="time" id="time" readonly>
</div>
<div class="mb-3">
<label for="#service" class="col-md-6">Name</label><label for="#description" class="col-md-6">Contact</label><br>
<input type="text" class="col-md-6 inputdesign" name="username" id="username" readonly>
<input type="text" class="col-md-6 inputdesign" name="contact" id="contact" readonly>
</div>
<div class="mb-3">
<label for="#service" class="col-md-6">Pet Name</label><label for="#description" class="col-md-6">Service</label><br>
<input type="text" class="col-md-6 inputdesign" name="bookpet_id" id="bookpet_id" readonly>
<input type="text" class="col-md-6 inputdesign" name="service_id" id="service_id" readonly>
</div>
<div class="mb-3">
<label for="#service" class="col-md-12">Complaint</label>
<input type="text" class="form-control inputdesign" name="complaint" rows="3" id="complaint" readonly>
</div>
<div class="mb-3">
<label for="#description" style="margin-top: 10px;" class="form-label">Status</label>
<input type="text" class="form-control inputdesign" name="status" id="status" placeholder="Enter the service" readonly>
</div>
</div>
<div class="modal-footer">
<button type="submit" name="updatedata" id="updatedata" class="btn btn-dark button">Approve</button>
<button type="button" class="btn btn-danger" data-bs-dismiss="modal" >Cancel</button>
</div>
</div>
</div>
</div>
You need some easy JavaScript for that, assuming you're just initializing the button once because the input is readonly.
$(document).ready(function() {
$('#datatableid tbody').on('click', '.updatebtn', function() {
$('#updatemodal').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function() {
return $(this).text();
}).get();
console.log(data);
$('#update_id').val(data[0]);
$('#date').val(data[1]);
$('#time').val(data[2]);
$('#username').val(data[3]);
$('#contact').val(data[4]);
$('#bookpet_id').val(data[5]);
$('#service_id').val(data[6]);
$('#complaint').val(data[7]);
$('#status').val(data[8]);
// disable input if not approved
$('#updatedata').prop('disabled', data[8] !== 'Approved');
});
});
<input type="text" id="status" placeholder="Enter the service" value="Pending" readonly />
<button type="submit" name="updatedata" id="updatedata" class="btn btn-dark button">Approve</button>

Bootstrap multiple Modal components to pop up as page loads

let myOtherModal = new bootstrap.Modal(
document.getElementById("signUpModal"),
{}
);
myOtherModal.show();
let myModal = new bootstrap.Modal(document.getElementById("myModal"), {});
myModal.show();
I have the above code on the js file linked to the layout page. It works out with the first modal, that correctly pops up when the page is loaded, but does not work with the second one. It doesn't work also when I move myOtherModal.show() to after the myModal variable declaration...
Why does order matters here and how can I make all modals work?
HMTL code - view "profile"
<div
class="modal fade"
id="myModal"
tabindex="-1"
aria-labelledby="myModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Sign Up</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<form action="/login" method="POST" enctype="multipart/form-data">
<label for="username">Username</label>
<input type="text" name="username" />
<br />
<label for="email">Email</label>
<input type="text" name="email" />
<br />
<label for="password">Password</label>
<input type="password" name="password" />
<br />
<label for="passwordCheck">Confirm password</label>
<input type="password" name="passwordCheck" />
<br>
<label for="imageUrl">Profile Picture</label>
<input type="file" name="imageUrl">
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>Close</button>
<button type="submit" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#logInModal" data-bs-dismiss="modal">Log In</button>
</form>
</div>
</div>
</div>
</div>
HTML code - view "index"
<div
class="modal fade"
id="signUpModal"
tabindex="-1"
aria-labelledby="signUpModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="signUpModalLabel">Sign Up</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<form action="/signup" method="POST" enctype="multipart/form-data">
<label for="username">Username</label>
<input type="text" name="username" />
<br />
<label for="email">Email</label>
<input type="text" name="email" />
<br />
<label for="password">Password</label>
<input type="password" name="password" />
<br />
<label for="passwordCheck">Confirm password</label>
<input type="password" name="passwordCheck" />
<br>
<label for="imageUrl">Profile Picture</label>
<input type="file" name="imageUrl">
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>Close</button>
<button type="submit" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#logInModal" data-bs-dismiss="modal">Sign Up</button>
</form>
</div>
</div>
</div>
</div>

Why is my form inside my bootstrap modal col-md-6 by default?

I'm building a website and tried to embed a form as a partial view inside a modal window. I succeeded in getting the form inside the modal, but it only appears on the left half of the modal body. Does anyone know a fix for this?
I never set the col-md-6 anywhere so there i no reason for it to appear this way. I even tried to exactly copy some modal examples from the internet that appeared to be correct, but i had the same problem.
Modal window that the form is loaded in:
<!-- Modal -->
<div id="addLeverancierModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Leverancier toevoegen</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Annuleer</button>
<button type="button" class="btn btn-success">Opslaan</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
Modal form(partial view):
<form role="form">
<div class="form-group">
<label>Leveranciernummer</label>
<input type="email" class="form-control" id="leveranciernummerInput" placeholder="Leveranciernumer">
</div>
<div class="form-group">
<label>Naam</label>
<input class="form-control" id="leveranciernaamInput" placeholder="Naam">
</div>
<div class="form-group">
<label>Straatnaam</label>
<input class="form-control" id="straatnaamInput" placeholder="Straatnaam">
</div>
<div class="form-group">
<label>Huisnummer</label>
<input class="form-control" id="huisernummerInput" placeholder="Huisnummer">
</div>
<div class="form-group">
<label>Postcode</label>
<input class="form-control" id="postcodeInput" placeholder="Postcode">
</div>
<div class="form-group">
<label>Plaatsnaam</label>
<input class="form-control" id="plaatsnaamInput" placeholder="Plaatsnaam">
</div>
<div class="form-group">
<label>Land</label>
<input class="form-control" id="landInput" placeholder="Land">
</div>
<div class="form-group">
<label>VAT</label>
<input class="form-control" id="vatInput" placeholder="VAT">
</div>
<div class="form-group">
<label>Telefoon</label>
<input class="form-control" id="telefoonInput" placeholder="Telefoon">
</div>
<div class="form-group">
<label>Email</label>
<input class="form-control" id="emailInput" placeholder="Email">
</div>
<div class="form-group">
<label>Email extra</label>
<input class="form-control" id="emailExtraInput" placeholder="Email extra">
</div>
</form>
JQuery to load form inside modal:
var GetLeverancierForm = function () {
$.ajax({
type: "GET",
url: baseURL + '/AddLeverancier',
success: function (data) {
$(".modal-body").html(data);
}
});
}
Base container all content is loaded in(all html files):
<div class="container body-content">
#RenderBody()
</div>
Picture of how the modal appears:
Design your form like this
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
</form>
It would look like this :

ngSubmit not working inside modal?

It seems that my submit button is not activating the ng-click angular directive and I cannot figure out why. It seems that every other person that had this problem didn't include their submit button inside of their form, and I'm 99% sure I did that.
<div class="modal fade" id="subModal" ng-controller="SubscriberController" ng-controller-as="subCtrl">
<div class="modal-dialog modal-md">
<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>
<h2 class="modal-title">Subscribe</h2>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="well">
<form ng-submit="console.log('submit')">
<div class="form-group">
<label for="subscriber-name" class="control-label"><strong>Name:</strong></label>
<input type="text" class="form-control" ng-model="subCtrl.subData.name" placeholder="John Doe" required>
</div>
<div class="form-group">
<label for="subscriber-email" class="control-label"><strong>Email:</strong></label>
<input type="email" class="form-control" ng-model="subCtrl.subData.email" placeholder="johndoe#example.com" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-lg btn-block"><i class='fa fa-envelope'></i> Subscribe</button>
</div>
<div re-captcha ng-model="subCtrl.subData.captcha"></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You need to put something like
<input ng-model="myForm.email" type="email" class="form-control" id="subCtrl.subData.email" placeholder="johndoe#example.com" required>
and
<input ng-model="myForm.name" type="text" class="form-control" ng-model="subCtrl.subData.name" placeholder="John Doe" required>
into your inputs, and give your form a name attribute
<form name="myForm" ng-submit="submit()">
plnkr: http://plnkr.co/edit/KRmZkPS6t4ANmAHwTevQ

Bootstrap 3 modal not appear automatically

<div class="modal fade" id="myModalLogin" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Login</h3>
</div>
<div class="modal-body">
<form action="" method="post" class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-6">
<input type="text" name="email" id="email" class="form-control" placeholder="Enter Email..."/>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-6">
<input type="password" name="password" id="password" class="form-control" placeholder="Enter Password..."/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-6">
<input type="hidden" name="action" value="login">
<button type="submit" class="btn btn-success">Submit</button>
<button type="reset" class="btn btn-default">Clear</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
I'm trying to show this modal automatically, with this javascript code:
<script>
$('#myModalLogin').modal({
show: true
})
</script>
But it seems not work, and i don't understand why.
ps: of course I have included javascript files bootstrap 3:
<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
Any help and/or direction would be greatly appreciated. Thanks!
I do not see any issues with your code:
with code
$('#myModalLogin').modal({
show: true
})
without it it does not.
Check this: http://jsfiddle.net/usecide/99xKj/1/

Categories

Resources