我不能使用jquery选择输入的值

时间:2015-02-13 02:30:29

标签: javascript jquery

$('.submit__form').on('click', function(e) {
    e.preventDefault();
    var id = '.' + $(this).data('id');
    var person__name = $('#person__name').val();
    var person__email = $('#person__email').val();
    var booking__participants = $('#booking__participants').val();

    alert(person__email || 'none');

    // if (person__email === '' || person__name === '' || booking__participants === '') {
    //  alert('Preencha os campos obrigatórios.');
    // } else {
    //  $(id).submit();
    // }
});

我不知道为什么,但我不能选择person__name和person__email的价值,最奇怪的部分是我可以在浏览器的控制台中选择值...有人知道可能导致什么此?

这不是html的问题,2个输入字段有id person__name和person__email。

代码在外部文件中,我在html底部调用它。

HTML:

<form>

<input id="person__name" name="person.name" type="text" />
<input id="person__email" name="person.email" type="email" />


<a class="submit__form">Submit</a> 
</form>

我无法使用提交输入。

更新:

页面底部的脚本:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.mask/0.9.0/jquery.mask.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/headroom/0.6.0/headroom.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.5/waypoints.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.1.0/velocity.ui.min.js"></script>
<script src="/client/scripts/main.js"></script>

在主脚本中:

(function() {
 //code

})();

2 个答案:

答案 0 :(得分:0)

如果要提醒名称,请确保使用jQuery中的名称

alert(person__name || 'none');
// Not:
alert(person__email || 'none');

http://jsfiddle.net/376fLujs/3/

另外,请确保正确包含您的脚本。在脚本之前包含jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="local.js" type="text/javascript"></script>
  1. add:console.log(&#34; working&#34;);作为脚本的第一行
  2. 打开Chrome控制台/ Firebug并刷新页面。
  3. 如果你没有看到&#34;工作&#34;在控制台中,您的javascript未正确包含在内。
  4. 编辑:再次根据您的评论。如果您有多个表单,重新使用相同的ID,它将无法正常工作。始终保持ID唯一。由于您的链接位于表单内部,因此您可以执行此操作:

    var person__email = $(this).parent().find("input[name='person.email']").val();
    // DRX points out that escaping may be necessary:
    var person__name = $(this).parent().find("input[name='person\\.name']").val();
    

    http://jsfiddle.net/376fLujs/4/

答案 1 :(得分:0)

我会说尝试将此用于您的事件处理:

$(document).on('click', '.submit__form', function(e) {
    //code here
});

它可能无法正常工作的原因是因为脚本加载时可能尚未创建该元素。这应该解决这个问题。