jQuery submit / preventDefault / post

La meta

  • Estoy tratando de usar AJAX para publicar datos (de un formulario en la “Página A”) a otra página (“Página B”)
  • Quiero que se cargue algo de “Página B” en “Página A” dentro de un div especificado (# resultado).

Lo que he intentado

  • He creado el HTML relevante y JS en gran parte basado en la documentación de jQuery .post() con cierta influencia del formulario de envío de jQuery AJAX .
  • He jugado con alert () para ver dónde está fallando el proceso.
  • He creado un jsFiddle en http://jsfiddle.net/jhfrench/QjaTq/ (el HTML y el JavaScript que siguen son los mismos)

Los síntomas

  • La página A se envía directamente a la página B, como si el formulario se presentara normalmente y no hubiera jQuery para interceder.

Teorias

  • el método .submit() no está adjuntando
  • o se adjunta, pero la directiva preventDefault no intercepta el envío de formularios tradicional

HTML

  
Politician Celebrity
<input type="hidden" name="data" value="

Text echoed back to request

">
We want to load the results within this div

JavaScript

 var trimTextFields = function () { alert('trim fields'); }, checkForm = function (incoming_form) { alert('custom validation'); }; /* attach a submit handler to the form */ $('#form_edit_sensitivity').submit(function (event) { /* stop form from submitting normally */ event.preventDefault(); confirm('we got this far'); /* get some values from elements on the page: */ var $form = $(this), data = $form.serialize(), url = $form.attr('action'); /* Send the data using post */ var posting = $.post(url, data); /* Put the results in a div */ posting.done(function (data) { var content = $(data).find('#summary'); $('#result').empty().append(content); }); }); 

Para parafrasear las palabras inmortales de la “Chica de la Hermandad de Mujeres Cambiada” , estoy a punto de ponerle mi computadora a C-Punt sobre esta.

Una vez más, jsFiddle en http://jsfiddle.net/jhfrench/QjaTq/

 var trimTextFields = function () { alert('trim fields'); }, checkForm = function (incoming_form) { alert('custom validation'); return true; // <-- NECESSARY BECAUSE YOU'RE RETURNING THIS IN "submit" EVENT }; $(document).ready(function() // DOM is ready... { /* attach a submit handler to the form */ $('#form_edit_sensitivity').submit(function (event) { /* stop form from submitting normally */ event.preventDefault(); confirm('we got this far'); /* get some values from elements on the page: */ var $form = $(this), data = $form.serialize(), url = $form.attr('action'); /* Send the data using post */ var posting = $.post(url, data, function(response) { /* Put the results in a div */ var content = $(response).find('#summary'); $('#result').empty().append(content); }); }); }); 

No sé cómo puede usar trimTextFields y checkForm (probablemente a nivel mundial), pero declare dentro de $ (document) .ready () si puede. Siempre trata de evitar las variables globales.

Necesitas envolver tu js dentro de un controlador listo

 $(function(){ // write your js here }); 

Demostración ---> http://jsfiddle.net/QjaTq/2/