Javascript πρόβλημα. Κατάρα!

[QSpec]

Καλημέρα/σπέρα, έχω μερικά προβληματάκια με php και Javascript με τα οποία ίσως να μπορείτε να βοηθήσετε.

 

Έχω ένα div tag το οποίο περιέχει ένα form το οποίο αλλάζει μέσω Javascript.

 

><div id="main" class="Main_body"><form action="v2apasxoloumenoi.php" method="POST" name="emform"><em><strong>1.<br /> Ετος εισαγωγής</strong></em><input type="text" name="em1a" maxlenght="4"/><br /><em><strong>Ετος και μήνας αποφοίτησης</strong></em><br /> <input type="text" name="em1b" maxlenght="2"/>/<input type="text" name="em1c" maxlenght="4"/><input type="submit" value="testsubmit"></form></div>

 

^ το div

 

>var i=0;

function ChangeQuestion ()
{

i=i+1;
if (i<39) {
	var _main = document.getElementById('main');
	var _next = document.getElementById('next');
		
		
	   _main.innerHTML = q[i-1];
}
 }



q[0] = "<em><strong>2.<br /><form action=\"v2apasxoloumenoi.php\" method=\"post\" name=\"emform\">Με βάση τις δηλώσεις προτίμησης σας για τις πανελλήνιες εξετάσεις, το τμήμα που σπουδάσατε ήταν :</strong></em><br /><br />Μεταξύ των πέντε πρώτων επιλογών<input type=\"radio\" name=\"em2\" value=\"1\"/><br />Μεταξύ των 6-10  πρώτων επιλογών<input type=\"radio\" name=\"em2\" value=\"2\"/><br />Αλλη επιλογή<input type=\"radio\" name=\"em2\" value=\"3\"/><input type=\"submit\" value=\"testsubmit\"></form>

 

Το scriptάκι μαζί με μια form από έναν JS πίνακα από τον οποίο τραβάει τις form.

 

To POST γίνεται από την ίδια την σελίδα η οποία ονομάζεται v2apasxoloumenoi.php.

 

Το πρόβλημα: Όταν γίνεται το submit εκτελείται η php στο v2apasxoloumenoi.php με αποτέλεσμα να ξαναφορτώνει η σελίδα και να μηδενίζεται ο μετρητής της Javascript και να αρχίζουν οι ερωτήσεις από την αρχή.

 

Πιθανές λύσεις που δεν έχω ιδέα πως να υλοποιήσω:

 

1. Να μεταφέρω την php σε ένα ξεχωριστό αρχείο το οποίο όταν θα τρέχει θα κάνει τα post και θα τα περνάει στην βάση χωρίς να κάνει ο browser redirect σε αυτό. Για παράδειγμα το αρχείο θα έχει όνομα apasxoloumenoisubmit.php και όταν πατάμε το κουμπί ο browser θα μένει στο v2apasxoloymenoi.php ( ή .html μιας και δεν θα έχει php μέσα). Αυτό αν γίνεται θα ήταν το ιδανικότερο γιατί δεν περιλαμβάνει μεγάλη τροποποίηση του κώδικα.

 

2. Μου είπανε για την ιδιότητα visibility στα div tags. Οπότε υπάρχει η ιδέα των πολλών div (1 για κάθε form) το ένα πάνω στο άλλο τα οποία θα γίνονται είτε visible είτε hidden ανάλογα με την ερώτηση στην οποία βρίσκεται ο χρήστης. Παράλληλα τα radio στα οποία έχει απαντήσει θα έχουν type="hidden" (αναρωτιέμαι αν μπορώ σε ένα <input> να έχω 2 types, radio και hidden πχ.) και θα γίνονται όλα μετά submit στο τέλος του ερωτηματολογίου. Η χειρότερη περίπτωση λύσης μιας και αφορά μεγάλες τροποποιήσεις.

 

Αυτά τα 2 έχω σκεφτεί εγώ, αν κάποιος άλλος έχει κάποια άλλη φαϊνή ιδέα θα χαρώ πολύ να την ακούσω. Οπως ανέφερα προηγουμένος δεν έχω ιδέα πως να υλοποιήσω τίποτα από τα παραπάνω, εάν ξέρετε τον τρόπο να γίνουν παρακαλώ μοιραστείτε τον.

 

 

PS: Το triger που προκαλεί την αλλαγή των ερωτήσεων είναι ένα άλλο div στο οποίο δεν δουλέυει το onclick="emform.submit". (πιθανότατα δεν μπορώ να έχω 2 onclicks.)

><div id="next" class="next" onclick="ChangeQuestion()" onclick="emform.submit"></div></td>

 

