مشکل با onsubmit هنگام ارسال فرم

phpweb · Jul 20, 2011

وقتی درخواست آژاکس رو توی onsubmit فراخوانی می کنم، فرم ارسال می شه ولی کدهای آژاکس درست اجرا نمی شن. برای حل این مشکل باید تگهای فرم رو حذف کنم و فقط فیلدها رو باقی بذارم و با استفاده از onclick که به دکمه فرم اختصاص داده شده فرم رو ارسال کنم.

مشکل این روش ( استفاده از onclick ) اینه که اگه جاوا اسکریپت غیر فعال باشه فرم، فرم ارسال نمی شه و من نمی خوام اینطور باشه.

شما چه راهی برای حل این مشکل بکار می برید؟

eAmin · Jul 20, 2011

چه با onsubmit و چه با onclick در هر صورت نیاز به JavaScript هست. شما فقط توسط JavaScript می تونید این رویدادها رو هندل کنید.
در ضمن شما به چه صورت از کدهای Ajax استفاده میکنید؟ کدهاتون رو بزارید تا بشه مشکل رو پیدا کرد.

phpweb · Jul 20, 2011

eAmin گفت:
چه با onsubmit و چه با onclick در هر صورت نیاز به JavaScript هست. شما فقط توسط JavaScript می تونید این رویدادها رو هندل کنید.
در ضمن شما به چه صورت از کدهای Ajax استفاده میکنید؟ کدهاتون رو بزارید تا بشه مشکل رو پیدا کرد.

برای کم شدن حجم کدها فقط کد مربوط به ایجاد XMLHttpRequest توی ادیتورهایی مثل فایرفاکی رو گذاشتم

HTML:

var xmlHttp = new XMLHttpRequest();

تابع مربوط به ايجاد اتصال به سرور:

کد:

function process()
{
    try
    {
        xmlHttp.onreadystatechange=handleServer;
        xmlHttp.open("POST","ajax.php",true);
        xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlHttp.send('Title=test');    
    }
    catch (e)
    {
        alert ("امکان اتصال به سرور وجود ندارد\n" + e.toString());
        return false;
    }    
}

تابع مربوط به خواندن پاسخ سرور:

HTML:

function handleServer()
{
    if(xmlHttp.readyState == 4 && xmlHttp.status == 200) 
    {
        var newdiv = document.getElementById('www');
        newdiv.innerHTML=xmlHttp.responseText;
    }
}

تگ فرم به این صورت هست که وقتی از این حالت استفاده می کنم کدهای آژاکس اجرا نمی شن.

HTML:

<form id="form1" name="form1" method="post" action="new.php" onSubmit="return process()" >

لطفا توجه کنید که اگه تگ فرم رو حذف کنم، و onclick رو به دکمه ارسال فرم اختصاص بدم، فیلدهای فرم از طریق آژاکس به خوبی ارسال می شه اما اگر کاربر جاوا اسکریپت رو غیر فعال کنه امکان استفاده از آژاکس وجود نداره و چون تگهای فرم رو حذف کردم فرم هم ارسال نمی شه. یعنی هرچی روی دکمه ارسال فرم کلیک کنه به علت غیرفعال بودن جاوااسکریپت فرم ارسال نمی شه.

امیدوارم منظورم رو رسونده باشم.

eAmin · Jul 22, 2011

شما باید آخر تابع process یک return false ناقابل اضافه کنید! با اینکار جلوی اجرا شدن action فرم (البته در این سناریو) رو میگیرید.
یک مثال:

کد:

<html>
<head>

<script>

var xmlHttp = new XMLHttpRequest();

function process(obj)
{
    var val = encodeURIComponent(document.getElementById("txt1").value);
    try
    {
	xmlHttp.open("POST", obj.action + "", true);
        xmlHttp.onreadystatechange=handleServer;
        xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlHttp.send('txt1=' + val);    
    }
    catch (e)
    {
        alert(e.toString());
    }

    return false;
}

function handleServer()
{
    if(xmlHttp.readyState == 4 && xmlHttp.status == 200) 
    {
        var newdiv = document.getElementById('www');
        newdiv.innerHTML=xmlHttp.responseText;
    }
}

</script>
</head>

<form id="form1" method="post" action="ajax.php" onSubmit="return process(this)" >
	<input type="text" name="txt1" id="txt1" />
	<input type="submit" />
</form>

<div id="www"></div>

</html>

همچنین از onclick هم می تونید استفاده کنید و نیازی هم نیست که action فرم رو حذف کنید.