2010-06-18 8 views
1

검색 옵션에 제출 버튼 대신 이미지를 사용하고 PHP에서 ajax를 사용하여 결과를로드하기 위해 onclick 이벤트를 사용하고 있습니다. 이제 입력을 눌러 결과를로드해야합니다. 내 응용 프로그램을 업데이트하는 방법 이미지를 변경하지 않고.히트를 사용하여 PHP로 양식 제출

감사

+0

"이미지를 변경하지 않고 응용 프로그램을 업데이트"한다는 것은 무엇을 의미합니까? 제출 버튼이 있는지 여부에 관계없이 입력을 누르면 양식이 자동으로 제출되지 않습니까? –

+0

입력 버튼에 이미지 스타일을 적용 할 수 없으므로 동일한 키보드 이벤트가 유지됩니까? –

+0

@pekka 입력/리턴 키 이벤트 제출 단추가 필요하다고 생각합니다. –

답변

0

물론, 양식의 끝에 <input type="submit" style="display:none;" />를 추가하여 양식을 제출 키를 입력 수에 브라우저를 속여한다.

지금까지 당신의 AJAX onclick 이벤트로 동일한 기능을 얻기로 : 당신의 click의 이벤트 <form> '대신 <input>의의 submit 이벤트'로 AJAX 기능을 묶어해야합니다.

jsfiddle demonstration

은 (아약스 편의를 위해 jQuery를 사용하지만 이벤트가 없습니다)

0

난 당신이 사용하고있는 자바 스크립트 라이브러리 모르겠어요,하지만 난 내 예제에서 jQuery를 사용합니다.

<script> 
$(document).ready(function() { 
    $("form#interesting").bind("submit",function() { 
    $.get("target_page.php".function() { 
     // Callback functionality goes here. 
    }); 
    }); 
}); 
</script> 
<form id="interesting"> 
Enter your input: <input type="text" name="interesting_input" /> 
<!-- input type="image" is a way of using an image as a submit button --> 
<input type="image" src="submit_button_image.gif" /> 
</form> 
+0

으로 감추십시오. 이것은 좋은 아이디어입니다. 시도해 보겠습니다. – abhis

0

흠을, 내가 생각할 수있는 몇 가지가 있습니다.

fitst one - 누군가가 이미지로 제출 버튼을 스타일링 할 수 있다고 언급했습니다. 좋은 생각은 쉽습니다. 이 튜토리얼은 얼마 전에 답변으로 게시되었습니다. http://www.ampsoft.net/webdesign-l/image-button.html.

또 다른 문제는 제출 이벤트를 onclick에 바인드하지만 양식에 대한 자연 제출은 제출됩니다. 폼 입력에서 엔터를 누르면 폼이 onsubmit 이벤트를받습니다. JS를 바인딩해야합니다.

당신이 jQuery를 사용할 때 그것은 @phleet에서 대답처럼 것이 일반적으로 작동

, 당신이 어떤 라이브러리를 사용하지 않는 경우, 당신은 온 클릭처럼

<form onsubmit="YOUR_JS_HERE">.....</form> 

과 같은 작업을 수행 할 수 있습니다. 그래도 jQuery를 사용하는 것이 좋습니다.