为什么我的表格不提交

Question

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. 该行动是hi有目的的，所以我会去一个完全不同的页面。 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 编辑@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 1

There are 2 issues in your code 您的代码中有2个问题

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的选择器$trigger错误-您的VM736 jquery.js:1502 Uncaught Error: Syntax error, unrecognized expression: a[href=#Popup]有VM736 jquery.js:1502 Uncaught Error: Syntax error, unrecognized expression: a[href=#Popup]

$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 此外， $model和close按钮的单击处理程序还会阻止Submit按钮click事件的默认操作

  $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 演示：小提琴

为什么我的表格不提交

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-06-08 03:01:00

为什么我的表格不提交

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-06-08 03:01:00

解决方案1
1 已采纳 2016-06-08 03:01:00