Question

我通常对JS还是陌生的，想知道是否有人可以帮助我开始我拥有的一个小项目构想。

我有一个HTML表单：

<form>
    <select>
        <option>Hunter</option>
        <option>Warrior</option>
    </select>

    <p></p>

    Stamina
    <br>
    <input type="text" name="stamina" placeholder="0"/>

    <p></p>

    <input type="submit" value="What stats will I receive?" />
</form>

我想知道我需要进行哪些HTML更改以及需要执行哪些JS代码，才能执行以下操作：

当用户“提交”表单时，使用jQuery和AJAX在不刷新页面的情况下打印表单的结果。
- 用户必须从选择字段中选择一个选项来提交表单...如果不这样做，则会显示一条错误消息，提示“您必须选择某些内容”。
- 如果用户在“ stamina”输入中输入数字“ 4”，我希望脚本将该数字乘以10，然后在提交表单后打印结果。
- 如果用户选择了“猎人”，那么我希望上述行为有所不同。如果选择了“ Hunter”，然后在“ stamina”输入中输入了数字“ 4”，我希望它将数字乘以5，然后在提交表单后打印结果。

我在页面顶部引用了jQuery。

我真的经历了很多教程来尝试找到我想要的东西，但是它们对我来说太复杂了-我从2008年起就停止制作网站，从那以后看来前端开发已经完全改变了！如果您在回复时可以牢记这一点，我将不胜感激...

Teeb

Answer 1

首先，您应该将'stamina'输入类型更改为number，以防止将字符串转换为数字。在您的情况下，默认情况下会选择猎人，因此它永远不会到达显示“您必须输入内容”的信息。如果您不想在默认情况下选择任何内容，则应添加另一个选项：<option value="" selected>Select an option</option>。选项也应具有值：

<option value="hunter">Hunter</option>

然后您的Jquery＆Ajax代码应如下所示：

$('form').submit(function(e) {
    e.preventDefault();
    var selectedValue = $('select').val();
    var stamina = $('input').val();
    if (!selectedValue) {
        return alert('You must select something!');
    }
    if (selectedValue === "hunter") {
      if (stamina == 4) {
        stamina = stamina * 5;
      }
    } else {
        if (stamina == 4) {
        stamina = stamina * 10;
      }
    }
    console.log('stamina: ' + stamina + ' | selected: ' + selectedValue);
    $.ajax({
      type: "POST",
      url: url,
      data: { 'stamina': stamina, 'value': selectedValue },
      dataType: dataType,
      success: function() {
        console.log('Submited!');
      },
      error: function(error) {
        console.log(error);
      }
    });
  });

使用jQuery + Ajax加载表单结果

1 个答案: