Jquery arrays to php

Jquery arrays to php 16.05.2011. u 15:53 · pre 188 meseci #1

Nisam znao da l' da ovde otvorim temu, ili u javascript/ajax sekciji, u svakom slucaju, znacete i vi, ne sumnjam.

Imam formu, u kojoj se dinamicki kreiraju polja (i to na neki brljav nacin, rekao bih). Potrebno je da se uradi validacija. Jedino resenje je, rekao bih, ajax ili prosta client side validacija, sto nece biti dovoljno...

E, sad, treba proslediti php-u dva niza, vrednosti tekst polja (name, email).
Kako to uraditi?
http://byby.xtreemhost.com/form_val/temp.php

Code:
<script type="text/javascript">
$(document).ready(function() {

var name_array = new Array();
var email_array = new Array();
$('#submitNewRows').click(function() {


$(".name_field").each(function() { name_array.push($(this).val()) });
$(".email_field").each(function() { email_array.push($(this).val()) });

$.post('ajax.php', {'name[]': name_array // da li ovde moze da se smesti i email_array????}, function(data){

});

});
});

</script>

nizovi se uspesno kreiraju, proverio, osim sto jedno hidden polje pravi problem (iskreno, ne razumem bas ni svrhu tog hidden/disabled?) polja, ali ne znam kako da php-om te nizove iscitam i proverim vrednosti... a drugi zaheb ce biti validacija za svako polje (error poruke za svaki text field)...

Hvala!

Re: Jquery arrays to php 16.05.2011. u 16:10 · pre 188 meseci #2

A, u stvari, resih ovo... 3 sata spavanja nije dovoljno za normalno funkcionisanje, ipak.

Ako zatreba pomoc oko drugog dela (implementacija validacije

), eto mene opet...

DDD

Re: Jquery arrays to php 16.05.2011. u 18:27 · pre 188 meseci #3

Ok, sad konkretan problem...

Kako da napravim validaciju za svako polje? Trenutno jedan div prikazuje rezultate za celokupnu formu. Koliko vidim, trebalo bi da napravim neke divove, pored svakog polja (jedan hidden red se klonira) koji ce ucitavati delove php stranice, dakle, da svako polje ima sopstvenu poruku o gresci...

Ako imate neku ideju, link, unapred hvala! :)

Re: Jquery arrays to php 16.05.2011. u 20:41 · pre 188 meseci #4

Zdravo,

Validaciju na client strani može raditi prilikom dodavanja novog polja, klikom na "add another", i pri tom ne dozvoliš dodavanje novog polja dok se ne ispravi prethodno, a takođe validaciju možeš dodati i prilikom submita forme, odnosno klika na dugme "finish".

Na server strani, pošto radiš putem XHR-a, prođeš kroz sve rezultate, i odradiš validaciju, vratiš ukoliko neki podatak nije validan, grešku i id/name polja koje nije validno, rezultate možeš vraćatu u obliku npr XML ili JSON ili ćeš rezultate razdvojiti nekim delimiterom, pa na klijent strani parsiraš vraćene podatke i ukoliko ima neka greška uzimaš id/name polja i menjaš npr njegove css osobine (border, background-color) ili kako što si napisao kreiraš neki div elemenat i prikazuješ ga pored polja gde je načinjena greška.
Nadam se da sam lepo objasnio. :)

Pozdrav.

Potpis

^{Banned - Not available}

Re: Jquery arrays to php 16.05.2011. u 22:55 · pre 188 meseci #5

Fala, Branko...

Ma vidi, znam ja to, otprilike, teoreCki, ali ne znam kako prakticno da izvedem...

Moracu izgleda malo da prodzaram ™ po tom skriptu za dodavanje polja, a ne svidja mi se vec na prvi pogled (mislim da je moglo mnogo jednostavnije to da se odradi).
I, da id polja ima ovu vrednost ''ime[]'', isto kao i name atribut. To nije validan id, ako se ne varam?

Ce vidim...

Re: Jquery arrays to php 16.05.2011. u 23:33 · pre 188 meseci #6

Aj, nešto na brzinu samo primer.

Code (javascript):

  function json2array(jsonString) {

    //return eval('(' + jsonString + ')');

    return (window.JSON && window.JSON.parse) ? window.JSON.parse(jsonString) : (new Function("return " + jsonString))();

  }

  var data = '{"errors":[{"field":"email[0]","title":"Email not valid"},{"field":"name[2]","title":"Name not valid"},{"field":"email[3]","title":"Email not valid"}]}';

  //var data = '{}'; //empty

  var f = document.getElementById('smallEmail');

  var result = json2array(data);

  var field = '';

  if(typeof result['errors'] != 'undefined' && result['errors'].length > 0 ) {

    for(var i = 0, len = result['errors'].length; i < len; i++) {

      field += result['errors'][i]['field'] + ' --**-- ';

      f.elements[result['errors'][i]['field']].style.backgroundColor = 'red';

    }

    alert('ERRORS ' + field);

  } else {

    alert('OK');

  }

Code (html):

<form method="post" id="smallEmail" name="smallEmail" action="">           

<input type="text" name="name[0]" id="name[0]" value="" class="name_field"/><input type="text" name="email[0]" id="email[0]" value="" class="email_field" />

