[JS] input field checken of er iets instaat

[Anoniem: 500735]

Goedemiddag,

Ik heb een simpel form met een veldje om een naam in te vullen en een handtekening veld waar je een handtekening kan plaatsen. Nu wil ik graag een check in javascript maken of de 2 input veldjes wel gevuld zijn en dan pas de submit button enablen alleen dat krijg ik nog niet helemaal werkend.
Hieronder de form met de input velden:

code:

<input type="text" name="name" id="name" class="input" value="<?php echo $Name; ?>">
<canvas class="signature" width="600" height="200"></canvas>
<input type="hidden" name="output" id="output" class="output">
<input type="submit" id="postsignature" name="postsignature" value="Save" disabled="disabled">

En de name veld wordt automatisch ingevuld en de output veld wordt gevuld wanneer een handtekening krabbel zet in het canvas deel. Alleen nu het probleem, de velden worden automatisch gevuld en dan werkt in javascript de onderstaande code niet die gaat pas werken als ik een handtekening maak en in het name veldje een letter toevoeg dan wordt de button pas actief.

code:

$(document).ready(function() {
   $('.div_signature input').keydown(function() {
        var empty = false;
        $('.div_signature input').each(function() {
            var value = $.trim($(this).val());
            if (value.length == 0) {
                empty = true;
            }
        });

        if (empty) {
            $('.signature_button input').attr('disabled', 'disabled');
        } else {
            $('.signature_button input').removeAttr('disabled');
        }
    });
});

Ik heb ook de onderstaande geprobeerd maar ook hierbij hetzelfde effect.

code:

$('.div_signature input').change(function() {

Hoe kan je nu checken of er iets in een input veld staat wat automatisch ingevuld wordt dmv een script en niet door een gebruiker actie ?

[GlowMouse]

Waarom check je het niet met onsubmit? Dan kun je een melding geven waarom de user niet kan submitten, in plaats van dat de user moet raden waarom de submitbutton het niet doet.

[ Voor 64% gewijzigd door GlowMouse op 12-04-2013 15:14 ]

[Anoniem: 296939]

GlowMouse schreef op vrijdag 12 april 2013 @ 15:13:
Waarom check je het niet met onsubmit? Dan kun je een melding geven waarom de user niet kan submitten, in plaats van dat de user moet raden waarom de submitbutton het niet doet.

Waarschijnlijk omdat hij de knop pas wil enablen van zodra de check is uitgevoerd. En een submit gaat natuurlijk pas wanneer de knop enabled is

[Anoniem: 500735]

omdat het form pas uitgeklapt wordt op het moment dat je op een icoontje klikt en als je dan de form post zie je wel de foutmelding maar is het divje ingeklapt en moet ik die ook weer laten uitklappen dat was me ook nog niet gelukt

[spleethoven]

http://jsfiddle.net/KzSqd/9/

Hier krijg je wel een idee

[Xyzer]

spleethoven schreef op vrijdag 12 april 2013 @ 15:59:
http://jsfiddle.net/KzSqd/9/

Hier krijg je wel een idee

Hij wil alleen dat de submit button automatisch actief wordt en dat gebeurt hier niet.

JavaScript:

$(document).ready(function(){

    $("#name").keyup(checkInput); // Gaat uiteraard met name om de .keyup() trigger.
    $("#sig").keyup(checkInput);
    
});

function checkInput()
{
    if($("#name").val()!="" && $("#sig").val()!="")
        $("#subbut").removeAttr("disabled");
    else
        $("#subbut").attr("disabled","disabled");
}

Dit werkt dus ook alleen als je code een keyup ontvangt.. (werkt dus waarschijnlijk ook niet)

[ Voor 10% gewijzigd door Xyzer op 12-04-2013 16:20 ]

[krvabo]

Dan lijkt me onBlur toch echt een betere keuze.
Al geeft die natuurlijk wel pas een signaal als het inputveld focus verliest.

[ Voor 45% gewijzigd door krvabo op 12-04-2013 16:16 ]

[Xyzer]

krvabo schreef op vrijdag 12 april 2013 @ 16:15:
Dan lijkt me onBlur toch echt een betere keuze.
Al geeft die natuurlijk wel pas een signaal als het inputveld focus verliest.

Ook daar heb je het probleem dat het pas actief wordt nadat je de inputvelden hebt gedeselecteerd.

//spuit11

[hiekikowan]

Je geeft aan dat je velden automatisch gevuld worden. Gebeurt dit vanuit javascript? Dan is het gewenste prima mogelijk op ongeveer deze manier:

De functie die je velden vult laat je een trigger uitvoeren op het 'change'-event. Vervolgens bind je met jQuery.On het change-event waarna je de lengte van het veld evalueert...

JavaScript:

function vulVelden(){
      $('input[name=veld1]').val('Automatisch gevuld').trigger('change');
}

$(document).ready(function(){
      // Bind inputs aan events
      $('input[name=veld1]').on('change', function(){
            // Evalueer lengte van velden
      });

      vulVelden();
});

[Creepy]

Nog even een tikje door naar Webdesign, Markup & Clientside Scripting (i.p.v. Programming)