Jack Man Jack Man - 6 months ago 21
jQuery Question

Why isn't my form submitting

I have a Login Popup that has a form in it. The problem is that the form is doing nothing on submit. Why is this? I've tried moving around the form elements, but nothing is working. Am I misunderstanding some part of input? The action is

hi
on purpose, so I would go to a completely different page. But nothing happens...



/***********************\

Modal Module - Title CSS FTW

\***********************/

body {
padding: 0;
margin: 0;
}

#nav_logo {
font-family: 'Open Sans', sans-serif;
color: white;
font-size: 20px;
position: relative;
left: 188px;
top: 9px;
}

#search_engine {
background: white;
color: #353535;
outline: none;
width: 500px;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
padding: 7px 30px 7px 10px;
border: none;
border-radius: 3px;
position: relative;
top: 9px;
left: 210px;
}

#search_engine::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #353535;
}

#search_engine:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #353535;
opacity: 1;
}

#search_engine::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #353535;
opacity: 1;
}

#search_engine:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #353535;
}

#login_nav_div, #signup_nav_div {
float: right;
font-family: 'Open Sans', sans-serif;
color: #353535;
font-size: 17px;
padding: 7px 30px 7px 10px;
border-radius: 3px;
margin-right: 10px;
position: relative;
left: -66px;
background: white;
top: 6px;
}

#login, #signup {
position: relative;
top: -1px;
left: 9px;
}

#nav {
width: 1600px;
height: 50px;
background: #1F1F1F;
}

.Modal {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
visibility: hidden;
}
.Modal .content {
position: absolute;
left: 50%;
top: 30%;
width: 390px;
padding: 50px;
border-radius: 3px;
background: #fff;
transform: translate(-50%, -30%) scale(0);
z-index: 50;
}
.Modal .close {
position: absolute;
top: 8px;
right: 8px;
display: block;
width: 18px;
height: 18px;
padding: 2px;
line-height: 18px;
border-radius: 50%;
text-align: center;
cursor: pointer;
background: #C5C5C5;
color: #fff;
}
.Modal .close:before {
content: '\2715';
}
.Modal.is-visible {
visibility: visible;
background: rgba(0, 0, 0, 0.5);
transition: background .35s;
transition-delay: .1s;
z-index: 40;
}
.Modal.is-visible .content {
transform: translate(-50%, -30%) scale(1);
transition: transform .35s;
}

/* Model */

#login_title {
font-family: 'Open Sans', sans-serif;
font-size: 23px;
letter-spacing: 1px;
position: relative;
top: -20px;
left: 110px;
}

#login_username, #login_password {
outline: none;
border: 1px solid #ccc;
color: #353535;
padding: 12px 10px 12px 10px;
border-radius: 3px;
font-size: 16px;
position: relative;
left: -30px;
width: 425px;
}

#login_username:focus, #login_password:focus {
border: 1px solid #4096ee;
}

#login_submit {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4096ee+0,4096ee+100;Blue+Flat+%232 */
background: #4096ee; /* Old browsers */
background: -moz-linear-gradient(top, #4096ee 0%, #4096ee 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #4096ee 0%,#4096ee 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #4096ee 0%,#4096ee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */

color: white;
text-align: center;
padding: 11px 12px 11px 12px;
font-size: 19px;
width: 445px;
font-weight: normal;
position: relative;
top: 5px;
border-radius: 3px;
float: left;
font-family: 'Open Sans', sans-serif;
border: none;
outline: none;
cursor: pointer;
position: relative;
left: -28px;
font-weight: bold;
}

#login_submit:focus, #login_submit:hover {
background: rgb(37,141,200);
}


/* End of Model */

<!DOCTYPE html>
<html>
<head>
<title> Hacked Genius </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel='stylesheet' href='main.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
</head>

<body>

<div id="Popup" class="Modal">
<div class="content">
<span id='login_title'> Welcome Back </span> <br>
<form action='hi' method='post'>
<input id='login_username' placeholder='Username' name='login_username'> <br> <br>
<input id='login_password' placeholder='Password' name='login_password' type='password'> <br> <br>
<input type='submit' value='Login' id='login_submit'>
</form>
<span class="close"></div>
</div>
</div>

<!-- nav -->
<div id='nav'>
<span id='nav_logo'> Logo </span>

<!-- Search Engine -->
<input id='search_engine' placeholder='Search Courses'>
<!-- End of Search Engine -->

<!-- Sign Up -->

<a href='#' class='model_link2'> <div id='signup_nav_div'>
<span id='signup'> Sign Up </span>
</div> </a>

<!-- End of Sign Up -->

<!-- Login -->

<a href="#Popup" class="button"> <div id='login_nav_div'>
<span id='login'> Login </span>
</div> </a>

<!-- End of Login -->

</div>
<!-- end of nav -->

<script>
$.fn.expose = function(options) {

var $modal = $(this),
$trigger = $("a[href=" + this.selector + "]");

$modal.on("expose:open", function() {

$modal.addClass("is-visible");
$modal.trigger("expose:opened");
});

$modal.on("expose:close", function() {

$modal.removeClass("is-visible");
$modal.trigger("expose:closed");
});

$trigger.on("click", function(e) {

e.preventDefault();
$modal.trigger("expose:open");
});

$modal.add($modal.find(".close")).on("click", function(e) {

e.preventDefault();

// if it isn't the background or close button, bail
if (e.target !== this)
return;

$modal.trigger("expose:close");
});

return;
}

$("#Popup").expose();

// Example Cancel Button

$(".cancel").on("click", function(e) {

e.preventDefault();
$(this).trigger("expose:close");
});

// Example Callbacks
/*
$("#Popup").on("expose:opened", function() {

alert("Modal Opened!");
});

$("#Popup").on("expose:closed", function() {

alert("Modal Closed!");
});
*/
</script>
</body>





EDIT @Arun P Johny

This is what my code now looks like:

<script>
$.fn.expose = function(options) {

var $modal = $(this),
$trigger = $('a[href="' + this.selector + '"]');

$modal.on("expose:open", function() {

$modal.addClass("is-visible");
$modal.trigger("expose:opened");
});

$modal.on("expose:close", function() {

$modal.removeClass("is-visible");
$modal.trigger("expose:closed");
});

$modal.on("click", function(e) {
if ($(e.target).is($modal) || $(e.target).is('.close')) {
e.preventDefault();
$modal.trigger("expose:close");
}
});

$modal.add($modal.find(".close")).on("click", function(e) {

e.preventDefault();

// if it isn't the background or close button, bail
if (e.target !== this)
return;

$modal.trigger("expose:close");
});

return;
}

$("#Popup").expose();

// Example Cancel Button

$(".cancel").on("click", function(e) {

e.preventDefault();
$(this).trigger("expose:close");
});

// Example Callbacks
/*
$("#Popup").on("expose:opened", function() {

alert("Modal Opened!");
});

$("#Popup").on("expose:closed", function() {

alert("Modal Closed!");
});
*/
</script>


Is this right?

Answer

There are 2 issues in your code

The selector used for $trigger is throwing an error - You have VM736 jquery.js:1502 Uncaught Error: Syntax error, unrecognized expression: a[href=#Popup] in your console

$trigger = $('a[href="' + this.selector + '"]')

Also the click handler for $model and close button is preventing the default action of the submit button click event

  $modal.on("click", function(e) { //instead of $modal.add($modal.find(".close")).on("click", function(e) {
    if ($(e.target).is($modal) || $(e.target).is('.close')) {
      e.preventDefault();
      $modal.trigger("expose:close");
    }
  });

Demo: Fiddle