اطلاع از دکمه submit انتخاب شده در فرم توسط jQuery

اگر در فرم html خود چندین دکمه submit داشته باشیم و در رویداد submit فرم بخواهیم متوجه شویم که کاربر روی کدام دکمه کلیک کرده است، در حال حاضر روش پایدار و مطمئنی که روی تمام مرورگرها به درستی عمل کند وجود ندارد.

در مرورگر فایرفاکس ویژگی explicitOriginalTarget وجود دارد که با کمک آن می‌توان متوجه شد کدام دکمه توسط کاربر انتخاب شده است ولی این ویژگی در مرورگرهای دیگر وجود ندارد.

کارآمدترین و ساده‌ترین راه حل موجود به شکل زیر است:

<form>
	<input id="submit1" type="submit" value="دکمه اول">
	<input id="submit2"  type="submit" value="دکمه دوم">
</form>

قطعه کد بالا فرمی ایجاد می‌کند که دو دکمه submit دارد.

ابتدا یک قطعه کد جاوااسکریپت اضافه می‌کنیم که هنگام کلیک هر دکمه، یک ویژگی به فرم اضافه کند:

$( 'form input[type=submit]' ).on( 'click', function() {
	$( this.form ).prop( 'submitId', this.id );
} );

سپس رویداد submit فرم را اضافه می‌کنیم:

$( 'form' ).on( 'submit', function() {
	var submitId = $( this ).prop( 'submitId' );

	if( submitId == 'submit1' ) {
		// دکمه اول
	} elseif( submitId == 'submit2' ) {
		// دکمه دوم
	} else {
		// حالت پیش‌فرض - بدون دکمه
	}
	
	// پاک کردن مقدار ذخیره شده از فرم
	$( this ).prop( 'submitId', '' );
} );