Cheers!

[alex2005]

Όπως το βλέπω έχεις δύο τρόπους να το κάνεις αυτό:

 

1)Να γίνεται submit της φόρμας με ajax οπότε δεν θα χρειάζεται να γίνεται refresh η σελίδα.

Δες αυτό.

 

2)Να στέλνεις μαζί με την φόρμα πληροφορίες για την κατάσταση της φόρμας έτσι ώστε η php που την λαμβάνει να προβάλει πλέον αυτά που θέλεις.(Ελπίζω να με έπιασες!)

 

Παρατηρήσεις:

 

1)Αυτό που σου είπαν με τα visibility ίσως είναι το ιδανικότερο για την περίπτωσή σου....αν και δεν έχει άμεση σχέση με το πρόβλημά σου.

2)Όχι δεν έχει νόημα να έχεις δύο onclick αλλά μπορείς να κάνεις:

 

<div id="next" class="next" onclick="ChangeQuestion();emform.submit"></div>

[QSpec]

Ευχαριστώ για την απάντηση καταρχάς. Στο θέμα μας τώρα.

 

Το Ajax φάνηκε πολλά υποσχόμενο αλλά λόγω του μεγάλου αριθμού των ερωτήσεων (37) και των πολλών radio δεν μου φένεται ιδιαίτερα εφικτό.

Εχω όμως μερικές απορίες με το Ajax. Στέλνει στην php το value από τα διαφορα input της form, αυτό σημαίνει ότι θα πρέπει να δώσω id σε κάθε radio ώστε να τρέξει το κάθε <encodeURI( document.getElementById("id").value )>;

Αν ισχύει αυτό είναι μεγάλο πρόβλημα για radio ή checkboxes.

 

Με την 2η λύση σου, αν την κατάλαβα καλά, θα κάνει refresh/redirect οπότε δεν είναι η ιδανική.

 

Το visibility τώρα, προσπαθώ να το τεστάρω αλλά δεν μπορώ να βρω πως διάολο μπορώ να τοποθετήσω ένα div σε ένα συγκεκριμένο σημείο (για να τα βάλω το ένα πανω στο άλλο). Αυτό πάντως πλησιάζει στο να μου δώσει λύση.

[QSpec]

Οκ λοιπόν, παλέυω ακόμα με το visibility.

Τα divs θα τα βάλω το ένα πάνω στο άλλο με το position στο absolut και left/top συντεταγμένες, ίσως και z-index αν χρειαστεί. Αν μπορούσε κάποιος να μου εξηγήσει όμως την λειτουργία του inherit στην visibility θα ήμουν ευγνώμων.

Το πρόβλημα μου πλέον βρίσκεται στο να αλλάζω το visibility με το onclick ενός 3ου div.

 

Παρκάτω βρίσκεται η σελίδα στην οποία προσπαθώ να τεστάρω.

 

><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
.div1 {
font:"Times New Roman", Times, serif;
font-size: 15px;
color:#000000;
width: 700px;
height: 350px;
text-align:left;
line-height:25px;
background-color: #FF0000;
visibility: visible;
top: 1px;
left: 1px;
position: relative;
}

.div2 {
font:"Times New Roman", Times, serif;
font-size: 15px;
color:#000000;
width: 700px;
height: 350px;
text-align:left;
line-height:25px;
background-color: #FF0090;
visibility: visible;
top: 1px;
left: 1px;
position: inherit;
}

.div3 {
font:"Times New Roman", Times, serif;
font-size: 15px;
color:#000000;
width: 50px;
height: 30px;
text-align:left;
line-height:25px;
background-color: #FF0080;
visibility: visible;

}
</style>
<script type="text/javascript">
function ChangeVisibility ()
{


	var _div1 = document.getElementById('div1');
	var _div2 = document.getElementById('div2');
		
		
_div3.onmouseover = function ()
{
	_div2.style.visibility = "hidden";
}

 }
 </script>
</head>
<body onload="ChangeVisibility()">
<form action="visibility.php" id="myform" method="post">
<div class="div1" id="div1">crap<input type="radio" name="radio1" value="crap" />x2<input type="radio"  name="radio1" value="crapcrap" /></div>
<div class="div2" id="div2">ASas<input type="checkbox" name="check1" value="hmmm!" /></div>
<input type="submit" value="asdasd" />
</form>

<div class="div3" onclick="div1.style.visibility= 'hidden'">O.O</div>

adasdasdasdasdasdasdasd
<?php 
$radio = $_POST['radio1'];
$check = $_POST['check1'];
echo $radio;
echo $check;
?>
</body>
</html>

 

