2つの異なる機能のための2つのHTMLボタン

Question

私は2つのオプション、サブミットと上書きを持つフォームを持っています。

それは次のようになります。

[ INPUT FIELD ] 
[Submit] [Overwrite] 

値が既にデータベースにあるときに上書きボタンがのみ表示されます。

HTMLコードは次のとおりです。

<input type="text" name="target" id="target"> 
<button id="submit" name="submit" type="submit" class="btn btn-primary"> Submit </button> 
<button id="overwrite" name="overwrite" type="submit" class="btn btn-primary"> Overwrite </button> 

JSコードは次のとおりです。私は送信ボタンを使用している場合

if(!problem){ 
     data = "submit=save"; 

     jQuery('#overwrite').click(function(){ 
     $(this).toggleClass('selected'); 

     if($(this).hasClass('selected')){ 
     data+="&overwrite=on"; 
     console.log("overwrite=on"); 
     } 
     }); 

     sendToBean(href, data); 

     jQuery.each(langs, function(i, lang){ 
      sendToBean(href, data); 
     }); 
    } 
} 

は、それが動作します。 [上書き]ボタンしかない場合は、機能します。 しかし、私は両方を持っている場合、上書きボタンはもう働かないでしょう。

誰にもこの問題の解決策がありますか？

Answer 1

あなたが送信ボタンをクリックすると、ページがリフレッシュされ、overwriteは、初期フォーマットに戻り、選択されますが、ボタンに入力タイプを変更しようと、消えます。

<button id="overwrite" name="overwrite" type="button" class="btn btn-primary"> Overwrite </button> 

・ホープ、このことができます。

Answer 2

retrun falseを匿名コールバック関数に入れると、このトリックが実行されます。あなたはボタンが送信ボタン

if(!problem){ 
    data = "submit=save"; 

    jQuery('#overwrite').click(function(){ 
    $(this).toggleClass('selected'); 

    if($(this).hasClass('selected')){ 
    data+="&overwrite=on"; 
    console.log("overwrite=on"); 
    } 
    return false; 
    }); 

    sendToBean(href, data); 

    jQuery.each(langs, function(i, lang){ 
     sendToBean(href, data); 
    }); 
} 

}

Answer 3

あなたは<button>

<a href="#" id="overwrite" class="btn btn-primary"> Overwrite </a> 

Answer 4

<input type="text" name="target" id="target"> 
<input type="submit" id="btnSubmit" name="btnSubmit" class="btn btn-primary" value="submit"/> 
<input type="submit" id="btnOverwrite" name="btnOverwrite" class="btn btn-primary" value="Overwrite"/> 


$(document).ready(function(){ 
    $("#btnOverwrite").unbind("click").bind("click",function(e){ 
    e.preventDefault(); 
    alert("overwrite called");  
    }); 
    $("#btnSubmit").unbind("click").bind("click",function(e){ 
    e.preventDefault(); 
    alert("submit called"); 
    }) 
}); 

レビューフィドル

https://jsfiddle.net/dipakchavda2912/rwdakvyg/

を使用することができます上書きボタンの <input type="">を削除していることを宣言しますので、