How to detect HTML form changes using jQuery, in detail for a noob?

Question

I'm kind of a noob on HTML. I've sifted thru this, this, this, this, and more. Here's the code I came up with but it, and many more experiments I've done, do not work. I can pound on my input fields all day and I never see the alert. Most answers assume you know something that I guess I don't know. Can anyone tell me what may be wrong?

<script   
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script>
    $("#myform :input").change(function() {
        alert("Form changed");
    });
</script>

<form id="myform" name="myform" method="GET">
   <!-- a bunch of text fields, etc -->
</form>

:input will select all the elements with type=input in the #myForm. Is that what you want to achieve? Be specific for your question. — 31piy
– 31piy, Commented Dec 6, 2016 at 4:08
I guess your question was the correct question. I was using built-in "inputs" from cakephp, I guess they're HTML inputs. All my buttons were called inputs but I guess button click events don't count as changes. Hence no "changes were detected". But also I did indeed have to move part of the script below the form as Jason L suggested. — Joe C
– Joe C, Commented Dec 7, 2016 at 19:56

Jason Lemrond · Accepted Answer · 2016-12-06 04:34:28Z

4

<form id="myform" name="myform" method="GET">
    <input type="text" name="field">
    <input type="text" name="field2">
    <input type="text" name="field3">
</form>

<script>
    $("#myform input").change(function() {
        alert("Form changed");
    });
</script>

Try this. Make sure your script is below the form or the form won't be loaded when the script runs. Or you could wrap your javascript in $(document).ready(). This will execute your code once the DOM is loaded. https://api.jquery.com/ready/

$(document).ready(function() {
    // Your Javascript
}

Also, if you are looking for the alert to fire on each keypress, take a look at keyup() or keydown() instead of using change() in jQuery: https://api.jquery.com/keyup/

edited Dec 6, 2016 at 4:34

answered Dec 6, 2016 at 4:28

Jason Lemrond

4172 silver badges9 bronze badges

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

1 Comment

hlongmore Over a year ago

Note that if you merely want to detect whether the form has changed, this should be sufficient. But if you want to detect which fields have changed, Craig Buckler has a decent article and example code at sitepoint.com/javascript-form-change-checker

Community · Accepted Answer · 2017-05-23 12:13:51Z

This explains it very clearly. Generic way to detect if html form is edited

You add a data attribute to the form: data-changed="false"

<script   
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script>
    $("#myform :input").change(function() {
       //here we make sure that the on change event for every form input element
       //triggers the flag on the form (data-changed) to true.
       $("#myform").data("changed",true);
    });

    //when the form is being submitted:
    $(document).on('submit',"#myform",function(){
        if ($("#myform").data("changed")) {
        {
           //something has changed: do something
        }
    })
</script>

<form id="myform" name="myform" method="GET" data-changed="false">
   <!-- a bunch of text fields, etc -->
</form>

Collectives™ on Stack Overflow

How to detect HTML form changes using jQuery, in detail for a noob?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related