フォームが提出されたかdivがクリックされたかによって、AJAXコールで別のデータを送信します。

Question

私はsearchと呼ばれる機能を持っていて、クリックされたフォームまたはフォームを介して呼び出されます。

divをクリックすると、idがAJAX呼び出しによってデータとして送信されます。しかし、私がしたいのは、フォームが送信され、入力されたデータをAJAX呼び出しで送信する場合です。

私は2つの関数とAJAX呼び出しを持つことを考えましたが、これは不要だと思っていますし、単純な解決策が必要です。

<div id="12" class="question"></div> 
<div id="24" class="question"></div> 
<div id="11" class="question"></div> 

<form id="question" method="post"> 
<input type="text" name="enter" id="enter"> 
<input type="submit"> 
</form> 

<script> 
$(".question").click(search); 
$("form#question").submit(search); 

function search() { 
    $.ajax({ 
     type: "POST", 
     url: "sending.php", 
     data: "example=" + this.id, 
     success: function(data) { 
     console.log(data); 
     } 
    }); 
} 
</script> 

Answer 1

あなたはis機能をクリックするかどうか確認することができます。

var isDiv = $(this).is("div"); 
// or 
// var isForm = $(this).is("form"); 

そして送信するかを決定：

data: isDiv ? ("example=" + this.id) : $(this).serialize(), 

簡体：

data: $(this).is("div") ? ("example=" + this.id) : $(this).serialize(), 

Answer 2

は、この最初の事私はを追加しましたボタンを送信しても、HTMLページがブラウザに残っていることを確認するためです。

var enter = $("form#question input#enter").val();を使用すると、フィールドの値を取得することができます。を入力します。 divをクリックすると値はnullになります。 Ajaxを呼び出して、私はフィールドIDと名でJavaScriptのオブジェクトを使用して、データ・パラメータとしてそれを使用するには

。

javascriptコードは別のファイルに置くようにしてください。インラインJavaScriptを避ければ、より簡単に防ぐことができますXSS。 1と2を読んでください。

See Plunker

$(document).ready(function() { 

$(".question").click(search); 
$("form#question").submit(search); 

function search(event) { 

    // prevents form submission 
    event.preventDefault(); 

    var id = this.id; 
    var enter = $("form#question input#enter").val(); 

    $.ajax({ 
     type: "POST", 
     url: "sending.php", 
     data: { 
     'id': id, 
     'enter': enter 
     }, 
     success: function(data) { 
     console.log(data); 
     } 
    }); 
} 

}); 

Answer 3

これは私が困っこれを理解するのビットを持ってい

<div id="12" class="question">12</div> 
<div id="24" class="question">24</div> 
<div id="11" class="question">11</div> 

<form id="question" method="post"> 
    <input type="text" name="enter" id="enter"> 
    <input type="submit"> 
</form> 

<script> 
    $(document).on('click','.question',function(){ 
     console.log($("input[name='enter']").val($(this).attr('id'))); 
     $("#question").submit(); 
    }); 
</script>