Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I've been working on a forum based system. With the help of jquery, php, bootstrap, and such I could develop a forum in which a user can post, delete, and edit. I've defined an edit button for the person who sent the post, with click of a mouse, "modal" comes down, and some forms will appear for the user to enter in his/her desired info. I've been searching over internet for the right ajax method to collect the data from server first, and save the changes that user makes to it, but I was unsuccessful to define what i'm looking for. here below is the modal code,
<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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="container">
<form style="width: 550px;" action="" method="post" role="form">
<div class="from-group">
<label for="title">Title: </label>
<input class="form-control" type="text" name="title" id="title" value="" placeholder="Page Title">
</div>
<br>
<div class="from-group">
<label for="label">Label: </label>
<input class="form-control" type="text" name="label" id="label" value="" placeholder="Page Label">
</div>
<br>
<div class="from-group">
<label for="header">Header: </label>
<input class="form-control" type="text" name="header" id="header" value="" placeholder="Page Header">
</div>
<br>
<div class="from-group">
<label for="body">Body: </label>
<textarea class="form-control editor" name="body" id="body" row="8" placeholder="Page Body"></textarea>
</div>
<br>
<!-- <button style=" color:#FFFFFF; background-color: #4D6064" type="submit" class="btn ">Submit</button> -->
<input type="hidden" name="submitted" value="1">
<br>
<br>
</form>
</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">Save changes</button>
</div>
</div>
</div>
</div>
The 'right' ajax method?
Ajax is just a way to communicate with a server.
What data do you want to collect?
A GET request will request that the server sends you back some 'data' in the response, its probably the very first example in any 'ajax'-wrapper library, for example, this snippet
$.ajax({
url: "http://fiddle.jshell.net/favicon.png",
beforeSend: function( xhr ) {
xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
}
})
.done(function( data ) {
if ( console && console.log ) {
console.log( "Sample of data:", data.slice( 0, 100 ) );
}
});
is from jQuery.ajax http://api.jquery.com/jquery.ajax/
It sends a request to the url specified (ignore the beforeSend function, it does nothing outrageous anyway) and then handles the response in the '.done' handler. If you're not familiar with promises, just think of that '.done' handler as a callback that contains the data i.e. at some point in the future the server will respond (hopefully) with some data and that function handles it.
Related
I built a simple form that needs validation and then trigger an ajax call (open to not using ajax).
When I run the code on my dev computer (xampp) everything works fine.When I run it on a shared hosting server the validation occurs but the form still submits even if the validation fails.
I've determine that the ajax always runs before the anonymous function but that shouldn't matter since the code runs smoothly on one computer. I tried to put the anonymous function before the ajax and no change.
This is my first post on stack, I'm far from a js expert, please let me know if this is an obvious error or if need to include more than this.
Thanks!
Here's the html code
<div id="addEmployeeModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form id="add_form" class="needs-validation" autocomplete="off" novalidate>
<div class="modal-header">
<h4 class="modal-title">Add User</h4>
<button type="button" class="btn-close close" data-bs-dismiss="modal" aria-hidden="true"> </button>
</div>
<div class="modal-body">
<div class="form-group">
<div class="form-group">Type :
<div class="">
<div class="form-check">
<input type="radio" id="toprope" name="accred_type" class="form-check-input" value="1" required>
<label for="toprope" class="form-label">Top Rope</label>
</div>
<div class="form-check">
<input type="radio" id="lead" name="accred_type" class="form-check-input" value="2">
<label for="lead" class="form-label">Lead</label>
</div>
<div class="invalid-feedback">Field cannot be blank!</div>
</div>
</div>
<div class="form-group">
<label for="firstname" class="form-label">First Name</label>
<input id="firstname" name="firstname" type="text" class="form-control" required>
<div class="invalid-feedback">Field cannot be blank!</div>
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" id="lastname" name="lastname" class="form-control" required>
<div class="invalid-feedback">Field cannot be blank!</div>
</div>
<div class="form-group">
<label>Birthday Date (yyyy-mm-dd)</label>
<div class="input-group col-md-5">
<input type="" id="dob" name="dob" class="form-control" style=" z-index: 100000;" required>
<div class="invalid-feedback">Field cannot be blank!</div>
</div>
</div>
<br />
<div class="modal-footer">
<input type="hidden" value="1" name="type">
<input type="button" class="btn btn-default" data-bs-dismiss="modal" value="Cancel">
<button type="submit" class="btn btn-success" id="btn-add">Add</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Here's the js script for the validation
(function () {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
//Array.prototype.slice.call(forms)
Array.from(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
alert("Matt")
form.classList.add('was-validated')
}, false)
})
})()
And here's the ajax code
// Add user
$(document).on('click','#btn-add',function(e) {
var data = $("#add_form").serialize();
// console.log(data);
alert("submit triggered");
console.log("bleh");
$.ajax({
data: data,
type: "post",
url: "include/save.php",
success: function(dataResult){
//console.log(dataResult);
var dataResult = JSON.parse(dataResult);
alert(statusCode)
if(dataResult.statusCode==200){
$('#addEmployeeModal').modal('hide');
location.reload();
}
else if(dataResult.statusCode==201){
alert(dataResult);
}
},
});
});
Edit: The form is printed in the index.php file by calling a php function from an included page, if that makes any difference.
Edit: I'm testing in xampp but deployed in cpanel if that can help find the issue.
I'm trying to get an alert when i press the log in or sign up button but nothing is coming up. I'm copying this code off a Udemy course and I've gone over it so many times make sure it's exactly like my teachers code but it still doesn't work.
I have more JavaScript code but i didn't include it here as it was working. I've only included the code where it's no longer working for me.
I've looked at other related questions and answers on here where people said to add a jQuery URL into the script tag which did not work for me.
<div class="modal fade" id="exampleModal" 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="loginModalTitle">Login</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<input type="hidden" id="loginActive" name="loginActive" value="1">
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
</form>
</div>
<div class="modal-footer">
<a class="link" id="toggleLogin">Sign up</a>
<button type="button" id="loginSignupButton" class="btn btn-primary">Login</button>
</div>
</div>
</div>
</div>
<script>
$("#toggleLogin").click(function() {
if ($("#loginActive").val() == "1") {
$("#loginActive").val("0");
$("#loginModalTitle").html("Sign Up");
$("#loginSignupButton").html("Sign Up");
$("#toggleLogin").html("Login");
} else {
$("#loginActive").val("1");
$("#loginModalTitle").html("Login");
$("#loginSignupButton").html("Login");
$("#toggleLogin").html("Sign Up");
}
})
$("#loginSignupButton").click(function() {
$.ajax({
type: "POST",
url: "actions.php?action=loginSignup",
data: "email=" + $("#email").val() + "&password=" + $("#password").val() + "&loginActive=" + $("#loginActive").val(),
success: function(result) {
alert(result);
}
})
})
</script>
------ actions.php
<?php
include("functions.php");
if ($_GET['action'] == "loginSignup") {
print_r($_POST);
}
?>
I'm not getting the login or sign up alert when i press the login or sign up button.
Narrow it down. Check for the request in the network panel of the browser dev tools. If the POST doesn't appear there, you know the issue is client side.
Wait for the DOM to load before you set the click handler. Wrap the click handler in a $(document).ready(). If you have already done so, you need to include more code in your question. Based on what you have shared, there are no logic or syntax errors.
I'm new to modals, i want to submit a form and then show success popup if user form is validated else want to show error popup. Also my it should execute php file for sending the email to user in background.
So, far i'm successful in executing the php file in background and show the model when user clicks on submit button.
But i want the popup to show when the form is validated. Also i want to use type="submit" instead of type="button" for form submit.
Here's my code :
<!-- javascript code to execute php file -->
<script type="text/javascript">
function executePhp() {
$.post("sendmail.php");
return false;
}
</script>
<!-- javascript code ends -->
<form class="well" action="" method="">
<div class="form-group col-md-6">
<label for="inputPassword4">Full Name</label>
<input type="text" name="name" class="form-control" id="inputPassword4" placeholder="Enter Full Name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Phone Number</label>
<input type="number" name="mobile" class="form-control" id="inputEmail4" placeholder="Enter Mobile Number">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Email</label>
<input type="email" name="email" class="form-control" id="inputPassword4" placeholder="Enter Your Email">
</div>
</div>
<button type="button" class="btn btn-primary" onclick="executePhp()" style="margin-left: 3%;"
data-toggle="modal" data-target="#myModal">Check</button>
</form>
<!-- Code for popup -->
<!-- Modal -->
<div class="modal fade mymodal" id="myModal" role="dialog">
<div class="modal-dialog mydialog">
<!-- Modal content-->
<div class="modal-content mycontent">
<div class="modal-header myheader">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Message</h3>
</div>
<div class="modal-body mybody">
<br>
<br>
<h3>Thanks for choosing</h3>
<h4>
Your details will arive by email.
Sit back, we'll get back to you soon.
</h4>
<br>
<br>
</div>
<div class="modal-footer myfooter">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Code for popup end-->
Thank you.
You can use Jquery to achieve this.
In you php you can have two variables before the validation like:
$popup_message = "";
$popup_message_color = "";
Now if the form is validated you can display the modal like this:
$popup_message = "login successfully.";
$popup_message_color = "success";
//Open Modal
echo "<script type='text/javascript'>
$(document).ready(function(){
$('#myModal').modal('show');
});
</script>";
In the modal body you can display the message and color.
<div class="modal-body">
<p class="text-<?php echo $popup_message_color; ?>"><?php echo $popup_message; ?></p>
</div>
The same would be done for if validation fails, just change your message and color to $popup_message_color = "danger";
Note If you are validation to another page then the modal should be in that page and you change the close buttons to a link to go back.
Also php script should come after you loaded the jquery.
How can I append a URL with an email address that a user inputs, and then submits this email address via button? I am using a modal that will pop up, ask for the email, and then call the url when the user hits the submit button. (jQuery is supported) Any help is much appreciated! Thanks
<div id="emailModal" 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">×</button>
<h3 id="myModalLabel"> We Can Help</h3>
</div>
<div class="modal-body">
<h6> Enter your information in the fields below to reset a forgotten password, or to restore access to an account that has been locked for security </h6>
<br>
<form >
<input type="text" class="input-block-level" placeholder="Email address">
<!-- <input type="password" class="input-block-level" placeholder="Password">
<label class="checkbox">
<a href="#"><input type="checkbox" value="remember-me"> Remember me
</label></a> -->
</form>
</div>
<div class="modal-footer">
<button class="m-btn blue" data-dismiss="modal">Submit</button>
</div>
</div>
You can do something like
$("#emailModal .m-btn").click(function(){
$.post("/my/url?email=" + $("#emailModal input.input-block-level").val(), function(){
// this function is called on POST finish.
});
return false;
});
I think this is what you are after.
Change the form to this...
<form action="some-url.php" method="get">
<input type="text" name="email" class="input-block-level" placeholder="Email address">
</form>
and add this script...
$("#emailModal button").on("click", function() {
$("#emailModal form").submit();
});
I'm using a pretty straightforward modal window for a webapp. For some reason whenever I click on any of the inputs in the modal, the focus is set to the input before it. However, if I click on the label, the focus is set to the proper input. Scratching my head on this one...
Here's the markup:
<!--Admin Approve Modal -->
<div id="admin_approve_modal" class="modal hide fade" role="dialog" aria-labelledby="adminApproveModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="adminApproveModalLabel">Approval For Order #<span class="js-orderID"></span></h3>
</div>
<form id="admin_approve_form" name="admin_approve_form" method="post" action="admin-form-submit.php?query=adminApprove">
<div class="modal-body">
<label for="poNumber" />Factory PO #:
<input type="text" id="poNumber" name="poNumber" />
<script>
$(function() {
$( "#etaDate" ).datepicker();
});
</script>
<label for="etaDate" />ETA Date:
<input type="text" id="etaDate" name="etaDate" value="" />
<label for="comments" />Comments:
<input type="text" id="comments" name="comments" value="" />
<div id="admin_validation_error" name="admin_validation_error"></div>
<!--Hidden inputs-->
<input type="hidden" id="adminOrderID" name="orderID" value="" />
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button type="submit" class="btn btn-primary">Approve</button>
</div>
</form>
</div>
<!-- end modal -->
There is no conflicting javascript (to my knowledge) on the page. Any ideas?
i cannot reproduce your bug, can you setup a jsfiddle? It worked for me with clean bootstrap files.
Well I'm dumb. For some reason I thought labels were self-closing... they aren't!