2

The Goal

  • I am trying to use AJAX to post data (from a form on "Page A") to another page ("Page B")
  • I want some content from "Page B" to be loaded into "Page A" within a specified div (#result).

What I've Tried

The Symptoms

  • Page A is submitting directly to Page B, as if the form were submitting normally and there were no jQuery to intercede.

Theories

  • the .submit() method is not attaching
  • or it is attaching but the preventDefault directive within is not intercepting the traditional form submission

HTML

<form action="/echo/html/" id="form_edit_sensitivity" method="post" onsubmit="trimTextFields(this); return checkForm(this);" class="form-horizontal">
    <div class="control-group">
        <label for="p_sensitivity_type_id" class="control-label">Group</label>
        <div class="controls">
            <select name="p_sensitivity_type_id" size="1" title="Sensitivity Type" id="p_sensitivity_type_id">
                <option value=""></option>
                <option value="1">Politician</option>
                <option value="2" selected="selected">Celebrity</option>
            </select>
        </div>
    </div>
    <div class="control-group">
        <label for="p_expiration_dte" class="control-label">Expiration Date</label>
        <div class="controls">
            <input type="date" name="p_expiration_dte" id="p_expiration_dte" value="" data-datepicker-value="" min="1789-07-29" />
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
            <label for="p_super_sensitive" class="checkbox">
                <input type="checkbox" id="p_super_sensitive" value="Y" name="p_super_sensitive">Feel like checking this box?</label>
        </div>
    </div>
    <div class="form-actions">
        <input type="hidden" name="some_value" value="1">
        <input type="hidden" name="data" value="<p>Text echoed back to request</p>">
        <input type="submit" value="Submit" class="btn btn-primary">
        <input type="reset" value="Reset" class="btn">
    </div>
</form>
<div id="result">We want to load the results within this div</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);
    });
});

To paraphrase the immortal words of the "Deranged Sorority Girl", I am about ready to C-Punt my computer over this one.

Again, jsFiddle at http://jsfiddle.net/jhfrench/QjaTq/

Community
  • 1
  • 1
Jeromy French
  • 11,812
  • 19
  • 76
  • 129
  • 1
    You're running the javascript in the head, but aren't waiting for the DOM to be ready, therefore the form doesn't exist when you try to bind to the submit event. – Kevin B Jun 21 '13 at 19:23
  • Look at my answer, "checkForm" function. – Alejandro Iván Jun 21 '13 at 19:42
  • The jQuery tutorial explains how to set up your code properly: http://learn.jquery.com/about-jquery/how-jquery-works/. – Felix Kling Jun 21 '13 at 19:43
  • His problem is this: onsubmit="trimTextFields(this); return checkForm(this);" but checkForm doesn't return true. And also the $(document).ready(function() { /* ... */ }); is missing. – Alejandro Iván Jun 21 '13 at 19:45

2 Answers2

4
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);
        });
    });
});

I don't know how you pan to use trimTextFields and checkForm (probably globally), but declare them inside $(document).ready() if you can. Always try to avoid global variables.

Alejandro Iván
  • 3,969
  • 1
  • 21
  • 30
2

You need to wrap your js inside ready handler -

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

Demo ---> http://jsfiddle.net/QjaTq/2/

Adil Shaikh
  • 44,509
  • 17
  • 89
  • 111