We Keep Coding

Not Showing Success Alert

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.

how to post modal information to a api using jquery,javascript,ajax

I have a modal, e.g the modal is in modal.html, the method i wrote in a javascript file modal.js. when I am trying to submit data through modal, it is not working properly. the code is below. please help me someone.
/modal.html
<div class="col-md-12 text-right">
<button type="button" data-toggle="modal" data-target="#myModal">Update User Information</button>
<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">Enter User Information</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" class="form-control" id="user_name" placeholder="User name">
</div>
<div class="form-group">
<input type="email" class="form-control" id="email_id" placeholder="Enter email">
</div>
<div class="form-group">
<input type="text" class="form-control" id="address" placeholder="Enter Address">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" id="myFormSubmit">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
/modal.js
$(function() {
$('#myFormSubmit').click(function () {
$.post("/api/adduserInfo/v1",
{
user_name : $("#user_name").val(),
email : $("#email_id").val(),
address : $("#address").val()
});
});
});

You can use something like this (you will have to get the parametres via post on the server side):
<!-- FORM -->
<form id="idform">
<!-- FORM INPUTS -->
<input class="btn btn-large btn-primary" value="Submit" type="submit">
</form>
<script>
// Variable to hold request
var request;
$("#idform").submit(function(event) {
// Prevent default posting of form - put here to work in case of errors
event.preventDefault();
// Abort any pending request
if (request) {
request.abort();
}
var $form = $(this);
// Let's select and cache all the fields
var $inputs = $form.find("input, select, button, textarea");
// Serialize the data in the form
var serializedData = $form.serialize();
$.ajax({
url: '/api/adduserInfo/v1',
type: 'post',
data: serializedData,
beforeSend: function () {
$("#divtoaddresult").html("Processing, please wait...");
},
success: function (response) {
$("#divtoaddresult").html(response);
}
});
});
</script>

Submit form with ajax

I'm building a website with GitHub pages and Jekyll.
I want to build a contact form where userss can send emails. For this I'm using Formspree . I created an account and I tried and it's working.
The problem is that when an email is sent, i don't want to redirect the page at default thanks page. I tried to submit it with ajax but something is wrong and for that it's not working!!
As result I have a 404 error. Also URL is changed and it looks like this: /?name=Name+Lastname&_replyto=test%40hotmail.com&message=Email+content+
Can somebody help me!
Here's my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<script>
$("#contact-form").validate({
submitHandler: function(form) {
$.ajax({
url: "//formspree.io/egzontina.krasniqi#hotmail.com",
method: "POST",
data: {
name: $(form).find("input[name='name']").val(),
_replyto: $(form).find("input[name='_replyto']").val(),
message: $(form).find("textarea[name='message']").val()
},
dataType: "json",
success: function() {
$("#submit-success").fadeIn();
$("#contact-form").fadeOut();
},
error: function() {
$("#submit-errors").fadeIn();
}
});
}
});
</script>
Here's my html code:
<div id="submit-success" class="alert alert-success alert-dismissible collapse" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
Message received! I'll be in touch.
</div>
<div id="submit-errors" class="alert alert-danger alert-dismissible collapse" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
It looks like there was an error submitting the form. Please try again later.
</div>
<form id="contact-form" class="form" action="/">
<div class="form-group">
<label for="name">Name</label>
<input class="form-control" type="text" name="name" required placeholder="Name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input class="form-control" type="email" name="_replyto" required placeholder="email#address.com">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea class="form-control" name="message" placeholder="Message" required rows="5"></textarea>
</div>
<input class="btn btn-primary" type="submit" value="Send">
</form>

Currently, your form is submitting normally. Stop the default action with
$('#contact-form').on('submit', function(e) {
e.preventDefault();
});

Remove action from your form and then it will surely work.
Otherwise "/" will be called as a GET request in spite of any other validation that you are following on your client side.
#Dekoy is absolutely correct.
Use this code :
<form id="contact-form" class="form">

