web-dev-qa-db-ja.com

<div>をフォーム<input>として処理するにはどうすればよいですか

私がしたことは：

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());
});

したがって、アラートと追加の両方に正しい情報が表示されますが、送信時に#hiddeninputがphp変数として保存されません。もともと私はこれを隠し入力メソッドとして持っていましたが、私が何をしても投稿されないことを示しようとしています、

phpjavascriptjquerypost
7
Jeight

コードはほぼそのまま機能しています。ただし、通常の_<input type="hidden">_を使用したいので、フォームに対してsubmitをトリガーする必要はなく、値を非表示フィールドに入力するだけです。

マークアップを指定し、わずかな変更を加えます

_<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);
    });
});
_

php側のvar_dump($_REQUEST)は

_array(2) {
  ["hiddeninput"]=>
  string(4) "test"
  ["save"]=>
  string(6) "Submit"
}
_
15
peterm

クリックイベントの代わりに送信イベントをバインドしてみてください。発生している可能性があるのは、textareaの値が設定される前にフォームが送信されていることです。

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

この例をmethod = "get"でテストし、divからhtmlを取得してURLに表示しました。

5
Jesse Lee

Jsコードが実行される前にフォームが送信されていると思います。 jQueryから手動で送信しているので、ボタンのデフォルトイベント（フォームも送信します）を防止してみてください。

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

経験から言えば、divの値をPOSTの形式で送信することはできません。

これをテキストエリアに変更できます。ユーザーによる編集を制限する場合は、disabledに設定します。

または、JavaScriptを使用してフォームを送信し、その方法で#hiddeninputから値を取得することもできます。

2
Julian H. Lam

必要なdivコンテンツ要素を送信する一般的な方法は次のとおりです（以下の注を参照）。

<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>

注1）<input type="hidden">を使用すると、フォーマットが保持されます（IE11ではFF以上が許可されます）。 Enter/Returnキーを押したユーザーからCFLF（つまり、<br>）を含むすべてのフォーマットを削除したい場合は、代わりに<textarea style="display:none;"></textarea>を使用してください。注2）最初に検証が正常に完了したことを確認してください。そうしないと、同じ名前の複数の入力が発生します。

0
gordon