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

Question

请在下面查看我对此问题的回答。它基于Kevin的意见，另一个关于堆栈溢出问题以及一些试验和错误的问题。

我想要做一些我认为很简单的事情，但我一直在失败。我在我的页面上有一个表单，用户可以选择一个框，使用JavaScript SDK将他们的输入发布到他们的facebook墙上。在用户确认或取消发布到他们的Facebook墙后，我无法正常发布表单。具体来说，如果我只是在函数结尾处有“返回true”，或者如果我将“false”返回到最后，但将“返回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> 

在此先感谢您的帮助！

Answer 1

我想我知道你的问题是什么。当你在表单上运行submit函数时，它想立即提交，但是，如果你在表单上返回false，表单将不会提交。你想要的是写一个不同的功能，将处理您的FB后....然后在该逻辑的最后，你会想例如做一个$('#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文章。

我希望这是有道理的。

Answer 2

如果其他人在将来尝试这样做，以下是最终代码的样子。谢谢你，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" /> 

注意，提交按钮是表单标签之外（或者它可能是一个链接或图片或任何一个点击事件绑定到它。）