Remove the action="/" from your form, leaving you with:
<form id="contact-form" class="form">
Try that and let me know what happens.
Yh and change the submit input to a button
<button type="button" class="btn btn-primary">Send</button>
#Subhasish contribution is correct too. vote our answers pls.
Let's know if u find it helpful

Bootstrap 3 modal form not triggering jQuery .submit()

I am trying to get a Bootstrap 3 modal form to trigger a form.submit() in jQuery, but no matter what I try, I can't get it to fire .
<div class="modal fade" id="modal-signup" tabindex="-1" role="dialog" aria-labelledby="modal-signup" 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" aria-hidden="true">×</button>
<h4 class="modal-title">Sign up</h4>
</div>
<div class="modal-body">
<form role="form" action="/" id="modal-signup-form" >
<div class="form-group">
<input type="email" class="form-control input-lg" placeholder="email">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" placeholder="password">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" placeholder="confirm">
</div>
</form>
</div>
<div class="modal-footer">
<p>Already have account ? Sign in here.</p>
<input type="submit" class="btn btn-success btn-block btn-lg" value="Sign up">
</div>
</div>
</div>
</div>
and the JS
$("#modal-signup-form").submit(function( event ) {
event.preventDefault();
alert("made it");
$.ajax({
type: "POST",
url: "adduser.php",
data: $('form.adduser_model').serialize(),
success: function (msg) {
$("#thanks").html(msg)
$("form.noteform").modal('hide');
},
error: function () {
alert("failure");
}
});
return false;
});
I've created a fiddle...
http://jsfiddle.net/menriquez/sreco3jt/
If you hit "Sign Up" and "Sign Up" in the model form, I would expect the event to fire and see the alert, but it doesn't.

It's because the submit button isn't inside the #modal-signup-form form element.
Either add the button to the inside of the <form>, or add an event handler to trigger a submit when the button is clicked:
$(document).on('click', '#modal-signup-form-submit', function (e) {
$('#modal-signup-form').submit();
});
Updated Example

You have to add following submit button code before closing of form tag.
<input type="submit" class="btn btn-success btn-block btn-lg" value="Sign up">
JS Fiddle

Call for External Function using jQuery

I've got an external js file with the following code in it that is checking to see if a person login credentials are true or false. When I put this jquery into the actual php file it will work as intended but when it I put the jQuery into the js file and try calling it it doesn't work and I'm not getting any errors. What's wrong with the call?
js file:
function handleLogin(event) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $( this ),
username = $form.find( "input[name='username']" ).val(),
password = $form.find( "input[name='password']" ).val(),
url = "../process/login.php";
// Send the data using post
var posting = $.post( url, { username: username, password: password } );
// Reset data in #testStatus textarea
posting.done(function( data ) {
if (data == '1') {
$('#loginModal').modal('hide')
$( "#loginOption" ).replaceWith( "<li id='loginOption'><a href='logout.php'>Logout</a></li>" );
}
});
}
php file (the call of the function located at the end of the php file):
<!-- Modal -->
<div class="modal fade" id="loginModal" 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" id="loginModalLabel">Login</h4>
</div>
<div class="modal-body">
<form id="loginForm" action="">
<div class="form-group">
<label for="username">Username</label>
<input name="username" type="text" class="form-control" id="username" placeholder="Username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input name="password" type="password" class="form-control" id="password" placeholder="Password">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" id="loginSubmit" name="login" class="btn btn-primary" value="Login">
</div>
</form>
</div>
</div>
</div>
<script>
$("#loginForm").submit(function handleLogin() { });
</script>

You need to pass the function reference to the submit event handler...
Instead you are creating a new function which does not do anything to the submit handler, so try
$("#loginForm").submit(handleLogin);

It should be like this:
$("#loginForm").submit(function(e){
handleLogin(e);
});