Question

我正在使用精美的盒子构建一个表单，表单工作正常，但我无法从文本框中获取价值。

我的java脚本是

$(function () {
    $("#button").click(function () {
        var yourName = $("input#yourName").val();
        alert(yourName);
        if (yourName == "") {
            $('input#yourName').css({
                backgroundColor: "#F90"
            });
            $("input#yourName").focus();
            return false;
        }

        $.ajax({
            type: "POST",
            url: "bin/form1.php",
            data: $("#login_form").serialize(),
            context: document.body,
            success: function (res) {
                var success = '<?php echo sprintf(_m('Success name % s '), "" ); ?>';
                success = success.replace(/^\s*|\s*$/g, "");
                var RegularExpression = new RegExp(success);

                if (RegularExpression.test(res)) {
                    alert('Message Sent');
                    $.fancybox.close();
                } else {
                    alert('Error While processing');
                }
            },
        });
        return false;
    });
});

现在我的HTML是

<div style="display:none; height:450px">
    <form id="login_form" action="">
        <p id="login_error">
            Please, enter data
        </p>
        <input type="hidden" name="action" value="send_friend_post" />
        <label for="yourName" style="margin-right:110px;">
            <?php _e( 'Your name', 'newcorp') ; ?>
        </label>
        <input id="yourName" type="text" name="yourName" value="" class="text_new " />
        <br/>
        <input type="submit" value="Submit" id="button" class="text_new" style="background:#930; color:#FFF; width:250px; margin-left:170px" />
    </form>
</div>

我正在从

打开这个精美的盒子弹出窗口

<a id="tip5" title="" href="#login_form"><?php echo "Login" ; ?></a>

每件事情都运转正常但我无法获得yourName的价值，即使警报显示空白。

由于

Answer 1

而不是

var yourName = $("input#yourName").val();

试

var yourName = $("input[name='yourName']:text").val();

这将使您的函数读取文本框的值。

Answer 2

首先，使用您的表单，最好使用

$(document).on('submit', 'form', function () { ... })

而不是

$(document).on('click', '#myButton', function () { ... })

其次，您应该将代码封装到$(document).ready(function () { .. });

中

这是一个有效的例子;）http://jsfiddle.net/aANmv/1/

Answer 3

检查打开弹出窗口时fancybox是否未更改您输入的ID。
如果使用jQuery 1.7＆gt;而不是直接追踪click事件，请尝试live该事件。或者on使用jQuery 1.7＆lt;。

live：

$("#button").live('click', function() { ... });

on：

$("#button").on('click', function() { ... });

还尝试在加载DOM后加载javascript：

$(document).ready(function(){
    $("#button").live('click', function() { ... });
    ...
});

Answer 4

而不是那个

$(function() {

尝试

$(document).ready() {

这样您就可以确保只有在文档完全加载后才能执行代码。哦，您可以使用#yourName代替input#yourName，如果我没错，它应该更快。

jquery无法获取文本框的值

4 个答案: