javascript - 使用jquery从表单中的输入框获取数据

Question

这是我的表格:

<h1>Word game!</h1>
<form id="joke-form">
    <label>
        Unscramble these letters to form a word:<Br>
        <span class="scrambled">REYJUQ</span>
        <br>
        <input type="text" id = "userinput" size="10">
    </label>
    <button type="submit">Check</button>
</form>

这是我正在其上运行的 jquery 函数。我的问题是我不知道如何获取用户按下提交时在文本框中输入的值。我对 jquery 比较陌生，但没有运气研究这个主题，包括阅读这个网站上的类似问题。

<script>

$('#joke-form').on('submit', function(event) {
event.preventDefault();
var words = $('this input: first').val(); 
console.log(words);        
});

if (words === "ANSWER") {
    $('#result').text("You have the right answer");
}
else {
    $('#result').text("Guess again!");
}

</script>

Answer 1

您的代码位于错误的位置，并且您使用的选择器对于输入而言不正确。

请参阅此代码笔以了解其工作原理:

http://codepen.io/KempfCreative/pen/JGRzwm

$('#joke-form').on('submit', function(event) {
event.preventDefault();
var words = $('#joke-form #userinput').val(); 
console.log(words);
  if (words === "ANSWER") {
    $('#result').text("You have the right answer");
}
else {
    $('#result').text("Guess again!");
}
});