0

アンケートを作成しています。誰かがラジオボタン (具体的には「評価 4」または「評価 5」) をクリックした場合に ajax を介してフォームを送信する必要があります。他のものをクリックした場合は、div #getMore を取り込み、送信を介して送信します。ボタン (ajax/jquery 経由)。

私が抱えている2つの問題があります：

  1. ajax は送信ボタンで機能しますが、「評価 4」または「評価 5」をクリックすると機能しません。
  2. replaceWith(); は、どちらのタイプの提出物にも取り組んでいません。

これが私のjquery/ajaxです：

$(document).ready(function() {
    $('.rating').click(function() {
    $('.rating').removeClass('selected');
    ratingClick($(this)); // see function below...
});
});

//if rating 4 or rating 5 are clicked, submit (not working), else pull in questions 1 & 2//
function ratingClick(that) {
    console.log($(that).attr('for'));
        if ($(that).attr('for') == 'rating4' || $(that).attr('for') == 'rating5') {
            var $form = $('#questions');
            $form.submit(function(){
            $.post($(this).attr('connect.php'), $(this).serialize(), function(response){
            },'json');
            return false;
            $('#form').replaceWith( "<p>Thanks for your feedback!</p>" );
    });
    }
    else {
        $('#getMore').fadeIn();
        $(that).toggleClass('selected');
    }
}

// When 'submit' button is clicked, submit the form, and replace with "thank you" message (not working) //
$(document).ready(function(){
    var $form = $('#questions');
    $form.submit(function(){
    $.post($(this).attr('connect.php'), $(this).serialize(), function(response){
    },'json');
    return false;
    $('#form').replaceWith( "<p>Thanks for your feedback!</p>" );
});
});

これが私が使用しているフォームです（参照用）：

<div id = "form">
<form id="questions" action="connect.php" method="post">
<h2>How helpful is this article?</h2>
<div class="ratings">
    <input type="radio" name="Q1" id="rating1" value="1"><label class="rating" for="rating1">Not at all helpful</label>
    <input type="radio" name="Q1" id="rating2" value="2"><label class="rating" for="rating2">Not very helpful</label>
    <input type="radio" name="Q1" id="rating3" value="3"><label class="rating" for="rating3">Somewhat helpful</label>
    <input type="radio" name="Q1" id="rating4" value="4"><label class="rating" for="rating4">Very helpful</label>
    <input type="radio" name="Q1" id="rating5" value="5"><label class="rating" for="rating5">Extremely helpful</label>
</div>
<div id="getMore">
    <h2>Please tell us why you didn't find this article helpful:</h2>
        <input type='checkbox' name="Q2_1" value="1">Not related to my issue<br/>
        <input type='checkbox' name="Q2_2" value="1">Too complicated explanations<br/>
        <input type='checkbox' name="Q2_3" value="1">Too much information<br/>
        <input type='checkbox' name="Q2_4" value="1">Incorrect information<br/>
        <input type='checkbox' name="Q2_5" value="1">Unclear information<br/>
        <input type='checkbox' name="Q2_6" value="1">Incomplete information<br/>
        <h2>Do you have any other feedback about this article?</h2>
        <p><input type="text" name="Q3" /><p>
    <div id = "submit"><input type='submit' value="Submit" /></div>
</div>
</form>

私はかなり行き詰まっています。助けていただければ幸いです。

編集: replaceWith(); return false; の上に置くだけです。（先程コメントくださった方ありがとうございます）

4

0 に答える 0