(X)HTML, JavaScript, DHTML, XML, CSS Client scripting tehnologije, Dynamic HTML, Cascading Stylesheets, XML i standardi |
|
Alati teme | Način prikaza |
14. 07. 2014. | #1 |
profesionalac
Professional
Datum učlanjenja: 25.10.2012
Poruke: 278
Hvala: 16
32 "Hvala" u 9 poruka
|
Validacija forme + ajax
Treba da napravim obicnu formu za dodavanje podataka u bazu + validacija istih. Za validaciju koristim parsley biblioteku.
Imam HTML: Kôd:
<!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header bg-success"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h2 class="modal-title" id="myModalLabel">Nova aktivnost</h2> </div> <div class="modal-body"> <form id="myForm" class="form-horizontal" data-parsley-validate> <fieldset> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="status">Status aktivnosti</label> <div class="col-md-4"> <select id="status" name="status" class="form-control"> <option value="U planu">U planu</option> <option value="U toku">U toku</option> <option value="Zavrseno">Zavrseno</option> </select> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="naziv">Naziv aktivnosti</label> <div class="col-md-4"> <input id="naziv" name="naziv" type="text" placeholder="naziv" class="form-control input-md" required/> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="parcele">Parcela</label> <div class="col-md-4"> <input type="hidden" id="parcele" name="parcele" class="form-control select2-container select2-container-multi" required/> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="vrsta_rada">Vrsta aktivnosti</label> <div class="col-md-4"> <input type="hidden" id="vrsta_rada" name="vrsta_rada" class="form-control select2-container select2-container-multi" required/> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="opis">Opis zadatka</label> <div class="col-md-4"> <textarea class="form-control" id="opis" Placeholder="Opis aktivnosti/zadatka" name="opis"></textarea> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="datum">Datum: Od</label> <div class="col-md-3"> <input id="pocetak" name="pocetak" data-date-format="yyyy-mm-dd" class="form-control" placeholder="Datum" type="text" required> </div> <div class="col-md-3"> <input id="zavrsetak" name="zavrsetak" data-date-format="yyyy-mm-dd" class="form-control" placeholder="Datum" type="text" required> </div> </div> </div> <div class="modal-footer bg-dark"> <button type="button" class="btn btn-default" data-dismiss="modal">Zatvori</button> <button type="button" id="dodaj" class="btn btn-primary">Dodaj zadatak</button> </div> </fieldset> </form> </div> </div> </div> Kôd:
$("#dodaj").click(function() { $('#myForm').parsley( { success: function (){ var zemljiste = ""; zemljiste = $("#parcele").select2("data").naziv; var id_parcele = 0; id_parcele = $("#parcele").select2("data").id; var vrsta_rada = ""; vrsta_rada = $("#vrsta_rada").select2("data").text; $.ajax({ url: "insertAkt.php", type: "POST", async: true, data: { naziv:$("#naziv").val(),parcele:zemljiste,vrsta_rada:vrsta_rada,opis:$("#opis").val(),pocetak:$("#pocetak").val(),zavrsetak:$("#zavrsetak").val(),status:$("#status").val(),id_parcele:id_parcele,}, //your form data to post goes here as a json object dataType: "json", success: function(data) { $('#myModal').modal('hide'); drawVisualization(); console.log(data); }, error: function (data) { console.log(data) } }); } } ); }); |
14. 07. 2014. | #2 |
profesionalac
Professional
Datum učlanjenja: 25.10.2012
Poruke: 278
Hvala: 16
32 "Hvala" u 9 poruka
|
Probao sam da integrisem i ovaj kod sa zvanicnog sajta:
Kôd:
$("#dodaj").click(function() { $(function() { $('#myFrom').parsley().subscribe('parsley:form:validate', function (formInstance) { formInstance.submitEvent.preventDefault(); //stops normal form submit if (formInstance.isValid() == true) { // check if form valid or not //code for ajax event here var zemljiste = ""; zemljiste = $("#parcele").select2("data").naziv; var id_parcele = 0; id_parcele = $("#parcele").select2("data").id; var vrsta_rada = ""; vrsta_rada = $("#vrsta_rada").select2("data").text; $.ajax({ url: "insertAkt.php", type: "POST", async: true, data: { naziv:$("#naziv").val(),parcele:zemljiste,vrsta_rada:vrsta_rada,opis:$("#opis").val(),pocetak:$("#pocetak").val(),zavrsetak:$("#zavrsetak").val(),status:$("#status").val(),id_parcele:id_parcele,}, //your form data to post goes here as a json object dataType: "json", success: function(data) { $('#myModal').modal('hide'); drawVisualization(); console.log(data); }, error: function (data) { console.log(data) } }); }}); }); }); |
15. 07. 2014. | #3 |
expert
Grand Master
|
ne bih ti preporucio da koristis srpski za naziv promenjiva/komentare i slicno
recimo: resis jednog dana da sve outsorsujes nekom iz druge zemlje - kako ce se on snaci |
16. 07. 2014. | #4 |
profesionalac
Professional
Datum učlanjenja: 25.10.2012
Poruke: 278
Hvala: 16
32 "Hvala" u 9 poruka
|
Sad gotovo Imacu na umu prilikom izrade sledeceg projekta
Inace kod sam resio ovako s tim da mi probem prave select2 polja koja ne mogu da validiram sa parsleyJS, pa sam uradio ovo: Kôd:
$(function() { $('#myForm').submit(function(e) { e.preventDefault(); if ( $(this).parsley('validate') ) { if ($("#parcele").select2("data")== null || $("#vrsta_rada").select2("data")== null) { $('#parerror').show(); console.log('nema dalje'); } else { var zemljiste = $("#parcele").select2("data").naziv; var id_parcele = $("#parcele").select2("data").id; var vrsta_rada = $("#vrsta_rada").select2("data").text; $.ajax({ url: "insertAkt.php", type: "POST", async: true, data: { naziv:$("#naziv").val(),parcele:zemljiste,vrsta_rada:vrsta_rada,opis:$("#opis").val(),pocetak:$("#pocetak").val(),zavrsetak:$("#zavrsetak").val(),status:$("#status").val(),id_parcele:id_parcele,}, //your form data to post goes here as a json object dataType: "html", success: function(data) { $('#myModal').modal('hide'); drawVisualization(); console.log('USPEH'); console.log(data); }, error: function (data) { console.log(data); console.log('GRESKA NEKA'); } }); } } }); }); Ima li neko ideju kako ovo da resim? Kako da se sve prikaze od jednom? |
|
|