无法从 HTML 表单获取数据到 javascript

Question

我有一个注册。我正在尝试使用 javascript 验证表单输入数据。但是在js中我无法获取表单数据。当我尝试使用console.log() 函数查看表单数据时，它给出了undefined。

这是我的表格

<form class="cd-signin-modal__form" action="{{ url('/signup') }}" method="POST" id="appointment-form">
    {{ csrf_field() }}
    <p class="cd-signin-modal__fieldset">
        <label class="cd-signin-modal__label cd-signin-modal__label--username cd-signin-modal__label--image-replace" for="signup-username" id="name" >Name</label>
        <input class="cd-signin-modal__input cd-signin-modal__input--full-width cd-signin-modal__input--has-padding cd-signin-modal__input--has-border" id="signup-username" type="text" placeholder="Name" name="reg_name">
    </p>

    <p class="cd-signin-modal__fieldset">
        <label class="cd-signin-modal__label cd-signin-modal__label--email cd-signin-modal__label--image-replace" for="signup-email" id="email">E-mail</label>
        <input class="cd-signin-modal__input cd-signin-modal__input--full-width cd-signin-modal__input--has-padding cd-signin-modal__input--has-border" id="signup-email" type="email" placeholder="E-mail" name="reg_email">
    </p>

    <p class="cd-signin-modal__fieldset">
        <label class="cd-signin-modal__label cd-signin-modal__label--password cd-signin-modal__label--image-replace" for="signup-password" id="password">Password</label>
        <input class="cd-signin-modal__input cd-signin-modal__input--full-width cd-signin-modal__input--has-padding cd-signin-modal__input--has-border" id="signup-password" type="text" placeholder="Password" name="reg_password">
    </p>

    <p class="cd-signin-modal__fieldset">
        <label class="cd-signin-modal__label cd-signin-modal__label--password cd-signin-modal__label--image-replace" for="signup-password">Role</label>
        <select class="form-control searchField" id="service_id_search" name="reg_role_id">

            <option value=" ">Select One</option>

            @if($_SESSION['role_data'] != null)

                @foreach($_SESSION['role_data'] as $data)    
                    <option value="{{ $data->id }}">{{ $data->name }}</option>
                @endforeach

            @endif  

        </select>
    </p>

    <p class="cd-signin-modal__fieldset">

        <button id="signup" class="btn btn-secondary btn-lg" type="submit" value="Create account" style="padding: 16px 20px 20px 20px; color: #fff; margin-top:20px;">Create account
        </button>
    </p>
</form>

这是脚本

$(document).ready(function(){

    $('#signup').click(function(event){

        var name = $('#reg_name').val();
        var email = $('#reg_email').val();
        var password = $('#reg_password').val();
        var role_id = $('#reg_role_id').find(":selected").val();

        console.log(name);
        console.log(email);
        console.log(password);
        console.log(role_id);
    });
});

为什么它给undefined!!

有人帮忙吗？

Answer 1

您正在按 ID 选择表单字段，但您的所有字段都没有此类 ID，并且您似乎混淆了输入 name 和 id 属性。例如，对于字段

<input class="cd-signin-modal__input cd-signin-modal__input--full-width cd-signin-modal__input--has-padding cd-signin-modal__input--has-border" id="signup-username" type="text" placeholder="Name" name="reg_name">

您需要将其 ID 与 jquery # 选择器一起使用，即 signup-username 而不是 reg_name：

var name = $('#signup-username').val();

Answer 2

您正在尝试通过使用带有 id (#) 选择器的 name 属性来访问您的元素。

$(document).ready(function(){

$('#signup').click(function(event){

    var name = $('#signup_username').val();
    var email = $('#signup_email').val();
    var password = $('#signup_password').val();
    var role_id = $('#service_id_search').find(":selected").val();

    console.log(name);
    console.log(email);
    console.log(password);
    console.log(role_id);
});
});

Answer 3

您的 jquery 选择器似乎有错误。

$('#thisIstheIdAtrributeValue');

---

 $('#signup').click(function(event){

    var name = $('#signup-username').val();
    var email = $('#signup-email').val();
    var password = $('#signup-password').val();
    var role_id = $('#service_id_search').find(":selected").val();

    console.log(name);
    console.log(email);
    console.log(password);
    console.log(role_id);
});

Answer 4

$(document).ready(function(){

    $('#signup').click(function(event){

        var name = $('input[name=reg_name]').val();
        var email = $('input[name=reg_email]').val();
        var password = $('input[name=reg_password]').val();
        var role_id = $('input[name=reg_role_id]').find(":selected").val();

        console.log(name);
        console.log(email);
        console.log(password);
        console.log(role_id);
    });
});