jQuery JS: Using two form submits and decide what to do

function removeComment(bID) {
    $('#submitChangeComment').attr('disabled', true);
    $.ajax({ 
        type: "POST",
        url: "misc/changeComment.php",
        data: {
            mode: 'del',
            bID : bID,
            comment : $('input[name=Comment]:visible').val() 
        }, 
        success: function(msg){
            $('#submitChangef').attr('disabled', false);
            $('#currentComment' + bID).hide();

            var $msg = $("#nowCurrentComment" + bID).find('.comment');
            // if it already has a comment, fade it out, add the text, then fade it back in
            if ($msg.text().length) {
                $msg.fadeOut('fast', function() {
                    $msg.text(msg).fadeIn('fast');
                });
            } else {
                // otherwise just hide it, add the text, and then fade it in
                $msg.hide().text(msg).fadeIn('fast'); 
            }
        }
    });
}

 

function FriendChangeComment(bID) {
    $('#submitChangef').attr('disabled', true);
    $.ajax({ 
        type: "POST",
        url: "misc/changeComment.php",
        data: {
            mode: 'edit',
            bID : bID,
            comment : $('input[name=Comment]:visible').val() 
        }, 
        success: function(msg) {
            $('#submitChangef').attr('disabled', false);
            $('#currentComment' + bID).hide();

            var $msg = $("#nowCurrentComment" + bID).find('.comment');
            // if it already has a comment, fade it out, add the text, then fade it back in
            if ( $msg.text().length ) {
                $msg.fadeOut('fast', function() {
                    $msg.text( msg ).fadeIn('fast');
                });
            } else {
                // otherwise just hide it, add the text, and then fade it in
                $msg.hide().text( msg ).fadeIn('fast'); 
            }
        }
    });
}

Form:

<form action="javascript:FriendChangeComment(<? echo $showInfo["bID"]; ?>)" method="post">
change comment for <br><?php echo fullname($showInfo["bID"]); ?>:<br>
<input type="text" name="Comment" value="<?=$showC["comment"];?>" size="20">  
<input name="submit" type="submit" id="submitChangef" value="Save">
<input name="removeC" type="button" id="submitremoveComment" value="remove" onClick="">
</form>

I have two submit buttons in one form. If you click on the first "submitChangef" I want it to run FriendChangeComment(), if you click on the "removeComment" i want it to run removeComment. Both are the same functions, only difference between them is the mode: (del, edit) in the ajax data. I dont know how I can shorten the 开发者_StackOverflow社区code and make it simple, as they both are complete duplicates of eachother(almost).

How can this be done?

---

Add the bID as an hidden input field to your form and move your event binding to jQuery instead of doing it in the form itself, then pass the bID and mode as a parameter to the function:

$('#submitChangef').click(function() {
    bID = $(this).closest('form').find('#bID').val();
    changeComment(bID, 'edit');
    return false;
});

$('#submitremoveComment').click(function() {
    bID = $(this).closest('form').find('#bID').val();
    changeComment(bID, 'del');
    return false;
});

function changeComment(bID, mode) {
    $('#submitChangeComment').attr('disabled', true);
    $.ajax({ 
        type: "POST",
        url: "misc/changeComment.php",
        data: {
            mode: mode,
            bID : bID,
            comment : $('input[name=Comment]:visible').val() 
        }, 
        success: function(msg){
            $('#submitChangef').attr('disabled', false);
            $('#currentComment' + bID).hide();

            var $msg = $("#nowCurrentComment" + bID).find('.comment');
            // if it already has a comment, fade it out, add the text, then fade it back in
            if ($msg.text().length) {
                $msg.fadeOut('fast', function() {
                    $msg.text(msg).fadeIn('fast');
                });
            } else {
                // otherwise just hide it, add the text, and then fade it in
                $msg.hide().text(msg).fadeIn('fast'); 
            }
        }
    });
}

---

i'd use one function for your needs and one hidden form param, eg: form:

<form id='myform' method="post">
change comment for <br><?php echo fullname($showInfo["bID"]); ?>:<br>
<input type="text" name="Comment" value="<?=$showC["comment"];?>" size="20">  
<input name="submit" type="submit" onclick="processBtnClick(this, 'edit');" value="Save">
<input name="removeC" type="button" onclick="processBtnClick(this, 'remove');" value="remove" onClick="">
<input type='hidden' name='action' id='action'/>
</form>

js:

function processBtnClick(bID, action){
  $('#action').value(action);
  $('#myform').submit();

/*or your .ajax code $.ajax({ type: "POST", url: "misc/changeComment.php", ... */ }

php (or something else):

 if ($_POST['action']=='remove')
      do_remove_stuff();
    else
      do_edit_stuff();