jQueryがクリックしたリンクのIDを取得し、フォームデータ

Question

私はHTMLページの2つのリンクを持っているとそれを投稿してください。ユーザーがこれらのリンクの1つをクリックすると、リンクのIDを取得してフォームデータで送信したいと思います。

私のhtmlページはこのようなものです：私は、いずれかのリンクをクリックするいくつかのフォームのデータを入力し、ボタンselectedFormを提出]をクリックすると

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script type="text/javascript"> 

var selectedForm = 0; 

window.onload = function() { 

    $(".respondButton").on('click', function(e) { 
     var selectedButton = $(this).attr('id'); 
     selectedForm = selectedButton.replace('response', ''); 
     console.log(selectedForm); 
    }); 

    document.getElementById("submitButton1").onclick = function() { 
     doWork() 
    }; 

} 

function doWork() { 

    var response = $('#reply1').val(); 
    console.log(response); 
    $.post({url: "receiver", data: JSON.stringify({selectedForm: selectedForm, response : response}), 
      contentType: "application/json", success: function(){}}); 
    event.preventDefault(); 
} 

</script> 

This will send data using AJAX to Python:<br /><br /> 

<a id="response1" href="" class="respondButton"> 
    <span>response1</span> 
</a> 

<a id="response2" href="" class="respondButton"> 
    <span>response2</span> 
</a> 

<form action="/receiver" method="post" id="form1" name="form1"> 
    <textarea type="text" rows ="3" name="reply1" id="reply1"></textarea> 
    <button type="submit" name="submitButton1" id="submitButton1">Gönder</button> 

</form> 

は、私がのIDを取得できますか常に0

ですクリックしたリンクをクリックしてフォームデータと共に送信します。

更新：$（ドキュメント）.ready（関数（）{}）を使用した後

。 window.onloadではなく、期待どおりに動作します。

Answer 1

あなたのコードはそのまま私のために働いていたが、私は物事をクリーンアップするためにいくつかの変更を提案し、それがより良い実行するだろう：それは罰金働いて

$(function() { 
 

 
    var selectedForm = 0; 
 
    
 
    function doWork() { 
 
    var response = $('#reply1').val(); 
 
    console.log(response); 
 
    $.post({url: "receiver", data: JSON.stringify({selectedForm: selectedForm, response : response}), 
 
    contentType: "application/json", success: function(){}}); 
 
    } 
 

 
    $('.respondButton').click(function(e) { 
 
    e.preventDefault(); 
 
    var selectedButton = $(this).attr('id'); 
 
    selectedForm = selectedButton.replace('response', ''); 
 
    console.log(selectedForm); 
 
    }); 
 

 
    $('#submitButton1').click(function(e) { 
 
    e.preventDefault(); 
 
    doWork(); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 

 
<a id="response1" href="" class="respondButton"> 
 
    <span>response1</span> 
 
</a> 
 

 
<a id="response2" href="" class="respondButton"> 
 
    <span>response2</span> 
 
</a> 
 

 
<form action="/receiver" method="post" id="form1" name="form1"> 
 
    <textarea type="text" rows ="3" name="reply1" id="reply1"></textarea> 
 
    <button type="submit" name="submitButton1" id="submitButton1">Gönder</button> 
 
</form>