Για javascript με innerHTML και form

[Επισκέπτης]

Καλησπέρα.

Προσπαθώ μέσα σε μια φόρμα να προσθέσω html κώδικα με inputs.
 

let rootdiv = document.querySelector("#include");
    let chilldiv = document.querySelector("#idha");
    rootdiv.innerHTML = chilldiv.innerHTML;

Στο HTML έχω

<div id="idha" style="display:none;">
<p>
<label for="email">Το προσωπικό σας e-mail</label><input name="email" id="email" type="email" placeholder="Το e-mail σας" required><br />
</p>
<p>
<hr>
<label for="pass">Ο κωδικός πρόσβασής :</label>
<input type="password" name="pass" id="pass" placeholder="Ο Κωδικός Πρόσβασης" required><br />
</p>
<p>

</p>
</div>

Και η φόρμα είναι κάπως έτσι

<form method="GET">
<label for="kati">Δώσε κάτι : <input id="kati" name="kati"><br />
<div id="include">
  </div>
  <input type="submit">

Ενώ μέσα στο #include εμφανίζει το innerHTML του #idha

Όταν κάνω submit δεν περνάει τις μεταβλητές στο GET της form.

Και δεν μπορώ να καταλάβω το γιατί.

Επεξ/σία 18 Μαρτίου 2021 από Επισκέπτης

[Επισκέπτης]

Αν κάνω append στο form το βάζει κανονικά στη φόρμα.

Αλλά θέλω να επιλέγει ο χρήστης αν θέλει να εγγραφεί ή αν θέλει να συνδεθεί.

Με το append δεν μπορώ να αφαιρέσω αυτό που έβαλα στη form.

Καμία ιδέα. (Το έχω ψάξει αρκετά πριν κάνω την ερώτηση)

[tsofras]

7 λεπτά πριν, gekatsou είπε

Αν κάνω append στο form το βάζει κανονικά στη φόρμα.

Αλλά θέλω να επιλέγει ο χρήστης αν θέλει να εγγραφεί ή αν θέλει να συνδεθεί.

Με το append δεν μπορώ να αφαιρέσω αυτό που έβαλα στη form.

Καμία ιδέα. (Το έχω ψάξει αρκετά πριν κάνω την ερώτηση)

Εχμ δεν είμαι ειδικός έχω να ασχοληθώ χρόνια έστω και με απλή html

Αλλά

Βλέπω ότι αναφέρεις ότι αλλάζεις το value στο div , αν δεν κάνω λάθος μόνο τα <input> γίνονται submit , οπότε μήπως να φτιάξεις ένα input hidden και να περνάς εκεί το value για να το κάνει submit?

Μπορεί να λέω και αρλούμπες οπότε συγνώμη

[Επισκέπτης]

17 λεπτά πριν, tsofras είπε

Εχμ δεν είμαι ειδικός έχω να ασχοληθώ χρόνια έστω και με απλή html

Αλλά

Βλέπω ότι αναφέρεις ότι αλλάζεις το value στο div , αν δεν κάνω λάθος μόνο τα <input> γίνονται submit , οπότε μήπως να φτιάξεις ένα input hidden και να περνάς εκεί το value για να το κάνει submit?

Μπορεί να λέω και αρλούμπες οπότε συγνώμη

Ευχαριστώ @tsofras για την απάντηση. Input προσπαθώ να βάλω στη φόρμα και δεν τα κάνει submit. Σε αυτό που λες νομίζω έχεις δίκιο. Γιαυτό το submit το κάνω με javascript 

onclick="document.getElementById('myForm').submit();"

 

[tsofras]

2 λεπτά πριν, gekatsou είπε

Ευχαριστώ @tsofras για την απάντηση. Input προσπαθώ να βάλω στη φόρμα και δεν τα κάνει submit. Σε αυτό που λες νομίζω έχεις δίκιο. Γιαυτό το submit το κάνω με javascript 

onclick="document.getElementById('myForm').submit();"

 

Μήπως όμως δεν παίζει επειδή αλλάζεις την τιμή του #include που είναι div ? Για κάντο hidden input

[Επισκέπτης]

3 λεπτά πριν, tsofras είπε

Μήπως όμως δεν παίζει επειδή αλλάζεις την τιμή του #include που είναι div ? Για κάντο hidden input

Είναι πολλά τα input και δεν μπορούν να πάρουν το γνώρισμα hidden γιατί πρέπει να τα συμπληρώσει ο χρήστης.

[tsofras]

24 λεπτά πριν, gekatsou είπε

Είναι πολλά τα input και δεν μπορούν να πάρουν το γνώρισμα hidden γιατί πρέπει να τα συμπληρώσει ο χρήστης.

όχι λέω να φτιάξεις ας πούμε και ένα input με name=include2 να είναι hidden και να του δίνεις τιμή μέσω javascript όπως κάνεις τώρα για το div

Έτσι ώστε όταν κάνεις submit να φεύγει και η τιμή του

Για ένα πεδίο δεν μιλάμε ότι δεν γίνεται submit ή εγώ δεν κατάλαβα κάτι σωστά ?

 

