2014-12-04 8 views
0

동일한 PHP 프로세서를 사용하는 jQuery 모바일 페이지에 여러 양식이 있습니다. 사용자가 클릭 한 제출 단추가 들어있는 양식 만 제출하도록 jQuery를 가져 오는 방법을 알아 냈지만 사용자가 클릭 한 단추의 값을 변경하는 방법을 알 수는 없습니다.jQuery Mobile 양식에서 클릭 버튼을 확인하고 값을 변경하십시오.

사용자가 클릭 한 버튼에 대해서만 버튼 텍스트가 변경 될 수 있다면 좋겠다.

지금까지 아래 스크립트는 사용자가 클릭 한 것뿐만 아니라 모든 제출 버튼의 텍스트를 변경합니다.

내 jQuery를 :

$("form input[type=submit]").on("click", function(e){ 
    $.post('doStuff.php', $(this).closest("form").serialize(), function(data) { 
     //changes the value of all submit buttons  
     $('input[type=submit]').val('Thank You').button("refresh");  

     //the rest of these do not work at all  
     $('input[type=submit]', $(this).closest('form')).val('Thank You').button("refresh"); 
     $('input[type=submit]', $(this)).val('Thank You').button("refresh"); 
     $('input[type=submit]', $(this).parent('form')).val('Thank You').button("refresh");  
    }).error(function(){ 
     alert("Error submiting the form"); 
    }); 
}); 

내 HTML :

<form action="doStuff.php" method="post" data-ajax='false'> 
    <input type="submit" name="submit" value="stuff" id="btnSubmit"> 
</form> 
<form action="doStuff.php" method="post" data-ajax='false'> 
    <input type="submit" name="submit" value="more stuff" id="btnSubmit"> 
</form> 
<form action="doStuff.php" method="post" data-ajax='false'> 
    <input type="submit" name="submit" value="a ton of stuff" id="btnSubmit"> 
</form> 

사람이 어떻게 할 찾고 무엇을 달성하는 생각이 있습니까?

+0

'var $ self = $ (this);'클릭 핸들러에서 $ self를'$ .post()'성공 콜백 내에서 사용하십시오. 디버깅하면 문제가 어디에서 왔는지 알 수 있습니다. –

답변

1

다른 방법으로 submit 이벤트를 수신하고 양식을 게시 한 다음 해당 양식 내의 버튼 텍스트를 변경하십시오.

$("form").on("submit", function() { 
    $(this).find("[type=submit]").val("Thank you").button("refresh"); 
}); 
0

오마르 귀하의 답변은 대체로 정확합니다 .... 감사합니다! 양식을 게시하기 전에 변수에 $ (this)를 먼저 할당해야했습니다. 아래는 작업 코드입니다.

$("form input[type=submit]").on("click", function(e){ 
    e.preventDefault(); 
    $this = $(this); 
    $.post('doStuff.php', $(this).closest("form").serialize(), function(data) { 
     $this.find("[type=submit]").val("Thank you").button("refresh");  
    }).error(function(){ 
     alert("Error submiting the form"); 
    }); 
});