Ik ben bezig om met ajaxform formulieren te verzenden.
Dit werkt natuurlijk goed, maar aangezien ik dit op een stuk of 4 formulieren wil toepassen, vraag ik me af of onderstaande code niet wat korter kan. Het enige verschil is namelijk loginform <-> registerform en loginresult <-> registerresult zoals jullie kunnen zien.

Iemand een idee?

Code:

$(document).ready(function() { 
    
    $('#loginform').ajaxForm({ 
        
        target: '#loginresult', 
 
       
        success: function() { 
            $('#loginresult').slideDown('slow');
        } 
    }); 
    $('#registerform').ajaxForm({ 
       
        target: '#registerresult', 
 
        
        success: function() { 
            $('#registerresult').slideDown('slow');
        } 
    }); 
});

Code:

$(document).ready(function() {
  $("form").has(".ajaxform").ajaxForm({
    target: '#' + this.attr('id') + 'result';
    succes: function() {
      $('#' + this.attr('id') + 'result').slideDown('slow');
    }
  });
});

Deze functie loopt door alle formulieren: $("form") die de class ajaxform: .has('.ajaxform') hebben en past het ajaxForm erop toe. Hierbij wordt this.attr('id'), het ID van het veld dus, gebruikt om de resultaten div te kiezen.

<form class="ajaxform" id="register"> ... </form>

Zal dus de div #registerresult gebruiken.

Geen idee of het zo werkt, maar je kunt het proberen.

Bedankt voor de reactie.
Het werkt op deze manier echter niet, en dat terwijl het in theorie zou moeten werken volgens mij...

Zet eens voor

target : ....

de regel

alert('test' + this.attr('id')); en kijk eens of hij een ID mee terugstuurt en of hij überhaupt in de functie komt.

Het vreemde is dat hij dan geen alert opent...

Oh lol, dat klopt natuurlijk, dat kan natuurlijk niet binnen die ajaxForm() functie.

Probeer eens;

Code:

$(document).ready(function() {
  $("form").has(".ajaxform").ready(function() { alert('test'); });
});

Dat werkt wel; hij weergeeft immers de alert met "test". Ook wanneer er nergens een class="ajaxform" te vinden is, komt het in beeld.
Als ik alert('test'); vervang door alert('test' + this.attr('id')); weergeeft hij helemaal niets...

Hmm dat is natuurlijk ook weer waar.. hij voert die functie has() gewoon uit dus die alert is dan weer logisch. Dan zouden we misschien met een foreach moeten werken, even kijken hoe dat ook alweer gaat.

Probeer eens:

Code:

$('form:has('.ajaxform')).each(function(index) {
  alert( $(this).attr('id') + ' is het id' );
});

Er verschijnt weer geen alert...

Ik ga even wat testen voor je op mijn eigen hosting :)
Aanvullend bericht:
Waarom ook lastig doen en forms vinden die de 'ajaxform' class hebben, laten we gewoon één class nemen voor de forms die via ajaxForm() moeten lopen, voor het gemak: aForm

Maak een code in je body:

Code:

<form class="aForm" id="register">
    <input type="text" name="bla" /><input type="submit" name="submit" value="submit" />
</form>

<div id="registerresult"></div>

En plaats deze jquery code in je head:

Code:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.aForm').each(function() {
            alert($(this).attr('id') + ' form found');
            $('#'+$(this).attr('id')+'result').text('test');
        });
    });
</script>

En je zult zien dat hij zegt 'register form found' en vervolgens de waarde van registerresult op 'test' zet. Lijkt me een prima opzet, enige wat je nog moet doen (denk ik) is dan het volgende:

Code:

<script type="text/javascript">
    $(document).ready(function() {
        $('.ajaxform').ajaxForm({
            target: '#' + $(this).attr('id') + 'result',
            succes: function() {
                  $('#' +  $(this) + 'result').slideDown('slow');
            }
          });
    });
</script>

Dat zou al regelijk in de buurt moeten komen! :)

Als je dan nu een form toevoegt met id="signup" en een div met id="signupresult" zou er 2x een alert moeten komen en 2x test onder de forms.

Enorm bedankt voor alle hulp! Zo kom ik steeds verder!
Toch werkt het nog niet helemaal helaas...

Als ik onderstaande code gebruik, krijg ik gewoon alle popupjes en sliden de results gevuld met "test" naar beneden:

Code:

$(document).ready(function() {
        $('.aForm').each(function() {
            alert($(this).attr('id') + ' form found');
            $('#'+$(this).attr('id')+'result').text('test');
            $('#' +  $(this).attr('id') + 'result').slideDown('slow');
        });
    });

Als ik dan de volgende code gebruik, werken de formulieren wel allemaal, maar slide de betreffende result-div niet naar beneden:

Code:

$(document).ready(function() {
        $('.aForm').ajaxForm({
            target: '#' + $(this).attr('id') + 'result',
            succes: function() {
                  $('#' +  $(this).attr('id') + 'result').slideDown('slow');
            }
          });
    });

Enig idee hoe dat kan?

Ik ben vergeten de each erbij te plaatsen :x hopelijk is dat het laatste beetje

Code:

<script type="text/javascript">
    $(document).ready(function() {
        $('.ajaxform').each(ajaxForm({
            target: '#' + $(this).attr('id') + 'result',
            succes: function() {
                  $('#' +  $(this) + 'result').slideDown('slow');
            }
          });
    });
</script>

Ik begrijp er niets meer van...
Ook bovenstaande code werkt niet, zelfs niet wanneer ik er het volgende van heb gemaakt:

Code:

$(document).ready(function() {
        $('.ajaxform').each(ajaxForm({
            target: '#' + $(this).attr('id') + 'result',
            succes: function() {
                  $('#' +  $(this).attr('id') + 'result').slideDown('slow');
            }
          }));
    });

Dan kan het volgende nog:

Code:

<script type="text/javascript">
    $(document).ready(function() {
        $('.ajaxform').each(function(){
            $(this).ajaxForm({
                  target: '#' + $(this).attr('id') + 'result',
                  succes: function() {
                        $('#' +  $(this) + 'result').slideDown('slow');
                  }
            })
          });
    });
</script>

HET WERKT!!!
Heel erg bedankt Joshua!

Het enige wat nu niet werkt, is het effectje... Dat is raar...

EDIT:
Ik wilde het zo doen, dat er in de resultdiv style="display: none;" staat, zodat het effect deze div zichtbaar maakt door hem `open` te schuiven.
Het javascriptje werkt echter alleen waneer ik die style="display: none;" weghaal, maar dan werkt het effect dus niet...

Origineel gepost door Joshua de Gier

Dan kan het volgende nog:

Code:

<script type="text/javascript">
    $(document).ready(function() {
        $('.ajaxform').each(function(){
            $(this).ajaxForm({
                  target: '#' + $(this).attr('id') + 'result',
                  succes: function() {
                        $('#' +  $(this) + 'result').slideDown('slow');
                  }
            })
          });
    });
</script>