CODEWITHSUNDEEP
javascriptjquery
user2232696
user2232696

Reputation: 502

How to make simplier the jquery code

Aim is to detect if after page load input values are changed.

Input fields (19 fields) for example

<input type="text" name="date_day1" id="date_day1" value=" >
<input type="text" name="date_month1" id="date_month1" value=" >
<input type="text" name="date_year1" id="date_year1" value=" >
<input type="text" name="amount1" id="amount1" value=" >

Then hidden input field like this

<input type="text" name="is_row_changed1" id="is_row_changed1" value="">
<script>

$("#date_day1").on("change", function () {
    document.getElementById('is_row_changed1').value = 1;
});

$("#date_month1").on("change", function () {
    document.getElementById('is_row_changed1').value = 1;
});

</script>

If in any of input fields (19 fields) value is changed, then I need to reflect it in this hidden input field (I decided to set the hidden input field value to 1).

After that ajax with php where I check if the hidden input field value is 1. If 1, then update mysql. Aim is to reduce usage of server resources.

Question Javascript code for the hidden input field would be long. May be some way (code) to make is shorter (simplier)?

Upvotes: 2

Views: 83

Answers (4)

Bharat Chodvadiya
Bharat Chodvadiya

Reputation: 1650

Use like this.

<script>
$("#date_day1").on("change", function () {

  $('#is_row_changed1').val(1);

});

$("#date_month1").on("change", function () {

  $('#is_row_changed1').val(1);

});

// etc
</script>

Upvotes: 0

Hannes Johansson
Hannes Johansson

Reputation: 1802

I don't know if it's just in your example code, but you have several elements with the same ID, which is not valid. Each ID should be unique (which is the purpose of any ID). You can either add a class to each input you want to track and select on that like Shawn said or if you want to track every input except the hidden on the page you can use

$("input:[type!=hidden]").on("change", function () {
    document.getElementById('is_row_changed1').value = 1;
});

Upvotes: 1

Pablo Francisco P&#233;rez Hidalgo
Pablo Francisco P&#233;rez Hidalgo

Reputation: 27692

You could use JQuery selectors in order to set the same "input changed" callback for all input elements declared in your HTML code:

var anyFieldChanged = false; //Global variable
function changedCallBack()
{
  anyFieldChanged = true;
  alert('Fields changed');
}

allInputs = $('input');
allInputs.each(function() { this.onchange = yourCallBack(); });

Upvotes: 1

Shawn Balestracci
Shawn Balestracci

Reputation: 7530

Add a row_changed class to each input then you can target them all with one call:

$(".row_changed").on("change", function () {
document.getElementById('is_row_changed1').value = 1;
});

(you can also simplify it even more with QuickSilver's comment.)

Upvotes: 5

Related Questions