Generic Way to Detect If HTML Form Is Edited

Generic way to detect if html form is edited

In pure javascript, this would not be an easy task, but jQuery makes it very easy to do:

$("#myform :input").change(function() {
   $("#myform").data("changed",true);
});

Then before saving, you can check if it was changed:

if ($("#myform").data("changed")) {
   // submit the form
}

In the example above, the form has an id equal to "myform".

If you need this in many forms, you can easily turn it into a plugin:

$.fn.extend({
 trackChanges: function() {
   $(":input",this).change(function() {
      $(this.form).data("changed", true);
   });
 }
 ,
 isChanged: function() { 
   return this.data("changed"); 
 }
});

Then you can simply say:

$("#myform").trackChanges();

and check if a form has changed:

if ($("#myform").isChanged()) {
   // ...
}

Find out if html form has changed

Yes, there seems to be some confusion over this. In an ideal world you would expect the onchange event to happen whenever the inputs change but thats not what happens. I'm sure for good reasons to - maybe not.

One way I've overcome this obstacle is to capture the form state into a variable just after displaying it and then just before submitting it to check if the state has changed and to act accordingly.

An easy state to store is what the serialize function returns. An easy place to store the state is using the data functionality. Both serialize and data are available with jquery.

Of course you can use other different forms of state (some form of hash) or storage for this state (standard global variable for example).

Here is some prototype code:

If your form id is 'xform' then you can call the following code when the form has displayed:

$('#xform').data('serialize',$('#xform').serialize());

And then, when you need to check, for example just before a button submit you can use:

if($('#xform').serialize()!=$('#xform').data('serialize')){
    // Form has changed!!!
}

You could wrap all this up into a copy & paste javascript snippet that will give you a formHasChanged() function to call wherever you need it (NOT TESTED):

$(function() {
    $('#xform').data('serialize',$('#xform').serialize());
});
function formHasChanged(){
    if($('#xform').serialize()!=$('#xform').data('serialize')){
        return(true);
    }
    return(false);
}

But I'll stop here otherwise I'll create yet another jquery plugin.

Standard way to detect form values has been changed?

You can check form data change or not form more reliable way, it's also easy

var formChangeFlag = false;
$('form').on('change', ':input', function(e){ 
 //':input' selector get all form fields even textarea, input, or select
  formChangeFlag = true;
});

$( window ).unload(function() {
  if(formChangeFlag === true){
     return "Data will lost , Do you wish to continue ?";
   }
});

Update on comment: If you want to compare form data with default value then store default form value in data-* attribute and compare value on field change event.

var formChangeFlag = false;_$Forminputs = $('form :input:not([type=submit])');_$Forminputs.on('change', function(e) {  //':input' selector get all form fields even textarea, input, or select  formChangeFlag = false;  //alert(_$Forminputs.length);  for (var i = 0; i < _$Forminputs.length; i++) {    if ($(_$Forminputs[i]).val() != $(_$Forminputs[i]).data('default')) {      formChangeFlag = true;      break;    }  }});
$('input[type=submit]').on('click', function() {  if (formChangeFlag === true) {    alert('form values changed')  } else {    alert('form values not changed')  }  return false;});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form action="" type="post">  <select name="sirnmae" data-default="Mr.">    <option value="Mr." selected>Mr.</option>    <option value="Miss">Miss</option>  </select>  <input type="text" data-default="ger" value="ger" name="fname" />  <input type="text" value="last name" data-default="last name" />  <input type="submit" value="post form" /></form>

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

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

How to detect form editing so that will update that only on database?

To get a precise solution would require more data (in my opinion); however, I believe what you are asking can accomplished with PHP by building your update statement through the use of a variable and iterating through the $_POST data (be advised this is untested).

//assumes control names on form = field names in db

$strSQL = "UPDATE tblWhatever SET ";
$fieldsAndvalues = "";
$markers = "";

foreach($_POST as $key => $value)
{
  if ($value <> "") {

  //code to check for $value's data type and set $marker to what is 
  //appropriate (e.g., string set $markers to "'", if numeric set to "", etc.)

     $fieldsAndvalues .= $key . "=" . $marker . $value . $marker . ","
  }
}

//Remove final comma (,), build final SQL statment, execute statement
if ($fieldsAndvalues <> "") {
  $strSQL .= substr($fieldsAndvalues,0,-1) . " WHERE <whatever criteria is used>";

  //execute query with whatever error checking and such you require
}

How do I detect how a form was submitted via JavaScript?

If you have multiple submit buttons, the way you can tell is by giving each of them a unique name attribute, like this:

<input type="submit" name="submit1" value="Submit 1"/>
<input type="submit" name="submit2" value="Submit 2"/>
<input type="submit" name="submit3" value="Submit 3"/>

The one that is focused is sent along with the form submit, so if you clicked the one with a name of "submit2", that would come through in the form POST (or GET). If enter is hit, the first button in the source (in this case submit1) is considered the default and is sent along. You could set it to display:none to use as a dummy for detecting whether enter was pressed vs actually clicking a submit button.

EDIT:

In response to your comments, to capture the enter key getting pressed in certain elements you can do this with jQuery.

Note, you'll need to give first_name and add_item id attributes, and turn add_item into a type="button" instead of type="submit".

HTML:

<form action="" method="POST">
    <input type="text" name="first_name"/>
    <input type="text" id="item" name="item"/>
    <input type="button" id="add_item" value="Add item"/>
    <input type="submit" value="Submit"/>
</form>

JS:

$("#item").keydown(function(event){
    if(event.keyCode == 13) {
        addFields();

        event.preventDefault();
        event.stopPropagation();
    }
});

$("#add_item").click(function(event) {
    addFields();
});

---

Related Topics