<input type="text" name="name[1]" id="name[1]" value="" class="name_field"/><input type="text" name="email[1]" id="email[1]" value="" class="email_field" />

<input type="text" name="name[2]" id="name[2]" value="" class="name_field"/><input type="text" name="email[2]" id="email[2]" value="" class="email_field" />

<input type="text" name="name[3]" id="name[3]" value="" class="name_field"/><input type="text" name="email[3]" id="email[3]" value="" class="email_field" />

<input type="text" name="name[4]" id="name[4]" value="" class="name_field"/><input type="text" name="email[4]" id="email[4]" value="" class="email_field" />

</form>

U promenljivu data sam stavio json string, koji dobijaš putem ajax-a. Za detalje kako pretvoriti niz u JSON oblik pogledaj http://php.net/json

Potpis

^{Banned - Not available}

Re: Jquery arrays to php 17.05.2011. u 11:03 · pre 188 meseci #7

Hvala mnogo, ali, nazalost nisam siguran kako ovo da koristim...
Jednostavno, ne znam kako da promenim id elementa... skript dinamicki kreira redove i rezultat je sledeci:

Citat:

<tr style="display: table-row;" class="hidden newRow rowOdd">
<td><div style="display: block;"><button class="negative removeRow" title="Remove">Remove</button></div></td>
<td><div style="display: block;"><input name="name[]" id="name[]" class="name_field" type="text"></div></td>
<td><div style="display: block;"><input name="email[]" id="email[]" class="email_field" type="text"></div></td>
</tr>
itd, itd...

Tako da ne mogu da pristupim svakom elementu posebno, trebalo bi da klonirani elementi dobiju svoj sopstveni id, ovako ostaju nedostupni... a to ne znam kako da uradim... :(
Hvala ti u svakom slucaju na vremenu.

Re: Jquery arrays to php 17.05.2011. u 12:04 · pre 188 meseci #8

Zdravo,
nema na čemu.
Hajde ovako uzmimo za primer samo email polja. Ti php prosleđuješ php-u ime polja i njegovu vrednost. I prilikom submita forme u php dobijaš npr ovakav niz:

Code (php):

$arr = Array(

             'email' => Array(

                               0 => '[email protected]',

                               1 => 'gfhfgh',

                               2 => '[email protected]',

                               3 => 'fghfgh',

                               4 => 'fghfgh'

                              )

            );

Ja sam stavio neke bezveze vrednosti.

I prođeš kroz sve vrednosti i ispitaš njihovu validnosti, npr:

Code (php):

$errors = Array();

foreach($arr['email'] as $key => $value) {

  if(!filter_var($value, FILTER_VALIDATE_EMAIL)) {

    $errors['errors']['email'][] = $key; 

  }

}

Dakle u novi niz $errors['email'] sam smestio vrednosti id/key email polja koja nisu validna.
I onda na kraju samo odradiš:

Code (php):

echo json_encode($errors);

 

I sada JS-u smo vratili polja koja nisu validna {"errors":{"email": [1, 3, 4]}} i potrebno je proći kroz sve elemente sa imenom (name) email[] i videti da li se neki nalazi u podacima dobijenim putem ajax-a.

Code (javascript):

   if(typeof Array.indexOf == 'undefined') {

    Array.prototype.indexOf = function(valueToCheck) {

      for (var i = 0, len = this.length; i < len; i++ ) {

        if (this[i] === valueToCheck ) {

          return i;

        }

      }

      return -1;

    }

  }

  function json2array(jsonString) {

    //return eval('(' + jsonString + ')');

    return (window.JSON && window.JSON.parse) ? window.JSON.parse(jsonString) : (new Function("return " + jsonString))();

  }

  var data = '{"errors":{"email": [1, 3, 4]}}';

  //var data = '{}'; //empty

  var result = json2array(data);

  if(typeof result['errors'] != 'undefined') {

    var f = document.getElementById('smallEmail');

    var els = f.elements['email[]'];

    for(var i = 0, len = els.length; i < len; i++) {

      if(result['errors']['email'].indexOf(i) >= 0) {

        els[i].style.backgroundColor = 'red';

      }

    }

  } else {

    alert('OK');

  }

Code (html):

<form method="post" id="smallEmail" name="smallEmail" action="">           

<input type="text" name="name[]" id="name[]" value="" class="name_field"/><input type="text" name="email[]" id="email[]" value="" class="email_field" />

<input type="text" name="name[]" id="name[]" value="" class="name_field"/><input type="text" name="email[]" id="email[]" value="" class="email_field" />

<input type="text" name="name[]" id="name[]" value="" class="name_field"/><input type="text" name="email[]" id="email[]" value="" class="email_field" />

<input type="text" name="name[]" id="name[]" value="" class="name_field"/><input type="text" name="email[]" id="email[]" value="" class="email_field" />

<input type="text" name="name[]" id="name[]" value="" class="name_field"/><input type="text" name="email[]" id="email[]" value="" class="email_field" />

</form>

Ja koristim "čist" javascript nadam se da ćeš se snaći. :)

Pozdrav.

Potpis

^{Banned - Not available}

Forum kao aplikacija na telefonu

Srodne teme