Question

我曾与JQuery合作，在触发时从特定表单元素中获取数据

<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(function() {
    $('#select-box-name').change(function(){
        $('#div-result').load('run-a-routine.asp?value=' + $('#select-box-name').val());
    });
});
</script>


<form id="my-form">
    <select id="select-box-name">
        <option value="1">Fred Bloggs</option>
    </select>
</form>

有没有办法将 .change 触发器设置为表单

$('#my-form').change

并使用javascript检测选择/更改了哪个表单元素并获取其值

Answer 1

您可以收听form的{{3}}事件，当form中的任何输入更改其值时会触发该事件，因为input会冒泡您可以在表单中捕获它，并使用e.target查找源代码。并使用该来源做任何事情。

＆＃13;

$('#test').on('input', function(e) {
  var $target = $(e.target);
  var id = $target.attr('id');
  var val =$target.val();
  console.log(id + "'s value change to :" + val );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="test">
  <input type="text" id="t1"/>
  <input type="text" id="t2"/>
  <select id="s1">
    <option value="a">a</option>
    <option value="a">b</option>
    <option value="a">c</option>
  </select>
  <textarea id='ta1'></textarea>
</form>

＆＃13;

Answer 2

一个简单的方法是， 1.检查每个元素更改并将参数设置为true，如果在表单中发生更改

$("form :input").change(function() {
  $(this).closest('form').data('changed', true);
});

$("form :select").change(function() {
 $(this).closest('form').data('changed', true);
});

然后检查是否有某些变化以下列方式发生

 if($(this).closest('form').data('changed')) {
  //do something
 }

可能会对你有所帮助

Answer 3

更新：虽然没有change个事件，但有input。查看answer

中的fuyushimoya

change元素上没有<form>处理程序，但您可以轻松选择所有可以更改的表单元素：

＆＃13;

$("#my-form").find("input, textarea, select").on("change", function() {
    alert($(this).attr("id") + " changed to: " + $(this).val());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form">
    <input id="input_1" type="text" /><br />
    <textarea id="textarea_1"></textarea><br />
    <select id="select_1">
        <option>1</option>
        <option>2</option>
    </select>
    <select id="select_2">
        <option>3</option>
        <option>4</option>
    </select>
</form>

＆＃13;

如何在使用Jquery

3 个答案: