現在のフォーム値を持つinnerHTML

Question

.innerHTML機能が必要ですが、入力、選択（選択されたオプション）、およびテキストエリアを含む現在のフォームフィールド値が必要です。だから、

、与えられた：

<form id=f> 
    <input type=text name=x /> 
    <select name=y> 
    <option value='1'>one</option> 
    <option value='2'>two</option> 
    </select> 
</form> 

ユーザーは123を入力し、オプション2を選択した場合、通常のf.innerHTMLが返されます。

<input type=text name=x /> 
<select name=y> 
    <option value='1'>one</option> 
    <option value='2'>two</option> 
</select> 

私はf.magicInnerHTML返品したい：

<input type=text name=x value='123' /> 
<select name=y> 
    <option value='1'>one</option> 
    <option value='2' selected>two</option> 
</select> 

現在のフォーム値を反映します。

Answer 1

完全に満足していないが、これは主に動作します：

$('input:text, input:hidden, input:password').each(function() { 
    var v=this.value; 
    $(this).attr("magicmagic_value",v).removeAttr("value").val(v); 
}); 
$('input:checkbox,input:radio').each(function() { 
    var v=this.checked; 
    if(v) $(this).attr("magicmagic_checked","checked"); 
    $(this).removeAttr("checked"); 
    if(v) this.checked=true; 
}); 
$('select option').each(function() { 
    var v=this.selected; 
    if(v) $(this).attr("magicmagic_selected","selected"); 
    $(this).removeAttr("selected"); 
    if(v) this.selected=true; 
}); 
$('textarea').each(function() { 
    $(this).html(this.value); 
}); 

var magic=$('form').html().replace(/magicmagic_/g,""); 

$('[magicmagic_value]').removeAttr('magicmagic_value'); 
$('[magicmagic_checked]').attr("checked","checked"). 
    removeAttr('magicmagic_checked'); 
$('[magicmagic_selected]').attr("selected","selected"). 
    removeAttr('magicmagic_selected'); 

alert(magic); 

Answer 2

あなたは次のようにフォーム入力の値を取得することができます

<input type="text" id="name" value="Paul" /> 

<script type="text/javascript"> 
    $("#name").val(); 
</script> 

Answer 3

はこのような何かを試してみてください...

$('#f').submit(function(e) { 
    e.preventDefault(); 
    var value = $('#text').val(); 
    if ((value != '') && $('#select').val() == '2') { 
     $('#text').val(value); 
    } 
}); 

デモ：http://jsfiddle.net/wdm954/nEXzS/

---

EDIT：後もう一度質問を読んでください。前のhtmlフォームの値をhtmlのブロックに追加したいと思っているかもしれません。私は、これはあなたが探しているものだと思いますhttp://jsfiddle.net/wdm954/nEXzS/1/

Answer 4

：この例では JSFiddle link

、「魔法その場合は...

$('#f').submit(function(e) { 
    e.preventDefault(); 
    var value = $('#text').val(); 
    if ((value != '') && $('#select').val() == '2') { 
     $(this).after(insertValue(value)); 
    } 
}); 

function insertValue(val) { 
    return "<input type=text name=x value='" + val + "' /><select name=y><option value='1'>one</option><option value='2' selected>two</option></select>"; 

} 

デモをこれらの線に沿って何かをしてみてくださいフォームのinnerHTMLに、変更されたすべての属性とその値が通知されます。 jquery getAttributes pluginを使用しました。ここではプラグインのコード以外のコードは、次のとおりです。

function magicHTMLloop($el, s, notfirst){ 
    if (notfirst) { 
     s += '<' + $el.get(0).tagName.toLowerCase(); 

     var attrs = $.getAttributes($el); 

     for (var i in attrs){ 
      s += ' ' + i + '="' + $el.attr(i) + '"'; 
     } 
     s += '>'; 
    } 

    $el.children().each(function(){ 
     s += magicHTMLloop($(this), '', true); 
    }); 

    if ($el.children().length && notfirst){ 
     s += '</' + $el.get(0).tagName + '>'; 
    } 
    return s; 
} 

function magicHTML($el) { 
    return magicHTMLloop($el, '', false); 
} 

// This is the example usage: 

$('input').change(function(){ 
    var v = magicHTML($('form')); 
    alert(v); 
}); 

これは、そのような（不正なHTMLの原因になります）の値内の引用符のようにあなたが考慮する必要がありますいくつかの可能なエッジの例を、持っている - しかし、私は必要であれば、自分で逃げることができます。あなたが見ることができるように、magicHTML関数の出力は、更新さinnerHTMLプロパティです：それと

<input type="text" name="x" value="this is the changed value"> 

Answer 5

/** 
* HTML content along with the values entered by the user for form elements 
* (unlike the default browser behavior) 
* 
* @author i.carter euona.com 
* @version 1.0 2012-04-14 
* @return innerHTML (or outerHTML) 
* @param e HTMLElement 
* @param t String: "outer" OR "inner" (default) 
* 
* @effect changes defaultValue 
* @tested FF11,IE10,GC 
*/ 
function getHTML(e,t) 
{ 
    if(typeof t=='undefined') var t='inner'; 
    switch(e.nodeName.toUpperCase()) 
    { 
     case 'INPUT': 
      if(e.type=='checkbox' || e.type=='radio') 
      { 
       e.defaultChecked=e.checked; 
       break; 
      } 
     case 'TEXTAREA': 
      e.defaultValue=e.value; 
      break; 
     case 'SELECT': 
      var o=e.options,i=o.length; 
      while(--i > -1) 
       o[i].defaultSelected=o[i].selected; 
      break; 
     default: 
      var x=e.getElementsByTagName('input'),i=x.length; 
      while(--i > -1) getHTML(x[i],t); 
      x=e.getElementsByTagName('textarea');i=x.length; 
      while(--i > -1) getHTML(x[i],t); 
      x=e.getElementsByTagName('select');i=x.length; 
      while(--i > -1) getHTML(x[i],t); 
    } 
    return e[t+'HTML']; 
}