J'ai une inscription de. J'essaie de valider les données d'entrée du formulaire à l'aide de javascript. Mais en js, je ne peux pas obtenir les données du formulaire. alors que j'essayais de voir les données du formulaire en utilisant la fonction console.log(), cela donne undefined.

Voici mon formulaire

<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>

Voici les scripts

$(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);
    });
});

Pourquoi cela donne undefined !!

Quelqu'un aide-t-il s'il vous plaît?

-3
Arafat Rahman 15 avril 2018 à 12:18

4 réponses

Meilleure réponse

Vous sélectionnez des champs de formulaire par ID, mais aucun de vos champs n'a de tels ID et il semble que vous confondez les propriétés d'entrée name et id. Par exemple, pour le champ

<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">

Vous devez utiliser son ID avec jquery # selector et c'est signup-username pas reg_name:

var name = $('#signup-username').val();
1
Dario 15 avril 2018 à 09:24

Vous essayez d'accéder à vos éléments en utilisant leur attribut name avec un sélecteur id (#).

$(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);
});
});
1
tot11 15 avril 2018 à 09:23
$(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);
    });
});
0
user8967235user8967235 15 avril 2018 à 09:26

Il semble que vous ayez une erreur sur le sélecteur 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);
});
1
bereket gebredingle 15 avril 2018 à 09:23