Form gegevens verzenden via ajax

Door Brecht S op 15-11-2014 15:09 gewijzigd op 15-11-2014 15:22

2.901 views

Ik probeer hier data uit een form via ajax door te sturen naar een andere pagina. Alleen wil dit niet lukken.

Ik krijg de value van de input firstname niet door in mijn ajax. Dit is maar een voorbeeld. Later wil ik dit uitbreiden. De bedoeling is om zo een validatie te kunnen doen van bepaalde inputs of die wel of niet ingevuld zijn.

Of ik nu iets invul in de firstname input of niet, ik krijg altijd dezelfde alert te zien, nl: 'Please fill in ...' wat dus volledig fout is.

Hieronder mijn javascript file:


<script type="text/javascript">
$(document).ready(function(){
$("#submit1234").click(function(){


var firstname = $('input[name="template-contactform-firstname"]').val()


// Returns successful data submission message when the entered information is stored in database.
var dataString = 'firstname1='+ firstname;
if(firstname=='')
{
alert("Please Fill All Fields "+firstname);
}
else
{
// AJAX Code To Submit Form.
alert("Ok "+firstname);
$.ajax({
type: "POST",
url: "cta-aut.php",
data: dataString,
cache: false,
success: function(result){
alert(result);
}
});
}
return false;
});
});						
</script>

En als laatste mijn html form (deze zit in een bootstrap modal, maar maakt volgens mij geen verschil):


                        <div class="modal fade" id="cta-aut-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-body">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title" id="myModalLabel">Vraag uw demo aan</h4>
                                        </div>
                                        <div class="modal-body">
                                        
                        
                        <div class="style-msg successmsg" id="contact-form-result2"></div>
                        <div class="style-msg errormsg" id="contact-form-result3"></div>

                        <form class="nobottommargin" id="template-contactform" name="template-contactform">

                            <div class="form-process"></div>

                            <div class="col_one_third">
                                <label for="template-contactform-firstname">Voornaam <small>*</small></label>
                                <input type="text" id="template-contactform-firstname" name="template-contactform-firstname" value="" class="sm-form-control " />
                            </div>

                            <div class="col_one_third">
                                <label for="template-contactform-lastname">Achternaam <small>*</small></label>
                                <input type="text" id="template-contactform-lastname" name="template-contactform-lastname" value="" class=" sm-form-control " />
                            </div>
                            
                            <div class="col_one_third col_last">
                                <label for="template-contactform-email">Email <small>*</small></label>
                                <input type="text" id="template-contactform-email" name="template-contactform-email" value="" class=" sm-form-control" />
                            </div>

                            <div class="clear"></div>

                            <div class="col_one_third">
                                <label for="template-contactform-website">Website URL <small>*</small></label>
                                <input type="text" id="template-contactform-website" name="template-contactform-website" value="" class="sm-form-control " />
                            </div>
                            
                            <div class="col_one_third">
                                <label for="template-contactform-phone">Telefoon <small>*</small></label>
                                <input type="text" id="template-contactform-phone" name="template-contactform-phone" value="" class="sm-form-control " />
                            </div>

                            <div class="col_one_third col_last">
                                <label for="template-contactform-role">Uw functie <small>*</small></label>
                                <input type="text" id="template-contactform-role" name="template-contactform-role" value="" class=" sm-form-control" />
                            </div>

                            <div class="clear"></div>

                            <div class="col_full">
                                <label for="template-contactform-message">Wat is uw belangrijkste uitdaging op het vlak van marketing en verkoop?</label>
                                <textarea class="sm-form-control" id="template-contactform-message" name="template-contactform-message" rows="6" cols="30"></textarea>
                            </div>

                            <div class="col_full hidden">
                                <input type="text" id="template-contactform-botcheck" name="template-contactform-botcheck" value="" class="sm-form-control" />
                            </div>

                        </form>
                        
                        

                        
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">Sluiten</button>
                                            <button class="btn btn-success" id="submit1234">Verzenden</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

Frank Nietbelangrijk

15-11-2014 16:04

Overigens zou ik die alert er bij de validatie uithalen. doe het liever zo: http://codepen.io/anon/pen/XJWYpo

Toevoeging op 15/11/2014 16:06:20:

Ik werk zelf met Chrome. In de console kun je vaak ook foutmeldingen achterhalen ( F12 en dan op Console klikken)

Brecht S

15-11-2014 18:07 gewijzigd op 15-11-2014 18:31

Ik heb de alert er uit gehaald. Ik had daar al een voorziening ingebouwd in mijn form bovenaan: http://codepen.io/anon/pen/emYKgP

Maar ik heb het probleem gevonden ;-)

Ik had nog een form op dezelfde pagina staan met dezelfde id waarden en hij heeft deze waarde gebruikt om mijn value te vullen => vandaar geen resultaat want dat form werd niet ingevuld. Ik heb de id's veranderd.

Nu nog juist een vraagje ivm de messages die hij moet laten zien. Ik heb de alerts vervangen door iets anders maar nu krijg ik die boven elkaar te zien. Dus eerst vul je niks in en krijg je een foutmelding (voornaam niet ingevuld) en dat blijft staan. Daarna vul je het wel in en krijg je erboven de andere melding te zien (form is verzonden). Hoe kan ik dit aanpassen dat de meldingen verdwijnen achter bepaalde tijd? Of is er een andere mogelijkheid?

Frank Nietbelangrijk

15-11-2014 23:01

Hoi Brecht in mijn tweede voorbeeld in codepen had ik iets ingebouwd:


$(document).ready(function(){
  $("#contactForm").submit(function(){
    event.preventDefault();
    $('.formErrors').hide(); // <-- DEZE, ALLE FOUTMELDINGEN VERBERGEN AANGEZIEN WE OPNIEUW GAAN CONTROLEREN
    if(validateContactform()) {
      sendFormByAjax();
    }
    return false;
  });
});

Brecht S

16-11-2014 11:41 gewijzigd op 16-11-2014 11:45

Thanks Frank voor de voorzetjes. Alles werkt prima nu. Ik heb het nog een beetje uitgebreid dat mijn modal ook automatisch na bepaalde tijd afsluit en dat de messages er langzaam op komen (fadeIn).

Nu ga ik beginnen aan de url waarnaar dat gestuurd is. Ik vermoed dat ik met serialize er wel ga aan uit geraken? Kan ik dan $_POST['']; gebruiken om de values uit de form te halen?

Frank Nietbelangrijk

16-11-2014 17:16 gewijzigd op 16-11-2014 17:17

Als je type: "POST" gebruikt dan gaat ie via de post methode verstuurd worden inderdaad.


$.ajax({
  url: "script.php",
  type: "POST",
  data: {
	firstname : $('#firstname').val(),
	lastname : $('#lastname').val()
  }
});

Reageren

Inloggen om te reageren