ارسال فرم به وسیله جاوااسکریپت به چه صورت است ؟

ارسال فرم به وسیله جاوااسکریپت به چه صورت است ؟

در HTML فرستادن فرم از طریق یک دکمه از نوع submit یا عکسی که در نقش دکمه submit عمل می کند انجام میشود

مثال

<input type=”submit” value=”Submit” />
<input type=”image” src=”submit.gif” />

در صورت کلیک بر روي هر یک از دکمه هاي بالا فرم به صورت معمولی ارسال می شود. چنانچه دکمه Enter صفحه کلید را نیز فشار دهید مرورگر فرم را مثل حالتی که دکمه کلیک می شود ارسال می کند. براي تست ارسال شدن فرم می توانید از کد ساده زیر در تگ آغازین فرم مورد نظرتان استفاده کنید:

<form method=”post” action=”javascript:alert(‘Submitted’)”>

می خواهید که از هیچ یک از روش هاي فوق استفاده نکنید می توانید از متدي به نام submit() استفاده کنید. این متد جزئی از تعریفات DOM راي یک عنصر form است و می تواند هر جایی از صفحه استفاده شود. براي این کار اولا باید ارجاعی به فرم مورد نظر ایجاد کرد (طبق روش هایی که قبلا ذکر شد):

oForm = document.getElementById(“form1”);
oForm = document.forms[“form1”];
oForm = document.forms[0];

بعد از این کار می توانید به راحتی از این متد استفاده کنید:

oForm.submit();

یکی از مشکلاتی که توسعه دهندگان در فرم ها با آن روبرو هستند این است که بسیاري از کاربران براي اطمینان از اینکه فرم به درستی ارسال شود چندین بار بر روي دکمه submit کلیک می کنند. مشکلی که در اینجا هست این است که به ازاي هر بار کلیک کاربر بر روي دکمه یک درخواست اضافی به سرور ارسال می شود راه حل این مشکل بسیار ساده است: بعد از اینکه کاربر دکمه را کلیک کرد، آن را غیر فعال می کنیم. براي انجام این کار می توان به جاي استفاده از دکمه submit معمولی زیر:

<input type=”submit” value=”Submit” />

از کد زیر استفاده کرد:

<input type=”button” value=”Submit” onclick=”this.disabled=true; this.form.submit()” />

موقعی که این دکمه کلیک می شود اولا خود دکمه غیر فعال می شود و سپس فرمی را که جزئی از آن است، ارسال می کند توجه کنید که در اینجا کلمه کلیدي this به دکمه اشاره دارد و form به فرم دربرگیرنده دکمه اشاره می کند. همانطور که یک فرم را می توانیم بوسیله متد submit()ارسال کنیم می توانیم آن را به وسیله متدي به نام reset() نیز reset پاك سازي) کنیم: )

<input type=”button” value=”Reset” onclick=”document.forms[0].reset()”>

منبع : انجمن علمی مهندسی فناوری اطلاعات دانشگاه پیام تور مرکز اران و بید گل

برای اموزش های ویدیویی زبان جاوا اسکیریپت به بستر ویدیو های اموزشی بروید

بستر اموزش های ویدویی