carga de formulario con ajax y presentar con jQuery

He luchado mucho tiempo con esto, pero puede averiguar cuál es incorrecto.

Tengo un archivo de índice donde estoy cargando el lidiar con ajax (en este caso una forma almacenada en add_admin.php). Tengo un formulario que carga perfectamente en un div después de hacer clic en un elemento de menú(la llamada a la función ajax – esta parte no funciona). Pero si quiero enviar ese formulario con jQuery epílogos el uso de la

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

que no consigue llamado. Estoy sospechando que la razón es que el formulario no estaba presente en la página en el momento en que fue cargado. Si puedo mover el formulario directamente a la página de índice, la función funciona perfectamente.

$(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; 
  });
});

El formulario para enviar

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>

puede alguien por favor aconsejar?

Gracias

InformationsquelleAutor Sudec | 2013-09-05

3 Kommentare

  1. 1

    Utilizar este código:

    <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>

    Hemos de definir una función en javascript el uso de este código 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;
    }

    Gracias!

    • Puedo obtener la función a ser llamada y se va tan lejos como $.ajax( pero no después de eso. Si puedo quitar el comentario alert(data); me sale un alerta con los datos cumplimentados en el formulario. Sin embargo, después de que no pasa nada. También probé con la adición de una función de error, pero nada
    • es allí una manera de probar si el script de php se ejecuta o de hecho se llama? la adición de un echo declaración no ayuda. probé.
  2. 2

    Aquí es lo que hago normalmente, agregar un evento onSubmit en la etiqueta form

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

    y luego con 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
     }
    • Me ha ayudado mucho!
  3. 1

    Yo estaba teniendo el mismo problema cuando me encontré con este hilo. Esta solución no funciona para lo que tenía que hacer, pero lo que terminé haciendo es llamando a mi página de iniciar la función de nuevo después de cargar el formulario AJAX. Este añadido el nuevo formulario AJAX para el caso de las llamadas y funcionó perfectamente.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea