带有当前表单值的innerHTML [英] innerHTML with current form values

问题描述

需要.innerHTML功能，但是包含输入，选择（选择选项）和textarea。 b
$ b

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

反映当前的表单值。

  $（'input：>解决方案

不完全满意它， （函数（）{
var v = this.value;
$（this）.attr（magicmagic_value，v）.removeAttr（输入：隐藏，输入：密码值）。val（v）;
}）;
$（'input：checkbox，input：radio'）。each（function（）{
var v = this.checked;
if（v）$（this）.attr（ （v）this.checked = true;
}）;
$（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）;


Need .innerHTML functionality but with the current form field values including input, select (selected option), and textarea.

So, given:

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

if user enters 123, and selects option two, normal f.innerHTML returns:

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

I'd like f.magicInnerHTML to return:

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

reflecting the current form values.

解决方案

Not completely satisfied with it, but this mostly works:

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

这篇关于带有当前表单值的innerHTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！