Ik probeer een inlog te maken met javascript, maar bij de eerste stukje loop ik al vast ;(

Javascript herkent het form niet namelijk.
Met onderstaande code is het niet de bedoeling dat je door kan klikken met submit.
Maar ik krijg gewoon een ? achter de url na klikken op de submit button.

login_form heb ik ge-copy/pasted dus geen typefout.
 
    <form id="login_form" method="post" action="?">

        <input type="text" class="form-control" id="naam" placeholder="Gebruikersnaam" />

        <input type="password" class="form-control" id="password" placeholder="Wachtwoord" />

        <input type="submit" value="login" />
    </form>

<script type="text/javascript">
    $(function(){
        
        $("#login_form").submit(function(event){
            event.preventDefault();
        }
        
    });

</script>

Dit heb ik ook geprobeerd, $("#login_form").on('submit', function(event){

en <input type="button" value="login" /> werkt ook niet

Ik heb jQuery 1.11 en wordt geladen in chrome (te zien in tabblad Network)

Hopelijk kunnen jullie mij verder helpen.
Je gebruikt JQuery. Ik neem aan dat je de JQuery library wel invoegd?
Verder zou je in de functie achter event.preventDefault(); ook return false; kunnen zetten.
Daarnaast is er ook een andere methode namelijk je <input type="submit" wijzigen naar een type="button"


    <form id="login_form" method="post" action="?">

        <input type="text" class="form-control" id="naam" placeholder="Gebruikersnaam" />

        <input type="password" class="form-control" id="password" placeholder="Wachtwoord" />

        <input type="button" id="login-button" value="login" />
    </form>

<script type="text/javascript">
    $(function(){
        
        $("#login-button").click(function(event){
			alert('test');
        }
        
    });

</script>
Ja jQuery wordt geladen volgens chrome. Onder tabblad Network staat OK achter jquery.js

type="button" id="login-button" wordt wel gezien

maar ga ik een stap verder dan blijft <form id> niet gezien worden.


    <form id="login_form"  method="post" action="<?=site_url('user/login')?>">

        <input type="text" id="naam"  />

        <input type="password" id="password"  />

        <input type="submit" value="login" />
    </form>

<script type="text/javascript">
    $(function(){
        
        $("#login_form").submit(function(event){

            // event.preventDefault();
            var url = $(this).attr('action');
            var postData = $(this).serialize();
            
            $.post(url, postData, function(0) {
                
            }, 'json');
        }
        
    });
</script>  


user.php

    public function login(){
        
        print_r($_POST);
        
    }


Array blijft leeg
Ik zie echt niet wat er fout gaat.
Het is jquery met codeIgniter trouwens.

Als ik het volgende doe hoor ik toch een alert te krijgen?
[code]
<form id="login_form" method="post" action="?">

<input type="text" id="naam" />

<input type="password" id="password" />

<input type="submit" value="login" />
</form>

<script type="text/javascript">
$(function(){

$("#login_form").submit(function(event){

alert('test'):
}

});
</script>
[\code]
ja je zou gewoon een alert moeten krijgen. krijg je nog meldingen in de Console (F12) van Chrome?
Nee, console blijft leeg.
Ik ga de inlog wel met PHP maken.

Kan het zijn dat javascript bug-gevoeliger is dan PHP?
Of moet ik de fout echt bij mezelf zoeken? Ik zie de fout niet maar doe vast iets verkeerds.
Heb je anders geen testcase? Desnoods even aanmaken op JSFiddle?
Volgens mij moet er een name in het input veld.


< input type="text" id="username" name="username" >
Je zou kunnen proberen om je code pas uit te voeren als je document klaar is :

<script type="text/javascript">
    $(document).ready(function(){
        
        $("#login_form").submit(function(event){

            alert('test'):
        }
        
    });
</script>


Makkelijke manier om te testen of dit het probleem oplost is overigens dit deel even op je console uitvoeren als je pagina geladen is :

        $("#login_form").submit(function(event){

            alert('test'):
        }


Sidenote : Je login is wel het laatste wat je in javascript wil maken
Een inlog in JS kan prima, zolang de inlogprocedure maar serverside wordt gevalideerd. ;)
Aar , mischien , maar dan moet je alleen de submit doen met JS en dan je form versturen. Zodra je je gegevens over AJAX gaat posten ben je al de sjaak.

Reageren