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

问题描述：

我有一个有2个输入的表单，非常简单。Jquery-表单在第一次没有得到我的输入值

<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中的单词，我应该再次编写完全相同的单词，并单击提交，如果我希望它能够工作！我该如何解决这个错误？哪部分代码是错误的？

你可以尝试将整个代码包装在'$（function（）{/ * code here * /}）中;'？它可能工作。 –

add - > return false;在console.log下（CName） – dharmx

答

单击您的按钮将使用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>

我尝试将输入类型更改为按钮。当我点击那个按钮时，它就起作用，但当我在文本框中写下我的文字之后按下Enter时，它就不起作用。我在我的jQuery结尾添加了返回false，它起作用。不管怎样，谢谢你。 –

答

当你点击提交按钮的页面将重新加载，你的jQuery的定义将不被认可。为了防止使用html按钮而不是输入提交按钮。

或者你可以在你的函数调用中使用e.preventDefault();来防止提交表单。（e）{}

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

相关推荐