Comment traiter un <div> comme une forme <input>

Ce que j'ai fait est la suivante:

HTML

<form>
    <div id="textBox" contenteditable="true" name="textBox"><?php echo $storyText; ?>
    </div>
    <textarea id="hiddeninput" name="hiddeninput"></textarea>
    <input type="submit" id="save" name="save" value="Submit"/>
</form>

Javascript

$('#save').click(function () {
    var mysave = $('#textBox').html();
    $('#hiddeninput').val(mysave);
    $("form:first").submit();
    $('#hiddeninput').append(mysave);
    alert($('#hiddeninput').val());
});

Donc à la fois l'alerte et l'ajout afficher les informations correctes, mais il ne sera pas économiser #hiddeninput comme une variable php quand je soumettre. À l'origine, j'ai eu cela comme un caché méthode de saisie, mais j'essaie de montrer qu'il ne poste pas n'importe ce que je fais,

  • Quelle est votre question? Et ce qui est submit()?
  • Cela ressemble vraiment laid que je me suis amusé avec elle beaucoup. Je ne peux pas comprendre comment le présenter DIV html comme une forme de la valeur. C'est tout ce que je veux.
  • Ce qui est arrivé à la form tags?
  • Vous ne pouvez pas. Un div ne fait pas partie d'un formulaire dans ce sens. Utiliser un textarea.
  • C'est ce que le code jQuery est en train de faire: déplacer le div contenu dans un textarea.
  • Je ne peux pas utiliser textarea. Je suis l'aide de l'édition de texte riche.
  • Je vais les montrer textarea au lieu d'une balise input de montrer qu'il ajoute les informations correctes. Je suis en train de déplacer le div contenu d'un champ caché et de le soumettre.

InformationsquelleAutor Jeight | 2013-03-21
  1. 15

    Votre code fonctionne presque comme il est.
    Mais je préfère l'utilisation normale <input type="hidden"> et vous n'avez pas besoin de déclencher submit pour votre formulaire dans votre cas il suffit de mettre la valeur dans un champ caché.

    Donné votre balisage, avec de légères modifications

    <form action="showrequest.php">
<div id="textBox" contenteditable="true" name="textBox" style="width:300px;height:100px;">
</div>
<textarea id="hiddeninput" name="hiddeninput"></textarea>
<input type="submit" id="save" name="save" value="Submit"/>
</form>

    js

    $(function(){
    $('#save').click(function () {
        var mysave = $('#textBox').html();
        $('#hiddeninput').val(mysave);
    });
});

    var_dump($_REQUEST) sur php côté donne 

    array(2) {
  ["hiddeninput"]=>
  string(4) "test"
  ["save"]=>
  string(6) "Submit"
}
    • Merci!!!! Après avoir dormi sur cette certains, j'ai mis le code dans l'en-tête et non dans le corps de la balise html qui semble avoir fait toute la différence dans le monde. Je me sens bête.
    • Essayez 1) ajouter un id de l'attribut à la balise form, 2) la modification de votre type="submit" à type="button", 3) dans le .click() après le réglage de la hiddeninput valeur, ajouter $("#myForm").submit(); (à noter également: votre cachés textarea bande de toute mise en forme, tout en utilisant caché entrée conservera - selon ce que vous avez besoin)
    InformationsquelleAutor peterm
  2. 5

    Essayer de liaison de l'événement submit au lieu de l'événement click. Ce qui pourrait être happending est le formulaire de soumission avant la valeur de votre textarea est réglé. 

    $('form').submit(function(){
    var mysave = $('#textBox').html();
    $('#hiddeninput').val(mysave);
});

    J'ai testé cet exemple avec method="get" et a obtenu le code html de la div à afficher dans l'URL.

    • Nice!! Maintenant j'ai juste besoin de savoir pourquoi il ne fonctionne pas pour moi. C'est génial. Je vais le tester plus et laissez vous le savez, mais je pense que vous êtes sur la bonne voie. Merci!!!!!!
    • Je suis presque au point où je vais me connecter chaque changement au contenteditble div et le déplacer vers le champ caché, bien avant que j'soumettre les données. Qui semble juste comme un excès de si.
    • Si j'étais vous, je voudrais perdre la forme et juste après, avec un appel ajax.
    InformationsquelleAutor Jesse Lee
  3. 3

    Je crois que votre formulaire est soumis, avant votre code js a une chance de s'exécuter. Puisque vous êtes soumettre manuellement à partir de jQuery, essayez de prévenir l'événement par défaut du bouton (qui a également soumet le formulaire):

    $('#save').click(function(e) {
    e.preventDefault();
    var mysave = $('#textBox').html();
    $('#hiddeninput').val(mysave);
    $("form:first").submit();
});
    • Je suis d'accord, mais cela ne semble pas fonctionner. Je suis abasourdi à ce point. Il n'y a pas de raison que lorsque les deux d'ajout et d'alerte indique les informations correctes, mais lors de la soumission ne postez pas de contenu. Peut-être que j'ai besoin de dormir sur ce.
    InformationsquelleAutor bfavaretto
  4. 2

    Parlant seulement de l'expérience, vous ne pouvez pas soumettre une div valeur dans un formulaire POST.

    Vous pouvez le changer pour un textarea, et si vous souhaitez empêcher les utilisateurs de modifier, la mettre à disabled.

    Alternativement, vous pouvez utiliser javascript pour envoyer le formulaire, et de tirer la valeur de #hiddeninput de cette façon.

    • Correct, mais j'ai d'abord ajouté la valeur de l'id hiddeninput. J'ai essayé de montrer qu'il ajoute et des alertes correctement, mais encore ne se soumettent pas.
    • btw... Le code ci-dessus est l'utilisation de Javascript pour soumettre le formulaire et je suis en train de transférer le code html de #zone de texte (textBox #hiddeninput,
    InformationsquelleAutor Julian H. Lam
  5. 0

    Voici un moyen générique de soumettre toute div éléments de contenu que vous souhaitez (voir les notes ci-dessous):

    <form method="post" id="f">
<div id="txt" addToForm="f" contenteditable spellcheck="true" style="height:100px;width:300px;font-family:arial,sans serif;border:1px solid black;font-weight:normal;overflow-y:auto;"
></div><br />
<input type="button" value="Go" id="btnGo">
</form>
<script type="text/javascript">
$(document).ready(function(){
    $("#btnGo").click(function(){
        $("div[addToForm]").each(function(){
            var tId=$(this).prop("id");
            $(this).after("<input type='hidden' name='"+tId+"' id='hdn"+tId+"'>");
            $("#hdn"+tId).val($(this).html());
        });
        ("#f").submit();
    });
});
</script>

    Note 1) à l'aide de <input type="hidden"> préserve la mise en forme (IE11 permet plus de FF). Si vous préférez la bande de toute la mise en forme, y compris CFLFs (c'est à dire, <br>'s) d'utilisateurs en appuyant sur Entrée/Retour, l'utilisation <textarea style="display:none;"></textarea> à la place.
    Note 2) assurez-vous que la validation est terminée avec succès la première ou vous allez vous retrouver avec plusieurs entrées avec le même nom.

    • Eh bien, c'est trop compliqué, que ceux qui sont à l'envers
    • Accordée il y a beaucoup plus de code, mais donne une dynamique pour disposer de plusieurs formatable pseudo-entrées. Je n'étais pas en prétendant mine d'être une meilleure réponse, juste quelque chose de plus robuste, sans avoir à essai et d'erreur pour obtenir ce que ça va.
    InformationsquelleAutor gordon