SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    New to using JQuery AJAX - Not seeing expected form behaviour

    Hello

    I am using a simple AJAX (JQuery) script to post data to receiving PHP script. If no errors (server side validation only) then response is expected HTML (...thank you for contacting us... blah blah) however if there are error(s), the expected response is sent (...you have xyz errors, fix them... blah blah) so okay so far.

    But, once response is sent back with errors present and the form is submitted the second time then (regardless of errors fixed or errors still remaining) it's the original HTML that is shown on page, which I can't quite understand as only two things should be sent back from server - either the "thank you for contacting us" HTML or the "you have errors, fix them" HTML.

    Does anyone have any suggestions? I have a feeling that the second time the form is submitted, the AJAX script isn't sending anything to server... which brings me to another problem. I use a JQuery plugin to show sample data into each form field (helpful suggestive hints) which disappears once field is focused (you know the sort of plugin I'm talking about, I'm sure) which works initially (once arrive at page) but does not work upon a response from server.

    But let's fix the first issue please I've posted something below for you.

    <code>
    // from HTML template

    $(document).ready( function() {
    $( '#submit' ).click( function() {
    var name = $('input[name=name]');
    var subject = $('input[name=subject]');
    var email = $('input[name=email]');
    var message = $('textarea[name=message]');

    var data = 'name=' + name.val() + '&subject=' + subject.val() + '&email=' + email.val() + '&message=' + message.val();

    $.ajax({
    url: '/contact/post/',
    contentType: 'application/x-www-form-urlencoded',
    type: 'post',
    data: data,
    cache: false,
    success: function( html ) {
    $( '#formbox' ).html( html );
    }
    });

    return false;
    }); // close of #submit

    });

    </code>

    <code>class Page_Handler_Ajax extends Page_Handler_Validator {
    public function __construct() {
    $this -> initialise();
    }

    public function execute( QDataspace_Interface $dataspace ) {
    if( $this -> validate( $request = Registry::get( 'request' ), Registry::get( 'logger' ) ) ) {
    $this -> handler -> execute( $dataspace );
    } else {
    // one or more errors with submitted data
    $page = new Page_View( $request = QRegistry::get( 'request' ) );
    $page -> set( 'logger', Registry::get( 'logger' ) );
    $page -> render( 'contact/post/error.tpl' );
    }
    }

    protected function initialise() {
    $this -> forward( new Page_Handler_Ajax_Success() );

    $this -> addCondition( Validator::factory()
    -> addCondition( new Validator_Condition_Required( 'name', 'The field "name" is required.' ) )
    -> addCondition( new Validator_Condition_Expression( 'name', '/^[a-zA-Z ]+$/', 'The field "name" has illegal character(s).' ) )
    -> addCondition( new Validator_Condition_Size_Maximum( 'name', 32, 'The field "name" must not exceed 32 characters.' ) )
    );

    $this -> addCondition( Validator::factory()
    -> addCondition( new Validator_Condition_Required( 'subject', 'The field "subject" is required.' ) )
    -> addCondition( new Validator_Condition_Expression( 'subject', '/^[a-zA-Z0-9 \(\)\?\-\,\.]+$/', 'The field "subject" has illegal character(s).' ) )
    -> addCondition( new Validator_Condition_Size_Maximum( 'subject', 128, 'The field "subject" must not exceed 128 characters.' ) )
    );

    $this -> addCondition( Validator::factory()
    -> addCondition( new Validator_Condition_Required( 'email', 'The field "email" is required.' ) )
    -> addCondition( new Validator_Condition_Expression( 'email', QExpressions::EMAIL_ADDRESS, 'The field "email" has illegal character(s).' ) )
    -> addCondition( new Validator_Condition_Size_Maximum( 'email', 64, 'The field "email" must not exceed 64 characters.' ) )
    );

    $this -> addCondition( Validator::factory()
    -> addCondition( new Validator_Condition_Required( 'message', 'The field "message" is required.' ) )
    -> addCondition( new Validator_Condition_Size_Maximum( 'message', 4096, 'The field "message" must not exceed 4096 characters.' ) )
    );
    }
    }

    final class Page_Handler_Ajax_Success extends Page_Handler {
    public function __construct() {
    }

    public function execute( Dataspace_Interface $dataspace ) {
    $page = new Page_View( $request = Registry::get( 'request' ) );
    $page -> render( 'contact/post/body.tpl' );
    }
    }</code>

    I also note that after submitting form if I hit F5 I get the alert box to "resend" or "cancel" however I (had) thought the "return false" near the end of the Javascript cancelled this behaviour?
    http://www.webpagefavs.com/

    Newly launched social bookmark website free for all to use, for commercial use promote your website, products or services cheaply.

  2. #2
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for reply. I use JQuery simply because it's pretty much standard in this industry today, and saves me time having to script my own solutions. I forgot to post the form so I have now done so.

    <code>

    <script type="text/javascript">

    $(document).ready( function() {
    $( '#submit' ).click( function() {
    var name = $('input[name=name]');
    var subject = $('input[name=subject]');
    var email = $('input[name=email]');
    var message = $('textarea[name=message]');

    var data = 'name=' + name.val() + '&subject=' + subject.val() + '&email=' + email.val() + '&message=' + message.val();

    $.ajax({
    url: '/contact/post/',
    contentType: 'application/x-www-form-urlencoded',
    type: 'post',
    data: data,
    cache: false,
    success: function( html ) {
    $( '#formbox' ).html( html );
    }
    });

    return false;
    }); // close of #submit

    });

    </script>

    <div id="formbox">
    <form
    accept-charset="utf-8"
    action="">

    <div class="lft"><p><label for="_name">Name</label>&nbsp;</p></div>
    <div class="rgt"><p>&nbsp;<input class="clearfield" type="text" id="_name" name="name" size="16" maxlength="32" value="ie Name Here" /></p></div>

    <div class="lft"><p><label for="_email">Email</label>&nbsp;</p></div>
    <div class="rgt"><p>&nbsp;<input class="clearfield" type="text" id="_email" name="email" size="24" maxlength="64" value="ie Email Here" /></p></div>

    <div class="lft"><p><label for="_subject">Subject</label>&nbsp;</p></div>
    <div class="rgt"><p>&nbsp;<input class="clearfield" type="text" id="_subject" name="subject" size="32" maxlength="128" value="ie Subject Here" /></p></div>

    <div class="lft"><p><label for="_message">Message</label>&nbsp;</p></div>
    <div class="rgt"><p>&nbsp;<textarea class="clearfield" id="_message" name="message" rows="3" cols="32">ie Message Here</textarea></p></div>

    <div class="lft"><p>&nbsp;</p></div>
    <div class="rgt"><p>&nbsp;
    <input type="submit" id="submit" name="submit" value="Send Message" />
    <input type="hidden" name="__hash__" value="<?php echo $this -> get( '__unique' ); ?>" />
    </p></div>

    </form>
    </code>

    That is what is in the template that's used on arrival to page, what is sent back from server is below.

    <code>

    <form
    accept-charset="utf-8"
    action="">

    <div class="both">
    <p class="error">Please amend the following error(s) shown below before trying again.</p>
    <br />
    <ul>
    <?php foreach( $this -> get( 'logger' ) -> export() as $error ): ?>
    <li><p><?php echo $error; ?></p></li>
    <?php endforeach; ?>
    </div>

    <div class="lft"><p><label for="_name">Name</label>&nbsp;</p></div>
    <div class="rgt"><p>&nbsp;<input class="clearfield" type="text" id="_name" name="name" size="16" maxlength="32" value="<?php echo $this -> get( 'name' ); ?>" /></p></div>

    <div class="lft"><p><label for="_email">Email</label>&nbsp;</p></div>
    <div class="rgt"><p>&nbsp;<input class="clearfield" type="text" id="_email" name="email" size="24" maxlength="64" value="<?php echo $this -> get( 'email' ); ?>" /></p></div>

    <div class="lft"><p><label for="_subject">Subject</label>&nbsp;</p></div>
    <div class="rgt"><p>&nbsp;<input class="clearfield" type="text" id="_subject" name="subject" size="32" maxlength="128" value="<?php echo $this -> get( 'subject' ); ?>" /></p></div>

    <div class="lft"><p><label for="_message">Message</label>&nbsp;</p></div>
    <div class="rgt"><p>&nbsp;<textarea class="clearfield" id="_message" name="message" rows="3" cols="32"><?php echo $this -> get( 'message' ); ?></textarea></p></div>

    <div class="lft"><p>&nbsp;</p></div>
    <div class="rgt"><p>&nbsp;
    <input type="submit" id="submit" name="submit" value="Send Message" />
    <input type="hidden" name="__hash__" value="<?php echo $this -> get( '__unique' ); ?>" />
    </p></div>

    </form> <!-- error form -->
    </code>

    <code><div class="both">
    <p>Thank you for contacting us, please expect a prompt reply shortly.</p>
    </div><!-- no errors -->
    </code>
    http://www.webpagefavs.com/

    Newly launched social bookmark website free for all to use, for commercial use promote your website, products or services cheaply.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •