How to make this work based on form used

[fumeeptc]

Hello there!

i have script:

<script>
$(document).ready(function() {
	$('form').on('keyup change', 'input, select, textarea', function(){

		//saveIt
		$("#submitbtn").css("background","#F1F103");
		//console.log('Form changed!');
	});
});

$(document).on('dp.change', 'input', function(e) {
	var shown = $(this).attr('dp.shown');
	if (typeof shown != 'undefined' && shown && e.date != e.oldDate)
	$("#submitbtn").css("background","#F1F103");
	//console.log('Form changed!');
});

$(document).on('dp.show', 'input', function(e) {
	$(this).attr('dp.shown', 1);
});

</script>

It changes color of submit button if any of the data in form is edited.

Now i have problem that in one page there is 2 forms and i do not want to put this code for every form

so i want to know what would be the best solution to use one code but color button only for form where inputs/date/select are edited?

[Paul_Wilkins]

@fumeeptc

so i want to know what would be the best solution to use one code but color button only for form where inputs/date/select are edited?

When you divide your forms into two groups, one for forms with a colored submit button, and one for forms without, which group has the more forms?

If more of the forms have a colored submit button, then that is your default. The forms that don’t have a colored submit button can have a special class name that prevents that happening to them.

If instead more of the forms don’t have a colored submit button, then it is only the colored submit button forms that should have a special class name to enable that behavior.

Which of those options do you take? That entirely depends on your knowledge of how many are affected.

If it’s a roughly even split, then the behaviour out of the norm, that of the colored submit button, receives the special class to enable the behaviour.

[raddevon]

Your event handler function will get an event object which has a target property representing the target of the event. Instead of selecting the submit button by ID, you can traverse the DOM from event.target to get to the submit button inside the form with the change and color only that button.

$(document).ready(function() {
    $('form').on('keyup change', 'input, select, textarea', function(event){
        // Select your button element by starting from `event.target`
    });
});