Ajax从输入值更新得分

Question

我正在尝试创建一个带有三个“李克特量表”输入的表单。对于所有三个输入字段，可以在三个“李克特量表”输入上分配总共10个点。当此分数等于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) {
  	$(this).on('click', function() {    	
    	var clicked = $(this).closest('tr').get(0).id;
      
      score += eval(clicked)      
      score -= eval(clicked + " = " + $(this).val());
      
  		$("#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>