نکات برنامه‌نویسی

نکات برنامه‌نویسی و رایانه‌ای - امیرمسعود ایرانی

نکات برنامه‌نویسی

نکات برنامه‌نویسی و رایانه‌ای - امیرمسعود ایرانی

اطلاع از دکمه 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', '' );
} );
  • امیرمسعود ایرانی

form

html5

jquery

آموزش برنامه نویسی

نظرات  (۰)

هیچ نظری هنوز ثبت نشده است

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی