javascript 使用 ajax 加载表单并使用 jQuery 提交

load form with ajax and submit with jQuery

提问by Sudec

I have struggled for quite some time now with this but can figure out whats wrong.

我已经为此挣扎了很长一段时间，但可以弄清楚出了什么问题。

I have an index file where I'm loading the contend with ajax (in this case a form stored in add_admin.php). I have a form which loads just perfectly in a div after clicking a menu item(calling the ajax function - this part works). But if I want to submit that form with jQuery afterwords using the

我有一个索引文件，我在其中加载了与 ajax 的竞争（在这种情况下是一个存储在 add_admin.php 中的表单）。我有一个表单，它在单击菜单项（调用 ajax 函数 - 这部分工作）后完美地加载到 div 中。但是，如果我想使用 jQuery 后记提交该表单

$(".loginform").submit(function(e) {});

it doesn't get called. I'm suspecting the reason is that the form was not present on the page at the time it was loaded. If I move the form directly to the index page, the function works perfectly.

它不会被调用。我怀疑原因是该表单在加载时不在页面上。如果我将表单直接移动到索引页，则该功能可以完美运行。

$(document).ready(function () {
$(".loginform").submit(function(e) {
  data = $("#loginform").serialize();
  password = document.getElementById("user_pass").value;
  passtosubmit=hex_sha512(password);

  data += "&pass=" + encodeURIComponent(passtosubmit);
  password="";

//$.post("modules/process/process_add_admin.php", data);
//alert(data);return false;
$.ajax({
  type: "POST",
      url: "/modules/process/process_add_admin.php",
  data: data,
  success: function() {
    $('#main_panel_container').html("<div id='message'></div>");
    $('#message').html("<h2>Contact Form Submitted!</h2>")
    .append("<p>We will be in touch soon.</p>")
    .hide()
    .fadeIn(1500, function() {
    $('#message').append("<img id='checkmark' src='images/check.png'/>");
  });
 }
});
return false; 
  });
});

The form to submit

要提交的表格

add_admin.php

add_admin.php

<div id="contact_form">
<form name="loginform" class="loginform" id="loginform" action="#" method="post">
            <label><strong>Username</strong></label><input type="text" name="username" id="user_login"  size="28" class="input" />
            <br />
            <label><strong>Password</strong></label><input type="password" name="p" id="user_pass"  size="28" class="input"/>
            <br />
            <label><strong>E-mail</strong></label><input type="text" name="email" id="user_email"  size="28" class="email" />
            <br />
            <label><strong>First Name</strong></label><input type="text" name="fname" id="user_fname"  size="28" class="input" />
            <br />  
            <label><strong>Last Name</strong></label><input type="text" name="lname" id="user_lname"  size="28" class="input" />
            <br />  
            <input id="save" class="addbutton" type="submit" value="Add" onclick=""/>
</form>
</div>

can anyone please advise?

任何人都可以请指教吗？

Thanks

谢谢

回答by Hosea Kambonde

Here's what I normally do, add a onSubmit event in the form tag

这是我通常做的，在表单标签中添加一个 onSubmit 事件

<form name="loginform" class="loginform" id="loginform" action="#" method="post" onSubmit="return addContent('loginform');">

and then with javascript

然后用javascript

 function addContent(frm) {
     //anything you wanna do before you post

     $.post(
            url,
            $('#' + frm).serialize(),
            function (data) {
                result = data;
            }
          )
          .success(function() {
            //add your success proccesses
          })
          .complete(function() { 

          })
          .error(function() {
               alert('An error has occurred.');
          });      

     return false;// this stops the form from actually posting
 }

回答by jligda

I was having the same issue when I ran across this thread. This solution did not quite work for what I needed to do, but what I wound up doing is just calling my page initiate function again after I loaded the AJAX form. This added the new AJAX form to the event calls and it worked perfectly.

当我遇到这个线程时，我遇到了同样的问题。这个解决方案对我需要做的事情并不完全有效，但我最终做的只是在加载 AJAX 表单后再次调用我的页面启动函数。这将新的 AJAX 表单添加到事件调用中，并且效果很好。

回答by Suresh Peiris

Use this code:

使用此代码：

<div id="contact_form">
<form name="loginform" class="loginform" id="loginform" action="javascript:add_admin();" method="post">
            <label><strong>Username</strong></label><input type="text" name="username" id="user_login"  size="28" class="input" />
            <br />
            <label><strong>Password</strong></label><input type="password" name="p" id="user_pass"  size="28" class="input"/>
            <br />
            <label><strong>E-mail</strong></label><input type="text" name="email" id="user_email"  size="28" class="email" />
            <br />
            <label><strong>First Name</strong></label><input type="text" name="fname" id="user_fname"  size="28" class="input" />
            <br />  
            <label><strong>Last Name</strong></label><input type="text" name="lname" id="user_lname"  size="28" class="input" />
            <br />  
            <input id="save" class="addbutton" type="submit" value="Add"/>
</form>
</div>

You have to define a function on javascript use this javascript code

你必须在 javascript 上定义一个函数，使用这个 javascript 代码

function add_admin(){
  data = $("#loginform").serialize();
  password = document.getElementById("user_pass").value;
  passtosubmit=hex_sha512(password);

  data += "&pass=" + encodeURIComponent(passtosubmit);
  password="";

    //$.post("modules/process/process_add_admin.php", data);
     //alert(data);return false;
      $.ajax({
        type: "POST",
        url: "/modules/process/process_add_admin.php",
        data: data,
        success: function() {
          $('#main_panel_container').html("<div id='message'></div>");
          $('#message').html("<h2>Contact Form Submitted!</h2>")
          .append("<p>We will be in touch soon.</p>")
          .hide()
          .fadeIn(1500, function() {
            $('#message').append("<img id='checkmark' src='images/check.png' />");
          });
        }
      });
      return false;
}

Thanks!

谢谢！