入力値からのAjax updatetスコア

Question

3つの「リッカート・スケール」入力を持つフォームを作成しようとしています。 3つすべての入力フィールドには、合計10ポイントがあり、3つの「リカートスケール」入力で除算できます。このスコアが0の場合、送信ボタンを有効にしてフォームを送信する必要があります。残っているポイントの数は、ajaxを使用してページの再配置を行わずに更新する必要があります。これにより、残っているポイントの数がわかります。

これを行う方法を実際には分かっていませんが、これを説明するために疑似コードを追加しました。ここで

$(document).ready(function(e) { 
 

 
    // Initial score/points 
 
    var score = 10; 
 
    document.getElementById("score").innerHTML = score; 
 

 
    $('input:radio').click(function() { 
 
    e.preventDefault(); 
 
    // update score, based on clicked alternative value 
 
    new_score = score - alternative_clicked; 
 
    if new_score < 0: 
 
     var error = "You do not have enoght points left, choose a smaler number"; 
 

 
    document.getElementById("error").innerHTML = error; 
 

 
    else if new_score === 0: 
 
     // enable submit button 
 

 
     else : 
 
     // update score with new_score value 
 
    }); 
 

 
    $('input:submit').click(function() { 
 
    e.preventDefault(); 
 

 
    // send to google spreadsheet 
 

 
    }); 
 

 
});

table.striped-columns tbody td:nth-of-type(even), 
 
table.striped-columns th:nth-of-type(even) { 
 
    background: blue; 
 
} 
 

 
table.striped-columns tbody td:nth-of-type(odd), 
 
table.striped-columns th:nth-of-type(odd) { 
 
    background: #fafafa; 
 
} 
 

 
table.border { 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
} 
 

 
table.border td, 
 
table.border th { 
 
    border: 1px solid grey; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- This should be updated --> 
 
<p><b>TOTAL POINTS LEFT:</b> <span id="score"></span></p> 
 

 
<form method="post" action="/echo/html/" ajax="true"> 
 

 
    <table class="striped-columns border"> 
 
    <thead> 
 
     <tr> 
 
     <th>TEST</th> 
 
     <th>1</th> 
 
     <th>2</th> 
 
     <th>3</th> 
 
     <th>4</th> 
 
     <th>5</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>Alternativ 1</td> 
 
     <td><input type="radio" value="1" name="alternativ1" /></td> 
 
     <td><input type="radio" value="2" name="alternativ1" /></td> 
 
     <td><input type="radio" value="3" name="alternativ1" /></td> 
 
     <td><input type="radio" value="4" name="alternativ1" /></td> 
 
     <td><input type="radio" value="5" name="alternativ1" /></td> 
 
     </tr> 
 
     <tr> 
 
     <td>Alternativ 2</td> 
 
     <td><input type="radio" value="1" name="alternativ2" /></td> 
 
     <td><input type="radio" value="2" name="alternativ2" /></td> 
 
     <td><input type="radio" value="3" name="alternativ2" /></td> 
 
     <td><input type="radio" value="4" name="alternativ2" /></td> 
 
     <td><input type="radio" value="5" name="alternativ2" /></td> 
 
     </tr> 
 
     <tr> 
 
     <td>Alternativ 3</td> 
 
     <td><input type="radio" value="1" name="alternativ3" /></td> 
 
     <td><input type="radio" value="2" name="alternativ3" /></td> 
 
     <td><input type="radio" value="3" name="alternativ3" /></td> 
 
     <td><input type="radio" value="4" name="alternativ3" /></td> 
 
     <td><input type="radio" value="5" name="alternativ3" /></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    <br> 
 
    <input type="submit" value="Submit" /> 
 

 
</form>

Answer 1

それを行うための一つの方法である：

（。スニペットで悪いインデントのため申し訳ありませんが、それは少しbuggy feature in SOようです）

私はeval()を使用するので、多くのif/else文を書く必要はありません。

ただし、 - eval() isn’t evil, just misunderstoodです。

$(document).ready(function(e) { 
 

 
    // Initial score/points 
 
    var score = 10; 
 
    var a1 = 0, a2 = 0, a3 = 0; 
 
    
 
    var inputs = $('input'); 
 
    
 
    inputs.each(function(i) { 
 
    \t $(this).on('click', function() {  \t 
 
    \t var clicked = $(this).closest('tr').get(0).id; 
 
     
 
     score += eval(clicked)  
 
     score -= eval(clicked + " = " + $(this).val()); 
 
     
 
    \t \t $("#score").html(score); 
 
     
 
     if (score == 0 && (a1 != 0 && a2 != 0 && a3 != 0)) { 
 
     $("#submit").prop("disabled", false); 
 
     } else { 
 
     $("#submit").prop("disabled", true); 
 
     } 
 
    }) 
 
    }) 
 
});

table.striped-columns tbody td:nth-of-type(even), 
 
table.striped-columns th:nth-of-type(even) { 
 
    background: blue; 
 
} 
 

 
table.striped-columns tbody td:nth-of-type(odd), 
 
table.striped-columns th:nth-of-type(odd) { 
 
    background: #fafafa; 
 
} 
 

 
table.border { 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
} 
 

 
table.border td, 
 
table.border th { 
 
    border: 1px solid grey; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<form method="post" action="/echo/html/" ajax="true"> 
 

 
    <table class="striped-columns border"> 
 
    <thead> 
 
     <tr> 
 
     <th>TEST</th> 
 
     <th>1</th> 
 
     <th>2</th> 
 
     <th>3</th> 
 
     <th>4</th> 
 
     <th>5</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr id="a1"> 
 
     <td>Alternativ 1</td> 
 
     <td><input type="radio" value="1" name="alternativ1" /></td> 
 
     <td><input type="radio" value="2" name="alternativ1" /></td> 
 
     <td><input type="radio" value="3" name="alternativ1" /></td> 
 
     <td><input type="radio" value="4" name="alternativ1" /></td> 
 
     <td><input type="radio" value="5" name="alternativ1" /></td> 
 
     </tr> 
 
     <tr id="a2"> 
 
     <td>Alternativ 2</td> 
 
     <td><input type="radio" value="1" name="alternativ2" /></td> 
 
     <td><input type="radio" value="2" name="alternativ2" /></td> 
 
     <td><input type="radio" value="3" name="alternativ2" /></td> 
 
     <td><input type="radio" value="4" name="alternativ2" /></td> 
 
     <td><input type="radio" value="5" name="alternativ2" /></td> 
 
     </tr> 
 
     <tr id="a3"> 
 
     <td>Alternativ 3</td> 
 
     <td><input type="radio" value="1" name="alternativ3" /></td> 
 
     <td><input type="radio" value="2" name="alternativ3" /></td> 
 
     <td><input type="radio" value="3" name="alternativ3" /></td> 
 
     <td><input type="radio" value="4" name="alternativ3" /></td> 
 
     <td><input type="radio" value="5" name="alternativ3" /></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    <br> 
 
    <input id="submit" type="submit" value="Submit" disabled/> 
 
    <div id="score"> 10 
 
    </div> 
 

 
</form>