使用html表單運行javascript代碼提交

嘿，我使用的是用於將人員登錄到我的網站的html表單，我構建它以便使用AJAX（jQuery），但我遇到了一些問題。使用html表單運行javascript代碼提交

這裏是JavaScript：

function validateLoginDetails() { 
    $('[name=loginUser]').click(function() { 
     $("#mainWrap").css({ width:"600px", height:"200px" }); 
     $("#interfaceScreen").load("modules/web/loginForm.php?username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password)); 
    }); 
}

下面是HTML表單：

<form id="formLogin" name="loginUser" method="post"> 
    Username<br /><input id="username" name="username" type="text" maxlength="30" style="width:160px; border:solid 1px #444444;" /><br /><br /> 
    Password<br /><input id="password" name="password" type="password" maxlength="50" style="width:160px; border:solid 1px #444444;" /><br /><br /> 
    <input id="submit" type="submit" value="Play" style="width:100px; background:#FFFFFF; border:solid 1px #444444;" /> 
</form>

的問題是，當我提出它運行的代碼，但隨後又回到是怎麼回事形式之前，這可能聽起來很奇怪，但我可以說，因爲我可以看到它改變了div的大小，然後恢復到原來的大小後。

任何想法？

編輯：如果我運行代碼與下面的鏈接例如，然後它工作正常。

<a href="#" name="loginUser">Clicky</a>

來源

2009-10-21 Stanni

爲什麼你''

您需要從您的處理程序返回false，以便它在執行AJAX調用後不會執行實際的表單發佈。

這是我會做的。

$(function() { 
    $('#formLogin').submit(function() { 
     $('#mainWrap').css({ width: '600px', height: '200px' }); 
     $.post('modules/web/loginForm.php', 
       $(this).serialize(), 
       function(data) { 
        $('#interfaceScreen').html(data); 
       } 
     ); 
     return false; 
    }); 
});

請注意，我使用後，以確保該URL（包括用戶名和密碼）並沒有結束暴露在網絡日誌。我還假設包含表單的頁面是通過https加載的，因此，這個帖子也會被保護。

來源

2009-10-21 23:37:25 tvanfosson

問題仍然存在。 – Stanni 2009-10-21 23:41:04

好的。所以，我們在這裏錯過了一些代碼。我假設這是一個在表單提交上運行的函數，但現在我不知道如何或在哪裏被調用。把我扔掉的是函數的名稱 - validateLoginDetails。原來，它只是設置了一個點擊處理程序。在點擊處理程序內部，大概是你應該返回false的地方。我會更新 - 你真的應該改變功能的名稱。此外，我會在窗體提交上運行函數，而不是單擊，因爲窗體可能也會通過文本輸入中的返回來提交。 – tvanfosson 2009-10-22 00:25:47

謝謝，抱歉的混淆。 – Stanni 2009-10-22 12:22:27

我很確定tvanfosson是在正確的道路上。嘗試將返回false移入點擊功能或嘗試取消事件。

$('[name=loginUser]').click(function() { 
    //do stuff 
    return false; 
}); 

or 

$('[name=loginUser]').click(function(e) { 
    e.cancel(); 
});

來源

2009-10-21 23:50:57 WesleyJohnson

他們也沒有幫助，我想你們都可能沒有正確理解我的情況。 – Stanni 2009-10-21 23:54:47

我很困惑。據推測，當你從一個普通的超鏈接執行代碼時，它的工作原理就是因爲ajax調用jQuery調用load（）函數來插入一些數據，就是這樣。然而，當你從FORM做它時，jQuery做的是事情，但FORM仍然提交。提交時，頁面會自行回發並刷新服務器端，因此您又回到了開始的位置。如果這聽起來是正確的 - 那麼你確實需要停止提交表單。我會將表單上的.click（）處理程序更改爲.submit（）處理程序，然後嘗試取消它。 – WesleyJohnson 2009-10-22 00:33:51

首先，您是否確認您的.php文件正在返回內容而不是錯誤？如果要插入內容（使用$load），則不應觸發div上的CSS命令，直到您預期的內容（來自加載）成功返回爲止，例如使用回調。此外，我會建議使用.submit()，一個特定於表單的函數，直接引用表單標記和/或id來加快速度（不要在jQuery中搜索DOM中的許多東西）。

<style> 

.loadReg{ width:[yourBeginWidth]; height:[yourBeginHeight];} 

.loadSuccess{ width:600px; height:200px;} 

</style > 

function validateLoginDetails() { 
    $('#formLogin').submit(function() { 
    // using load(url,{data:toPOST},callback(if successful)); 

    $("#interfaceScreen").load("modules/web/loginForm.php?", 
    {"username": encodeURIComponent(username), "password": encodeURIComponent(password)}, 
    function(){$("#mainWrap").toggleClass('loadSuccess');} 
    );// end load 

    });// end submit 

    return false; 
}

這可能是更有效率，更不突出，但想讓它可識別。其他人是正確的......如果你的Div正在恢復到原來的大小......這是因爲該頁面被允許重新加載......在這種情況下，你的初始DIV寬度/高度由瀏覽器應用......因爲您的備用寬度/高度僅適用於jquery onsubmit。

總結一下：

分配提交事件形成直接
使用$load內置傳遞值對能力的對象{name:val}
移動CSS以不顯眼的狀態VS埋在代碼
觸發CSS成功
停止頁面重新加載並重置顯示

來源

2009-10-22 00:58:32 rydordy

如果你正在處理表單提交，你應該真的選擇.form（）事件處理程序，而不是.click（）事件處理程序。對於前者，如果表單是通過其他方法提交的，那麼您的支票仍然會運行，而點擊取決於執行某個操作的單個元素。您還需要在此事件上返回false或preventDefault（），因此您的函數實際上會正確觸發。

另一件事（根據您提供的代碼抽樣，這可能是微不足道的/不重要的）是您必須在必須調用的函數中綁定該事件處理程序 - 爲什麼不將其加載到文檔就緒，像這樣（見下文）？

我返工你的代碼是這樣，個人的看法：

$(document).ready(function() { 
    $('#formLogin').submit(function() { 
     $("#mainWrap").css({ width:"600px", height:"200px" }); 
     $("#interfaceScreen").load("modules/web/loginForm.php?username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password)); 
     return false; 
    }); 
});

來源

2009-10-22 04:22:08

使用html表單運行javascript代碼提交

回答

相關問題