如何提交有关输入元素值更改的表单？答案

【问题标题】：How can i submit a form on value change of an input element?如何提交有关输入元素值更改的表单？
【发布时间】：2016-07-04 12:43:28
【问题描述】：

我正在开发一个引导站点，我正在尝试实现一个切换按钮，通过切换它来改变设计的颜色。所以我做了一个与复选框相同的切换按钮，现在我需要知道当我更改复选框的值以重新加载我的网站时如何立即提交表单。或者有没有其他方法可以实现这样的功能？

【问题讨论】：

标签： html input submit

【解决方案1】：

如果我是你，我会使用 jquery 将 onChanged 事件绑定到切换按钮，并在该事件发生时使用 Ajax 发送表单

【讨论】：

嘿，感谢您的快速回答！ :) 我快速查找了 Ajax，但我以前从未使用过它。你能最终告诉我我怎么能用ajax做吗？所以当偶数发生时发送表单

【解决方案2】：

您不需要为此使用<form> 或 AJAX（除非您想与服务器通信 - 例如，在页面呈现后从数据库中读取设置）。 em>

你可以很容易地创建一个纯 js/jQuery 解决方案：

jsFiddle demo

这里是brief discussion of AJAX，有几个简单的例子

来自 jsFiddle Demo 的代码，作为 SO 代码 sn-p：

chg = 0;
$('button').click(function(){
	if (chg==0){
		$('#hdr').css({'background':'palegreen','color':'darkgreen'});
		$('#body').css({'background':'wheat','color':'orange'});
		$('#ftr').css({'background':'lightblue','color':'blue'});
    $('body').css({'max-width':'70%'});
    chg++;
  }else if(chg>0){
		$('#hdr').css({'background':'palegoldenrod','color':'orange'});
		$('#body').css({'background':'#ccc','color':'darkcyan'});
		$('#ftr').css({'background':'bisque','color':'red'});
    $('body').css({'max-width':'80%','margin':'0 auto'});
  }
});

div{position:relative;box-sizing:border-box;width:100%;}
#hdr{height:80px;background:black;color:white;text-align:center;}
#body{height:60vh;background:white;color:black;}
#ftr{height:80px;background:black;color:white;text-align:center;}
button{position:absolute;top:15px;right:15px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="hdr">Header goes here</div>
<div id="body">body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body body </div>
<div id="ftr">Footer this is the Footer</div>
<button>Change</button>

【讨论】：