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.

passing a form data inside a modal into controller button outside the form without javascript

I am using Codeigniter Framework and now, i have a modal with a form inside of it. Now in my modal footer, i put the submit form for it. It is already outside of the modal. Now why is it doesn't submit in my controller?. I put a var_dump in my controller for it to echo when it was submitted, I am sending it thru without javascript.
Here is my modal with form:
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Category</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<form id="frm_category" class="form-horizontal" method="POST" action="Admin_controls/insertCategory">
<div class="form-group">
<label for="cat_name">Category: </label>
<input type="text" class="form-control" name="cat_name">
</div>
<div class="form-group">
<label for="cat_desc">Description: </label>
<input type="text" class="form-control" name="cat_desc">
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" value="submit" form="frm_category">Add</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
Here is my controller:
public function insertCategory() {
$data = array (
'Category_name' => $this->input->post('cat_name'),
'Category_desc' => $this->input->post('cat_desc')
);
var_dump($data);
}

You should place your submit button before </form>. other wise you need javascript to submit your form
you can use the following code
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Category</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<form id="frm_category" class="form-horizontal" method="POST" action="Admin_controls/insertCategory">
<div class="form-group">
<label for="cat_name">Category: </label>
<input type="text" class="form-control" name="cat_name">
</div>
<div class="form-group">
<label for="cat_desc">Description: </label>
<input type="text" class="form-control" name="cat_desc">
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" value="submit" onclick="myFunction()">Add</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
<script>
function myFunction() {
document.getElementById("frm_category").submit();
}
</script>

You should change the button type to submit. So it can submit the form.
Submit button should be inside of form tag
I have modified your modal code. And I hope it will work
×
Add Category
Category:
Description:
Add
Close

If you want to insert a data then you should follow this step:
To POST or GET you should have add that action attribute in side the <form> tag.
Now For post you need to give address of your controller into the <form action = "<?= base_url('your_controller/your_function') ?>" method="post">.
Now at the controller side:
public function your_function(){
// By using this you can get all posted data at once
$your_post_data = $this->input->post();
// By using this you get the post data seperatedly
$your_post_data = $this->input->post('user_name'); // your form input name
//Now for sending data to the model for database querys
$this->load->model ('your_model');
$data = $this->your_model->your_model_function($your_post_data);
}
if you don't want to load model every time then you can add the model in to __construct
public function __construct() {
parent::__construct ();
$this->load->model ('your_model');
// So now on you just need to call the model name in your function.
}
public function your_function(){
// By using this you can get all posted data at once
$your_post_data = $this->input->post();
// By using this you get the post data seperatedly
$your_post_data = $this->input->post('user_name'); // your form input name
$data = $this->your_model->your_model_function($your_post_data);
}
Now Inside the model:( i am giving example for insert)
public function your_model_function($your_post_data ){
$this->db->insert_batch('your_table_name', $your_post_data );
//If you want to understing of query execuation
// for thie you need to enable the log from config.php form config folde.
//Remove comment from log_message after emeble the log message
//log_message('debug', 'Last Insert query: ' . print_r($this->db->last_query(), TRUE).' Inserted Data: '.print_r($your_post_data, TRUE));
if($this->db->affected_rows() > 0){
return TRUE;
} else {
return FALSE;
}
}
For Mode detail regarding querys please visit this CI documentation
Your Code should be:
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Category</h4>
</div>
<form id="frm_category" class="form-horizontal" method="POST" action="<?= base_utl('Admin_controls/insertCategory') ?>">
<div class="modal-body">
<div class="container-fluid">
<div class="form-group">
<label for="cat_name">Category: </label>
<input type="text" class="form-control" name="cat_name">
</div>
<div class="form-group">
<label for="cat_desc">Description: </label>
<input type="text" class="form-control" name="cat_desc">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" value="submit" form="frm_category">Add</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</form>
</div>
Your controller should be:
public function insertCategory() {
// You should have to validate befor insert
$this->load->model ('your_model');
$your_post_data = $this->input->post();
$insert_status = $this->your_model->your_model_function($your_post_data);
if($insert_status == TRUE){
//return to your view or load the view
$this->load->view ('your_view_directory');
} else {
// Send Error Message
}
For Validation Visit this CI documentation

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>

Unable to display output in Chrome Console with Jquery

I'm a beginner with parse and jquery. But for some reason I'm having issues with the most basic thing, which is outputting messages into the console. I've checked my Chrome settings and they're are filtering to all.
I've written the code to simply store email and password FE inputs into parse. If the inputs match the basic validation that I've created, it should display a console message. If the input is invalid, it should display another console message. But for some reason everything I've tried doesn't seem to be working. Here is what my code looks like.
http://imgur.com/a/XHQeg
Thanks for the help. Please let me know if I've left out any information.
index.html
<div class="modal fade" id="signUp" tabindex="-1" role="dialog" aria-labelledby="signUpLabel">
<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="signUp-title" id="signUpLabel">Sign Up</h4>
</div>
<div class="modal-body">
<form id = "register-form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="form-group">
<label for="password2">Confirm Password</label>
<input type="password" class="form-control" id="password2" placeholder="Confirm Password">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Sign Up</button>
</div>
</div>
</div>
</div>
jquery.js
Parse.initialize("xxx",
"yyy");
$("#register-form").submit(function(event){ event.preventDefault();
//lets page prevent refresh
var email = $("#exampleInputEmail1"). val(); var password =
$("#password"). val(); var password2 = $("#password2"). val();
if ( password == password2) {
var user = new Parse.User();
user.set("email", email)
user.set("password", password)
user.signUp(null, {success:function(user){
console.log("Register Succeeded!")
}, error:function(user, error){
console.log("Registration error:" +error.message);
} });
}
});

When i was making your code more readable in my code editor i noticed you have a space between the dot and val() in your variable declarations. You are also missing a semicolon at the end of the first line in the password if statement.
your button also is not inside your form tags and is not of type submit!
Fix those problems and it will work.

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