Εμένα μου φένονται σωστά, έχει και τις 2 μεθόδους που μπορώ να σκεφτώ, με ένα ολόκληρο function και απλούστερα με το onclick="div1.style.visibility= 'hidden'" μέσα στο div3 (εδώ έχω κάποιους ενδοιασμούς σχετικά με τα εισαγωγικά στο hidden).

 

Έχει κανείς καμιά ιδέα γιατί μπορεί να μην δουλέυει το παραπάνω; Και εάν ναι, κάθε πρόταση που μπορεί να το κάνει να δουλέψει είναι καλοδεχούμενη.

[alex2005]

Δοκίμασε αυτόν τον κώδικα.Έχω κάνει κάποιες αλλαγές σε κάποια σημεία....προσπάθησε να τα διακρίνεις.

 

>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
.div1 {
font-family:Times New Roman, Times, serif;
font-size: 15px;
color:#000000;
width: 700px;
height: 350px;
text-align:left;
line-height:25px;
background-color: #FF0000;
visibility: visible;
top: 1px;
left: 1px;
position: relative;
}

.div2 {
font-family:Times New Roman, Times, serif;
font-size: 15px;
color:#000000;
width: 700px;
height: 350px;
text-align:left;
line-height:25px;
background-color: #FF0090;
visibility: visible;
top: 1px;
left: 1px;
position: inherit;
}

.div3 {
font-family:Times New Roman, Times, serif;
font-size: 15px;
color:#000000;
width: 50px;
height: 30px;
text-align:left;
line-height:25px;
background-color: #FF0080;
visibility: visible;

}
</style>
<script type="text/javascript">
function ChangeVisibility ()
{


	var _div1 = document.getElementById('div1');
	var _div2 = document.getElementById('div2');
		
		
document.getElementById("div3").onmouseover = function ()
{
	_div2.style.visibility = "hidden";
}

 }
 </script>
</head>
<body onload="ChangeVisibility()">
<form action="visibility.php" id="myform" method="post">
<div class="div1" id="div1">crap<input type="radio" name="radio1" value="crap" />x2<input type="radio"  name="radio1" value="crapcrap" /></div>
<div class="div2" id="div2">ASas<input type="checkbox" name="check1" value="hmmm!" /></div>
<input type="submit" value="asdasd" />
</form>

<div class="div3" id="div3" onclick="javascript:document.getElementById('div1').style.visibility='hidden'">O.O</div>

adasdasdasdasdasdasdasd
<?php 
$radio = $_POST['radio1'];
$check = $_POST['check1'];
echo $radio;
echo $check;
?>
</body>
</html>

 

Όσο αναφορά το ajax δεν υπάρχει κανένας περιορισμός για το πλήθος των δεδομένων που στέλνεις!

Σκέψου ότι το yahoo mail beta δουλεύει με ajax και μπορεί να επισυνάπτει αρχεία και να στέλνει ολόκληρα mail με μεγάλα κείμενα.

Αν πραγματικά το θεωρείς ενδιαφέρον θα σου πρότεινα να το ψάξεις λίγο περισσότερο.

[QSpec]

Τα κατάφερα σήμερα το πρωί! Απλά έφτιαξα ένα style με property μόνο visibility="hidden"; και αλλάζω το style του div. Αργότερα θα το προσαρμόσω στην κανονική σελίδα με μια επανάληψη. Ευχαριστώ που μπήκες στον κόπο.

 

Μερικά σχόλια για τον κώδικα σου:

 

>document.getElementById("div3").onmouseover = function () 

Ω θέε μου, είμαι κόπανος.

 

>
<div class="div3" id="div3" onclick="javascript:document.getElementById('div1').style.visibility='hidden'">

Αυτό μου φένεται λίγο περίεργο, έχω αλλάξει άλλα attributes με τον δικό μου τρόπο.

 

Όσο για το Ajax, δεν λέω ότι δεν μπορεί να στείλει πολλά, λέω ότι για να τα στείλει πρέπει να γράψω πολλά. Στο submit μιας form με ένα radio group, post γίνεται ένα radio. Με το Ajax (με κάθε επιφύλαξη όσον αφορά το πόσο το κατάλαβα) θα πρέπει να στέλνω στην php το value του κάθε radio. Κατά μέσο όρο έχω 4 radio σε κάθε ερώτηση, άρα 4x37(ερωτήσεις)x4(διαφορετικα group ερωτήσεων)= Φρίκη!

 

Παρόλα αυτά με ενθουσίασε το Ajax, κάποια χρησιμότητα θα βρω και για αυτό.

 

Cheers.