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

时间:2011-06-09 17:51:47

标签: javascript jquery facebook

请参阅下面我对此问题的回答。它基于Kevin的输入,关于堆栈溢出的另一个问题加上一些反复试验。

我正在尝试做一些我认为相当简单的事情,但我一直都在失败。我的页面上有一个表单,用户可以选中一个框,使用javascript SDK将其输入发布到他们的Facebook墙上。用户确认或取消发布到他们的Facebook墙后,我无法正常发布表单。具体来说,如果我只是在函数结尾处“返回true”或者如果我将return false添加到结尾,它或者不等待答案,但是将facebook返回true插入到我的回调函数中以进行facebook api调用,它等待我回答并按预期提交到Facebook墙,但后来什么也没做。

这是我的代码到目前为止(这是第二个例子,发布到Facebook很好但后来没有正常提交表单):

    <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>

这是我的表格,如果有任何帮助的话:

<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>

提前感谢您的帮助!

2 个答案:

答案 0 :(得分:3)

我想我知道你的问题是什么。当您在表单上运行提交功能时,它希望立即提交,但是,如果您在其上返回false,则表单将不会提交。你想要的是编写一个不同的函数来处理你的fb post ....然后在那个逻辑的结尾,你想做一个$('#search').submit();

所以举例......

$('#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();
});

您需要重写表单提交按钮,因为您不希望它首先使用表单的提交功能,您希望它首先运行您的新功能。

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

所以你在这里做的是....你想在表格上运行你的逻辑,然后你想做你的Facebook发帖,或者不....然后你运行实际提交的一旦你打电话给你的FB帖子就形成你的php帖子。

我希望这是有道理的。

答案 1 :(得分:0)

如果将来有人试图这样做,这就是最终代码的样子。谢谢你kevin.mansel指出我正确的方向。我需要将submit()添加到回调函数,并将表单的提交按钮添加到表单标签外,否则它会破坏javascript。这是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>

以下是HTML表单:

    <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" />

请注意,提交按钮位于表单标记之外(或者它可以是链接或图像,也可以是绑定了点击事件的任何内容。)