How to get form element value when triggered using Jquery

Question

I've worked with JQuery to get data from a specific form element when triggered

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

Is there a way of setting the .change trigger to the form

$('#my-form').change

and using javascript to detect which form element was selected/changed and get its value

$('#div-result').load('run-a-routine.asp?value=' + $(this).val()); — user4431269
– user4431269, Commented Jul 16, 2015 at 9:31
There isn't any such kind of trigger for form but yea definitely you can check whether form has been changed or not before doing any operation! — Guruprasad J Rao
– Guruprasad J Rao, Commented Jul 16, 2015 at 9:33
Yes, there is way. But what do you mean by which form element. Do you have multiple elements in the form? If yes, why are they not in your question? — lshettyl
– lshettyl, Commented Jul 16, 2015 at 9:33

fuyushimoya · Accepted Answer · 2015-07-16 09:42:57Z

2

You can listen to form's input event, which will be trigger when any input in the form changed its value, as input will bubble up, you can catch it at the form, and use e.target to find out the source. And do anything with that source.

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

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

edited Jul 16, 2015 at 9:42

answered Jul 16, 2015 at 9:37

fuyushimoya

9,8133 gold badges30 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John Moore Over a year ago

Thank's fuyushimoya. This code slipped past me. Perfect. Many thanks

Timir Maji · Accepted Answer · 2015-07-16 09:34:28Z

0

A simple way is , 1.check each element change and set a param to true , if change happen in the form

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

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

then check if some changes happen in following way

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

May be it will be helpfull to you

answered Jul 16, 2015 at 9:34

Timir Maji

193 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:14:03Z

0

Update: while there is no change event, there is input. Look at the answer from fuyushimoya

There is no change handler on the <form> element, but you can easily select all the form elements that can change like this:

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

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

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Jul 16, 2015 at 9:35

aorcsik

15.6k5 gold badges42 silver badges50 bronze badges

2 Comments

John Moore Over a year ago

Thanks aorcsik, that's 99% there. If I had 3 <select> elements in the form, is there no way of determining the "id" of the <select> element that triggered the event. By reading the other posts, I'm assuming not.

aorcsik Over a year ago

You can determine which element changed, this in the callback refers to the object which changed. See my edited snippet.

Collectives™ on Stack Overflow

How to get form element value when triggered using Jquery

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related