2012-08-07 4 views
2

내가 양식에서 데이터를 얻을이 코드를 사용하여 양식의 제출 중을 중지 jQuery를 사용하기 위해 노력하고있어에서 데이터를 얻을 중지 :jQuery를 제출 형태

$form = $('form#signup') 
$form.submit(function(event){ 
    event.preventDefault(); 
    var $input=$('#signup :input') 
    console.log($input.username) 
    alert($input.username) 
}) 

여전히 양식 post의 데이터를하고, 당신은에서 양식을 방지 할 필요가

html 
    head 
    script(src='javascripts/signupValidation.js') 
    script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js') 
    script(src='javascripts/validator.js') 
    body 
    form(id='signup',method='post',action='/signup') 
     label Firstname 
     input(type='text', name='firstname') 
     label Lastname 
     input(type='text', name='lastname') 
     label Username 
     input(type='text', name='username') 
     label Password 
     input(type='password', name='password') 
     label Password again 
     input(type='password', name='password2') 
     label Email 
     input(type='email', name='email') 

    input(type='submit',value='Sign up', onclick="") 
+2

NITPICK : 세미콜론을 사용하십시오! 코드를 사용하지 않는 것이 좋으며 코드를 압축하고 싶다면 코드가 필요합니다. – epascarello

답변

0

문제

$input.username 다른 요소를 참조 jQuery를 유효하지 않다 [양식 제출 제기하지].

var usernameInput = $input.filter('[name="username"]'); 

document.ready에 코드를 추가하지 않은 것처럼 보이므로 아마 아무 것도 붙이지 않을 것입니다. 다음과 같이 변경하십시오 :

jQuery(function() { 
    $form = $('form#signup'); 
    $form.submit(function(event){ 
    }); 
} 

또한 jQuery 코드 앞에 유효성 검사 코드가 포함되어있는 것 같습니다. 브라우저에서 JavaScript 콘솔을 살펴보면 멋진 오류 메시지가 표시됩니다.

+0

DOM 준비 부분에 대한 호출이 좋습니다. –

+0

jquery가 준비가되었을 때 제 코드를 실행하면 문제가 해결되었습니다. 아직 비동기 코딩에 익숙해 져 있습니다. – gilbertbw

0

: 경고 상자가 appear.Also 불을 지르고 오류 $ is not defined를 제공하지 않고 Node.js를은 (옥에 writen)

양식을 충돌 return false와 함께 제출 중 :

$form.submit(function(event){ 

    var $input=$('#signup :input'); 
    console.log($input.username); 
    alert($input.username); 

// data = array of all the information collected from the input tags 
//data = $form.serizalize(); will also work 
data = $(this).serialize();  


    return false; 
}); 


data는 당신이 필요로하는 정보가 배열 될 것이다, 그래서 당신이 그것의 모든 구조입니다 볼 수 있습니다 console.log(data)를 추천하고, 예를 들어 원하는대로 당신은 그것을 사용할 수 있습니다

if(data.something == anything){ 
    doThis(); 
} 

그리고 내가보기 엔 당신의 자바 스크립트 문장

+1

'event.preventDefault();'는 양식 제출을 금지합니다. – Lance

+0

^내가 생각한 것 그 자체가 – gilbertbw

+0

네,하지만 때로는 뭔가 더 일어나는 일이 있습니다.'return false '도'이벤트로 작동합니다.preventPropagation(); event.preventDefault(); 와 다른 기능을 지금 기억할 수 없으므로 이런 식으로하는 것이 더 안전합니다. –

2

당신의 형상 - 만약의 끝에 ;을 추가하는 것이 좋습니다 관련 JS가 signupValidation.js 파일에있는 경우 jquery include 뒤에 이되도록 스크립트 호출을 이동해야합니다.

아마 너무, 양식 코드에게 작은 비트를 정리하는 것 :

$('form#signup').on('submit', function(event){ 
    event.preventDefault(); 
    var $input = $(this).find('[name=username]'); 
    console.log($input.val()); 
    alert($input.val()); 
}) 

당신도 .serialize()보고에 관심이있을 수 있습니다. 코드와

0

다른 사람들과 마찬가지로 나는 다음과 같은 코드를 가진 행운을 했어 :

$(document).ready(function(){ 
    // Prevent form submission 
    $("form").submit(function(event) { 
     event.preventDefault(); 
    }); 
}); 

는 양식 제출을 방지하기 위해. 그러나 요즘에는 뒤에서 뒤로 이동하고 애니메이션과 같은 사탕 코팅 기능을 추가하거나 HTML 양식에 "흔들림"효과를 추가하는 스크립트가 페이지에 일반적으로 포함되어 있습니다. 제출할 스크립트가 javascript-fu를 가질 수도 있기 때문에 이런 상황에서 스크립트가 가능합니다.