[Επισκέπτης]

Έχω ένα 2 div hidden που μέσα έχει html κώδικα με inputs και κείμενο.
Όταν επιλέγει ο χρήστης να εγγραφή φορτώνει στη φόρμα το html ενός από τα 2 hidden div. Όταν επιλέγει είσοδο θέλω να φορτώνει το άλλο html που βρίσκετε σε άλλο hidden div.

Αυτό νόμισα ότι ήταν εύκολο με την innerhtml αλλά όταν κάνω submit δεν τα παίρνει τα extra inputs που τα έβαλα με την innerhtml.

Αυτό που κατάφερα είναι να κάνω append στο id της form που δουλεύει κανονικά. Τα στέλνει αλλά δεν μπορώ να τα αφαιρέσω (Η μάλλον κάπως έτσι μάλλον μπορώ)

Δεν ξέρω.

[virxen75]

αυτό ψάχνεις?

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div id="idha" style="display: none;">

        <p>

        <label for="email">Το προσωπικό σας e-mail</label>

        <input name="email" id="email" type="email" placeholder="Το e-mail σας" required><br />

        </p>

        <p>

        <hr>

        <label for="pass">Ο κωδικός πρόσβασής :</label>

        <input type="password" name="pass" id="pass" placeholder="Ο Κωδικός Πρόσβασης" required><br />

        </p>

        <p>

        

        </p>

    </div>

    <form method="GET">

        <label for="kati">Δώσε κάτι : </label>

        <input id="kati" name="kati"><br>

        <div id="include"> </div>

        <input type="submit">

    </form>

    <script>

        const rootdiv = document.querySelector("#include");

        let chilldiv = document.querySelector("#idha");

        rootdiv.innerHTML = chilldiv.innerHTML;

    </script>

</body>

</html>

[Επισκέπτης]

12 ώρες πριν, virxen75 είπε

αυτό ψάχνεις?

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div id="idha" style="display: none;">

        <p>

        <label for="email">Το προσωπικό σας e-mail</label>

        <input name="email" id="email" type="email" placeholder="Το e-mail σας" required><br />

        </p>

        <p>

        <hr>

        <label for="pass">Ο κωδικός πρόσβασής :</label>

        <input type="password" name="pass" id="pass" placeholder="Ο Κωδικός Πρόσβασης" required><br />

        </p>

        <p>

        

        </p>

    </div>

    <form method="GET">

        <label for="kati">Δώσε κάτι : </label>

        <input id="kati" name="kati"><br>

        <div id="include"> </div>

        <input type="submit">

    </form>

    <script>

        const rootdiv = document.querySelector("#include");

        let chilldiv = document.querySelector("#idha");

        rootdiv.innerHTML = chilldiv.innerHTML;

    </script>

</body>

</html>

Καλημέρες !!!

Αυτό που γράφεις είναι ότι έχω και δεν περνάνε στο GET οι μεταβλητές. Στον browser δουλεύει φαίνονται τα στοιχεία αλλά όταν κάνω submit δεν τα περνάει στον server.

Μόνο με το apppend του from id δουλεύει.

@virxen75 Δουλεύει μια χαρά έτσι όπως το έγραψες.

Έκανα λάθος στην html δεν έκλεισα ένα div.

Ευχαριστώ

[virxen75]

 

οκ

Επεξ/σία 19 Μαρτίου 2021 από virxen75

[k33theod]

Δεν καταλαβαίνω τη λογική που έχεις κάπου τα inputs και τα βάζεις μετά στην φόρμα αλλά οκ. Πρέπει τουλάχιστον να αφαιρέσεις τα id αλλιώς έχεις περισσότερα του ενός element με το ίδιο id.

Αν κατάλαβα καλά τι θες να κάνεις, για πολλούς λόγους ο τρόπος είναι λάθος.

Όταν ένας χρήστης πρέπει να είναι authenticated για να δει κάτι, τον κάνεις redirect στην σελίδα που έχει το login. Εκεί έχει ένα κουμπί για να πάει στο register εφόσον δεν είναι εγγραμμένος. Οι φόρμες πρέπει να είναι διαφορετικές και να έχουν άλλο action file. Στην μία περίπτωση αποθηκεύει το χρήστη, στην άλλη τον κάνει authenticate.

Όλα τα δεδομένα πρέπει να φεύγουν με post request αλλιώς υπάρχει πρόβλημα ασφάλειας. Επίσης η φόρμα πρέπει να έχει csrf token.

[Επισκέπτης]

 

Το κατάλαβα ότι είναι λάθος η λογική μου. Στην ουσία ήθελα κάποιος να επιλέγει αν θέλει να γραφτεί η να κάνει login και ταυτόχρονα έλεγα να ποστάρει και άρθρο.

Κάτι που είναι λάθος να γίνεται με αυτό το τρόπο. 

Τώρα τα φτιάχνω ξεχωριστά σε διαφορετικές σελίδες.

Ευχαριστώ @k33theod