Question

需要.innerHTML功能，但使用当前表单字段值包括输入，选择（选定选项）和textarea。

所以，给定：

<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

我认为这就是你要找的东西： JSFiddle link

在此示例中，使用所有已更改的属性及其值警告表单的“magic”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 2

/**
 * 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'];
}

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/

编辑：再次阅读问题后，我想也许你想用上一个html表单中的值添加一个html块。如果是这种情况，请尝试沿着这些方向......

$('#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>";

}

演示：http://jsfiddle.net/wdm954/nEXzS/1/

Answer 4

对此并不完全满意，但这主要有效：

$('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 5

您可以像这样获取表单输入的值：

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

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

具有当前表单值的innerHTML

5 个答案: