Submit Form without Refresh

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
Isset1988
Δημοσιεύσεις: 44
Εγγραφή: 25 Νοέμ 2011 12:52
Τοποθεσία: California

Submit Form without Refresh

Δημοσίευση από Isset1988 » 12 Δεκ 2011 13:23

Καλησπέρα παιδιά.

Έχω μια φόρμα επικοινωνίας με δύο πεδία (email & message).
Και τα 2 τα εχω textarea.

Θέλω να στέλνω email χωρίς να κάνει refresh η σελίδα.
Προτού όμως γίνει αυτό, θέλω να ελέγχω αν τα πεδία είναι άδεια.

Καμία ιδέα?
Εικόνα

Άβαταρ μέλους
charavge
Δημοσιεύσεις: 378
Εγγραφή: 14 Σεπ 2006 15:47

Submit Form without Refresh

Δημοσίευση από charavge » 13 Δεκ 2011 17:45

Χρησιμοποίησε Javascript & Ajax.
Δες επίσης εδώ: www.freestuff.gr/forums/viewtopic.php?t=46498, απλώς θα πρέπει να κάνεις κάποιες αλλαγές.

Άβαταρ μέλους
nirvana
Δημοσιεύσεις: 241
Εγγραφή: 01 Σεπ 2005 18:28
Τοποθεσία: Αγ. Παρασκευή

Submit Form without Refresh

Δημοσίευση από nirvana » 14 Δεκ 2011 10:05

Μπορείς να χρησιμοποιήσεις και jquery/ajax.

κατι του στυλ:

Κώδικας: Επιλογή όλων

<script>
  $&#40;function&#40;&#41;&#123;
      $&#40;#'myform'&#41;,submit&#40;function&#40;&#41;&#123;
          var var1 = $&#40;'#tadeid'&#41;.val&#40;&#41;;
          var var2 = $&#40;'#dinaid'&#41;.val&#40;&#41;;
          if&#40;&#40;var1&#41; && &#40;var2&#41;&#41;&#123;
              $.post&#40;"dosomethingcool.php", &#123; var1 &#58; var1, var2&#58;var2&#125;, function&#40;&#41;&#123;
                  // Kane kai kapoia epipleon pragrmata
              &#125;&#41;;
          &#125;
      &#125;&#41;;
  &#125;&#41;;
</script>

<form id="myform">
  <input type="text" name="field1" id="tadeid">
  <input type="text" name="field2" id="dinaid">
  <input type="submit" name="send" value="Send" id="tritoid">
</form>
(Μπορεί να έχει κάποια μικρά συντακτικα λάθη ο κώδικας γιατι έχω παραλάξει ένα κομμάτι παρόμοιο που είχα και δεν τον δοκίμασα).
Στο dosomethingcool.php βαζεις τις ενέργεις που θέλεις να γίνουν μετά το submit (π.χ. το insert στην db) :)

redion
Δημοσιεύσεις: 34
Εγγραφή: 08 Ιουν 2011 00:09
Επικοινωνία:

Submit Form without Refresh

Δημοσίευση από redion » 26 Δεκ 2011 14:51

Isset1988 έγραψε:Καλησπέρα παιδιά.

Προτού όμως γίνει αυτό, θέλω να ελέγχω αν τα πεδία είναι άδεια.

Καμία ιδέα?
Αν θέλεις ο χρήστης να μην αφήσει κάποιο άδειο πεδίο τότε μπορείς να βάλεις required="required". Kαι αν θες να δέχεται μόνο e-mail τότε βάζεις type="email".

Δηλαδή:

Κώδικας: Επιλογή όλων

<input type="email" required="required" maxlength="255" />
Πρέπει μόνο ο browser να υποστηρίζει html5 .

Άβαταρ μέλους
charavge
Δημοσιεύσεις: 378
Εγγραφή: 14 Σεπ 2006 15:47

Submit Form without Refresh

Δημοσίευση από charavge » 11 Ιαν 2012 15:27

Μπορείς να κάνεις έλεγχο και με απλή JS.
Π.χ. έστω η φόρμα ονόματι "myForm":

Κώδικας: Επιλογή όλων

<script type="text/javascript">
function submitform&#40;&#41;&#123;
	if &#40;document.getElementById&#40;'name'&#41; == null&#41; &#123;
		alert&#40;"Παρακαλώ συμπληρώστε το πεδίο Όνομα. Είναι υποχρεωτικό!"&#41;;
	&#125;else if &#40;document.getElementById&#40;'email'&#41; == null&#41; &#123;
		alert&#40;"Παρακαλώ συμπληρώστε το πεδίο E-mail. Είναι υποχρεωτικό!"&#41;;
	&#125;else&#123;
		myForm.submit&#40;&#41;;
	&#125;
&#125;
</script>
και το κουμπί:

Κώδικας: Επιλογή όλων

<input type="submit" name="send" value="Send" onclcik="myForm&#40;&#41;;"> 

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες