html 양식으로 자바 스크립트 코드 실행하기

Question

안녕하세요, 저는 사람들을 내 웹 사이트에 로그인하는 데 사용되는 html 양식을 사용하고 있습니다. 그래서 AJAX (jQuery)를 사용하지만 일부 문제가 있습니다. 여기

는 자바 스크립트입니다 : 여기

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 크기를 변경 한 다음 오른쪽으로 볼 수 있기 때문에 알 수 있습니다.

아이디어가 있으십니까?

EDIT : 예를 들어 아래 링크가있는 코드를 실행하면 정상적으로 작동합니다.

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

Answer 1

AJAX 호출 후 실제 양식 게시를 수행하지 않도록 처리기에서 false를 반환해야합니다.

다음은 내가 수행 할 작업입니다.

$(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를 통해로드되었다고 가정하므로 게시물도 안전하게 보호됩니다.

Answer 2

저는 tvanfosson이 올바른 방향에 있다고 확신합니다. click 함수로 return false를 이동하거나 이벤트를 취소 해보십시오.

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

or 

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

Answer 3

먼저 .php 파일이 오류가 아닌 콘텐츠를 반환하는지 확인 했습니까? 콘텐츠를 삽입하는 경우 (예 : $load) 예상 콘텐츠 (예 :로드)가 성공적으로 반환 될 때까지 div에서 CSS 명령을 실행해서는 안됩니다. 콜백을 사용하십시오. 또한 양식 태그 또는 ID를 직접 참조하여 양식 특정 함수 인 .submit()을 사용하여 작업 속도를 높이는 것이 좋습니다 (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에 의해서만 적용됩니다.

는 다시 정리해 보면 :

1. 할당 직접
2. 사용을 형성하기 위해 이벤트를 제출 $load 코드
에 묻혀 대 내장 값 쌍을 전달하는 능력이 눈에 거슬리지 상태로 개체 {name:val}
3. 이동 CSS입니다
4. 트리거 성공한 경우 CSS
5. 정지 페이지 재로드 및 재설정 디스플레이 중지

Answer 4

양식 제출을 처리하려면 .click() 이벤트 처리기 대신 .form() 이벤트 처리기를 선택해야합니다. 전자의 경우 양식이 다른 방법을 통해 제출되면 수표는 계속 실행되지만 클릭은 해당 작업을 실행하는 단일 요소에 달려 있습니다. 이 이벤트에서 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; 
    }); 
});