Jquery-表单第一次没有获得我的输入值

Question

>我有一个有 2 个输入的表单，非常简单。

<form class="cform">
    <input type="text" name="cname" class="cname" id="cname" autofocus placeholder="Firstname Lastname">
    <div class="floatl regards"><input type="submit" value="Submit" class="submit" id="submit"></div>
</form>

我的 JQuery 是：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    $("#submit").click(function()
    {
        var CName = $("#cname").val(); 
        console.log(CName);
    });
</script>

我的问题是当我在文本框中添加一个单词并单击提交按钮时，除非我再次输入相同的单词并提交它，否则它不会在控制台中显示任何内容！它在第二次点击时有效。我注意到它不起作用，它无法平铺，它会在 URL 中添加该单词，我应该第二次写完全相同的单词，如果我希望它工作，请单击提交！如何修复此错误？我的代码的哪一部分是错误的！？

Answer 1

单击按钮将使用GET方法将表单提交到当前页面，为什么您在单击后在链接上看到该单词的原因，您需要防止的只是将按钮的类型更改为button而不是submit，这将阻止页面刷新：

<input type="text" name="cname" class="cname" id="cname" autofocus placeholder="Firstname Lastname">

或者你可以在你的js代码中添加e.preventDefault()或return false;：

$("#submit").click(function(e){
    e.preventDefault(); //That will prevent the click from submitting the form
     var CName = $("#cname").val(); 
     console.log(CName);
     return false; //Also prevent the click from submitting the form
});

希望这有帮助。

$("#submit").click(function(){
    var CName = $("#cname").val();
    console.log(CName);
    return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="cform">
  <input type="text" name="cname" class="cname" id="cname" autofocus placeholder="Firstname Lastname">
  <div class="floatl regards"><input type="button" value="Submit" class="submit" id="submit">
  </div>
</form>

Answer 2

当您单击提交按钮时，页面将重新加载，并且您的 jQuery 定义将无法识别。为了防止这种情况，请使用html按钮而不是输入提交按钮。

或者，您可以在函数调用中使用e.preventDefault();来阻止提交表单。为了使用它，您必须使用函数 {} 将事件作为参数传递