formulaire ne présente pas lors de l'exécution de la fonction submit() jQuery

Question

J'ai un formulaire avec le code HTML ci-dessous:

<form id="course_edit_form" name="course_form" action="/courses/save" method="post"> 
    <fieldset> 
    <div id="side-left"> 
     <!-- Course Name --> 
     <input type="hidden" id="course_id" name="course_id" value="${c.the_course.id}" /> 
     <div> 
      <label for="name" id="name_label">Course name<em>*</em></label> 
      ${h.tags.text("name", c.the_course.name, size=40)} 
     </div> 

     <!-- Event Type --> 
     <div> 
      <label for="type_list" id="class_type_label">Event type</label> 
      <p>Use Ctrl to do multi-select</p> 
      <select multiple="multiple" id="type_list" class="type-box required" name="type_list"> 
      % for ty in c.all_types: 
       % if int(ty.id) in c.typeids: 
       <option selected="selected" value="${int(ty.id)}">${str(ty.name)}</option> 
       % else: 
       <option value="${int(ty.id)}">${str(ty.name)}</option> 
       % endif 
      % endfor 
       <option value="all">All</option> 
      </select> 
     </div> 
     <div>....more input fields here</div> 
    </div> 
    <!-- Controls --> 
    <div class="controls"> 
     <input id="delete" name="delete" type="button" value="Delete" /> 
     <input id="submit" name="submit" type="submit" value="Update" /> 
    </div> 
    </fieldset> 
</form> 

Je joint un gestionnaire de clic à mon bouton soumettre pour que mon javascript d'abord valider mon formulaire avant soumettre le formulaire actuel. Si tout se passe bien pendant la validation, je vais mettre un drapeau "course_form_valid" à true. Dans les dernières lignes de mon couple de javascript je:

if (course_form_valid) { 
    jQuery('#course_edit_form').submit(); 
} 

Cependant, la ligne ci-dessus présente jamais la forme même lorsque course_form_valid est vrai. J'ai même essayé de supprimer les attributs d'action et la méthode de ma forme et a utilisé le javascript ci-dessous à la place, mais cela ne fonctionnerait pas:

 if (course_form_valid) { 
     jQuery('#course_edit_form').submit(function() { 
     jQuery.ajax({ 
      url: '/courses/save', 
      type: 'GET', 
      data: jQuery('#course_edit_form').serialize(), 
      async: false 
     }); 
     }); 
    } 

Que se passe-t-il? Quelqu'un peut-il m'aider s'il vous plaît?

-Mark

Answer 1

je fixe la question ci-dessus en supprimant e.preventDefault() et en modifiant les dernières lignes de code JS:

 if (course_form_valid) { 
     jQuery.ajax({ 
      url: '/courses/save', 
      type: 'GET', 
      data: jQuery('#course_edit_form').serialize(), 
      async: false 
     }); 
    } 

Merci pour l'aide de tout le monde et les temps de réponse rapides . Je n'aurais pas pu le faire sans vous les gars.

Answer 2

D'abord, je le faire en Firefox avec le Firebug plugin. Assurez-vous que les demandes HTTP apparaissent dans la console, puis réessayez. Que vois-tu? Aucune demande n'a été faite? Si aucune demande n'a été faite, l'envoi n'est jamais atteint. S'il y a une soumission, y a-t-il une erreur ultérieure? Est-ce une erreur 404? Si oui, assurez-vous qu'il existe /courses/save. Si c'est une erreur 500, cela signifie que le formulaire est en train de soumettre, mais vous avez un problème dans le code côté serveur. Firebug devrait revenir avec l'erreur que votre serveur affiche, ce qui vous aidera à déboguer à partir de là. De plus, assurez-vous que si vous "POST" votre formulaire, votre code backend est configuré pour recevoir un POST.

Cela devrait probablement vous mettre sur la bonne voie!

Answer 3

Essayez ceci,

if (course_form_valid) { 
    $('#course_edit_form').submit(function() { 
     return true; 
    }); 
} 

Answer 4

Ce qui se passe est que vous devez valider en tant que l'utilisateur Soons soumettre le formulaire, vous pouvez retourner true ou false en fonction de la validation.

effacer le if statement. Ecrire ceci:

jQuery('#course_edit_form').submit(function() { 
if (course_form_valid) { 
    return false; // It prevents form submition 
} 
jQuery.ajax({ 
url: '/courses/save', 
type: 'GET', 
data: jQuery('#course_edit_form').serialize(), 
async: false 
}); 
});