在提交表单之后但在处理之前使用 jquery 提出问题

Question

Please see my answer to this question below. It is based upon Kevin's input, another question on stack overflow plus some trial and error.

I am trying to do something I think is fairly simple, yet I keep failing. I have a form on my page, the user has the option to check a box that will post their input to their facebook wall using the javascript SDK. I am having trouble getting the form to post normally after the user have confirmed or canceled posting to their facebook wall. Specifically, it either doesn't wait for an answer if I simply have "return true" at the end of the function or if I add return false to the end, but insert return true into my callback function for the facebook api call, it waits for me to answer and submits to the facebook wall as expected but then does nothing.

Here is my code so far (this is the second example, posts to facebook fine but then does not submit form normally):

    <script type="text/javascript">
$(function() {


    $('#search').submit(function() {
        var type = $('#type').val();
        if((type == 'o' || type == 'r') && $('#fb-publish').attr('checked') == true) {
            var start = $('#start :selected').text();
            var dest = $('#dest :selected').text();
            var date = $('#datepicker').val();
            var time = $('#time').val();
            var seats = $('#spots').val();
            var notes = $('#notes').val();
            console.log('type: ',type);
            if(type == "r") {
                var begin = "I need a ride";
                if(seats > 1) {
                    var end = " for "+seats+" people.";
                }
                else {
                    var end = '.';
                }
            }
            else {
                var begin = "I'm offering a ride";
                if(seats > 1) {
                    var end = " for "+seats+" people.";
                }
                else {
                    var end = ' for 1 person.';
                }
            }
            publishWallPost('{{ page.slug }}', notes, begin + " from " +start+" to " + dest + " on "+date+" at " + time + end);
            return false;
        }
        else {
            alert('you are browsing!');
            return true;
        }
    });
});
</script>
<script>
<!--
function publishWallPost(slug, message, description) {
    var attachment = {'name':'Backcountryride.com','description':description,'media':[{'type':'image','src':'http://dev.backcountryride.com/images/vanlogo.jpg','href':'http://backcountryride.com/' + slug + '/'}]};
    FB.ui({
        method: 'stream.publish',
        message: message,
        attachment: attachment,
        user_message_prompt: 'post this ride to your wall?'
    },
   function(response) {
     if (response && response.post_id) {
       alert('Ride was published to your Facebook wall.');
       return true;
     } else {
       alert('Ride was not published to your Facebook wall.');
       return true;
     }
   });
}
//-->
</script>

And here is my form, if that is of any help:

<form action="quick_process.php" method="post" name="search" id="search" >
    <label for="type" id="quick_label1" >Choose Action</label>
    <select name="type" size="1" id="type">
        <option value="">Please Select</option>
        <option value="o" <?php if(isset($type) && $type == 'o') echo ' selected="selected" '; ?> id="option1">Offer a Ride</option>
        <option value="r" <?php if(isset($type) && $type == 'r') echo ' selected="selected" '; ?> id="option2">Request a Ride</option>

        <option value="b" <?php if(isset($type) && $type == 'b') echo ' selected="selected" '; ?> id="option3">Browse All</option>
    </select><br />
    <div>
        <label for="date" >Date</label>
        <input type="text" name="date" id="datepicker" value="<?php if(isset($date)) echo $date; ?>" /><br />
        <label for="time">Time</label>
        <input type="text" id="time" name="time" value="<?php if(isset($time)) echo $time; ?>" /><br/>
        <label for="start_id">From</label>
        <select name="start_id" size="1" id="start">
            <?php 
            echo selectNode($start_id); 
            ?>
        </select><br />
        <label for="dest_id">To</label>
        <select name="dest_id" size="1" id="dest">
            <?php 
            echo selectNode($dest_id); 
            ?>
        </select><br />
        <label for="spots" id="quick_label2">Seats or People</label>
        <select id="spots" name="spots">
            <option value="" >0</option> 
        <?php
            for($i=1;$i<=9;$i++) {
                echo '<option value="'.$i.'"';
                if(isset($spots) && $i == $spots) echo ' selected="selected" ';
                echo '">'.$i.'</option>';
            }
        ?>
        </select><br />
        <div id="offer-notes">
        <label>Notes / Comments</label>
        <textarea name="offer_notes" id="notes" ><?php if(isset($offer_notes)) echo $offer_notes; ?></textarea>
        </div>
        <label>Send To</label>
        <select name="distribution" size="1" >
            <option value="" >Please Select</option>
            <option value="1">Everyone</option>
            <option value="2">Friends Only</option>
            <option value="3">Friends of Friends</option>
        </select>
        <label>Post to your Facebook Wall</label>
        <input type="checkbox" name="fB_publish" value="Y" id="fb-publish"/>
        <input type="hidden" value="add" name="action" />
        <input type="hidden" value="<?php echo $_SESSION['user_id']; ?>" name="user_id" />
        <input type="hidden" value="process" name="process_quick" />
        <input type="submit" value="Submit" name="submit" class="form-submit" />
    </div>
</form>

Thanks in advance for any help!

Answer 1

I think I know what your problem is. When you run the submit function on a form, it wants to submit right away, however, if you return false on it, the form won't submit. What you want is to write a different function that will handle your fb post....then at the end of that logic, you'd want to do a $('#search').submit();

So for example....

$('#submitButton').click(function(e){
    e.preventDefault();

    [All your logic here in your original function]

    publishWallPost('{{ page.slug }}', notes, begin + " from " +start+" to " + dest + " on "+date+" at " + time + end);
    $('#search').submit();
});

You will want to rewrite your form submit button as so...since you don't want it to first the submit function of the form, you want it to run your new function first.

<input type="button" id="submitButton" value="Submit" name="submitme" class="form-submit" />

So what you're doing here is....you want to run your logic on the form, then you want to do your facebook posting, or not....then you'd run the actual submit of the form to your php post once you've called your FB post.

I hope that makes sense.

Answer 2

In case anyone else is trying to do this in the future, here is what the final code looked like. Thank you kevin.mansel for pointing me in the right direction. I needed to add the submit() to the callback function and the submit button for the form needed to be OUTSIDE the form tags or else it breaks the javascript. Here is the javascript:

$(function() {
$('#submitButton').click(function(e) {
    e.preventDefault();
    var type = $('#type').val();
    if((type == 'o' || type == 'r') && $('#fb-publish').attr('checked') == true) {
        [logic from original post]

        publishWallPost('{{ page.slug }}', notes, description);
    }
    else $('#search').submit();
});

});
</script>
<script>
<!--
function publishWallPost(slug, message, description) {
    var attachment = {'name':'Backcountryride.com','description':description,'media':[{'type':'image','src':'http://dev.backcountryride.com/images/vanlogo.jpg','href':'http://backcountryride.com/' + slug + '/'}]};
    FB.ui({
        method: 'stream.publish',
        message: message,
        attachment: attachment,
        user_message_prompt: 'post this ride to your wall?'
    },
   function(response) {
     if (response && response.post_id) {
       alert('Ride was published to your Facebook wall.');
       $('#search').submit();
     } else {
       alert('Ride was not published to your Facebook wall.');
       $('#search').submit();
     }
   });
}
//-->
</script>

Here is the HTML form:

    <form action="quick_process.php" method="post" name="search" id="search" >
    [form inputs]
</form>
<input type="submit" value="Submit" name="submit" class="form-submit" id="submitButton" />

Note that the submit button is outside the form tags (or it could be a link or image or whatever with a click event bound to it.)