2011-01-30 6 views
1

이 같은 기본값이 자동으로 입력 필드를,이 양식을 가지고 :양식을 제출할 때 텍스트 상자의 값을 변경하는 방법은 무엇입니까?

텍스트 상자를 클릭하면, 클래스 unfilled는 텍스트 상자에서 제거되고, 텍스트 상자 그래서 빈 만들어
<input type=text name=first value="First Name" class="unfilled" /> 

사용자는 자신의 정보를 입력 할 수 있습니다.

문제는 양식을 제출할 때 서버 측 유효성 검사를 엉망으로 만들고있는이 기본값으로 제출된다는 것입니다. 양식을 제출할 때 기본값을 갖는 모든 필드가 공백이되도록 서버 측 유효성 검사에서 '이 필드를 채우십시오.'라는 오류가 발생하도록하려면 어떻게해야합니까?

나는 작동하지 않는 다음 코드를 시도하고있다 :

$("#myForm").submit(function() 
     { 
      $(".unfilled").val(''); 
     } 
); 

이이 필드를 비워 만들 않습니다,하지만 서버는 여전히 이전의 기본 값을받습니다.

+0

당신은'submit' 방법에 닫는 괄호가 누락 될 수 있을까요? – Phil

+0

아니요, 방금 복사 및 붙여 넣기 및 회신을하지 않았습니다. –

답변

3

구문 오류가 있다고 생각합니다. submit 메소드에서 닫는 괄호가 없습니다.

난 그냥이를 채찍질하고 잘 작동

<!DOCTYPE html> 
<html> 
    <body> 
     <?php 
     var_dump($_POST); 
     ?> 
     <form action="test.php" method="post"> 
      <input type="text" name="first" value="First Name" class="unfilled"> 
      <input type="submit"> 
     </form> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
     <script type="text/javascript"> 
      jQuery(function($) { 
       $('form').submit(function() { 
        $('.unfilled').val(''); 
       }); 
      }); 
     </script> 
    </body> 
</html> 
+0

맞습니다. 문법 오류는 아니지만 서버 측 코드의 기본값으로 필드를 재설정하는 다른 버그였습니다 –

0

JQuery의 .click() 함수가 필요하다고 생각합니다.

예 :

$(function() { // shorthand for document.ready 
     $('.unfilled').click(function() { 
     $(this) 
      .val('') 
      .removeClass('unfilled'); 
     }) 
    }); 

UPDATE

미안 해요, 난 당신을 missunderstand 당신이 자리와 같은 기능을 필요로 생각했다.

너는 return false;으로 할 수 있지만 제출을 취소하십시오. 또는 GreenWebDev가 e.preventDefault();을 사용한다고 말합니다.

+1

제출은 양식 제출 작업을 캡처하기 위해 클릭하지 않고 올바른 이벤트입니다 (onsubmit). http://api.jquery.com/submit/ –

3

먼저 양식 실행을 중지하고 값을 변경 한 다음 양식을 수동으로 제출해야합니다. 당신이하지 않으면 양식, 또는 허위 제출하려는 경우

$("#myForm").submit(function(e) 
{ 
    // Stop the form submit 
    e.preventDefault(); 

    $(".unfilled").val(''); 
    $(this).submit(); 
} 
+0

이 코드를 사용해도 양식이 전혀 제출되지 않았습니까? 걸림 받음 –

+0

전혀하지 않아도됩니다. – Phil

+0

트리거를 사용하기 때문에 양식을 제출하기 위해 $ (this) .trigger ('submit')를 사용해야합니다. http://api.jquery.com/trigger/ –

0

당신은 return true;에 있습니다. 이 접근 방식의 문제점은 값을 게시하기 전에 필드가 '깜박'하여 프로답지 않은 느낌을주기 때문입니다. 숨겨진 값을 사용하고 submit() 이벤트에 설정하는 것이 좋습니다.

+0

기본 이벤트 처리기가 실행되지 않도록하려면 false 만 반환하면됩니다. 기본값은'return true;와 같습니다. – Phil

관련 문제