jquery를 사용하여 제출 단추를 이미지 단추로 바꾸기

jquery를 사용하여 양식 제출 단추를 이미지 제출 단추로 바꾸려면 어떻게해야합니까?jquery를 사용하여 제출 단추를 이미지 단추로 바꾸기

jquery를 사용해야하는 이유는 연락처 양식을 생성하기 위해 플러그인을 사용하고 있으며 jquery가 플러그인 코드에 삽입하지 않고 대체하는 가장 효과적인 방법 인 것처럼 보입니다.

2010-07-08 Odyss3us

당신이 jQuery를에 그 일을하는 경우, 귀하의 양식은 다음

을 적용 할 수 있습니다, 동적으로 생성된다

var submit = $('form').find('input[type=submit]'); 
submit.hide(); 
submit.after('<input type=image src=test.jpg />');

입력란에 이미지를 입력 할 수 없으므로이 입력란을 숨기고 입력 유형 = 이미지를 놓을 수 없기 때문에 이미지가 제출물 역할을하기 때문에 이미지를 입력 할 수 없으므로

우리는 또한 내가 아니, 그것은 단지 "입력"로 지정 볼 수 있습니다하지 않는 것이

var submit = $('form').find('input[type=submit]'); 
submit.addClass('form-submit');

출처

2010-07-08 09:37:11

고맙습니다. 나는 그것을 시도하고 다시보고 할 것입니다! – Odyss3us

버튼에 클래스 또는 ID를 사용하여 일부 CSS에 연결할 수 있습니까?

<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <title>Untitled Document</title> 
    <style> 
     .form-submit { text-indent:-9999em; border:0; width:[WIDTH OF IMAGE]; height:[HEIGHT OF IMAGE]; background:#fff url([URL TO IMAGE]) no-repeat 0 0 ; line-height:0 font-size:0; } 
    </style> 
    </head> 

    <body> 

    <form> 
     [...] 
     <input type="submit" class="form-submit"/> 
    </form> 

    </body> 
</html>

출처

2010-07-08 09:21:15 DHuntrods

에 의해 DHuntrods에서 제공하는 CSS를 사용할 수 있습니다. – Odyss3us

그건 나쁘지, 가장 간단했을 텐데! ie6에 대해 걱정하지 않았다면 rob이 'input [type = submit] {[...]}'을 올린 것과 비슷한 속성 선택기를 사용할 수 있지만 순전히 CSS 만 사용할 수 있습니다. 하지만 실제로 누가 ie6를 무시할 수 있습니까? 한숨. – DHuntrods

당신은

var element = document.getElementById('btn'); //assuming the button has an ID of btn 

element.setAttribute('type','image'); 
element.setAttribute('src','path-to-image.ext');

가 IE에 대한,하지만 당신이 IE를 허용하지 않기 때문에 요소를 교체 할 필요가 자바 스크립트의 몇 라인을 함께 할 수있는 : 그렇다면 당신은 jQuery를 사용하지 않아도 동적 유형의 변화 .. 그래서

var oldO = document.getElementById('btn'); 

var newO=document.createElement('input'); 
newO.type='image'; 
newO.name = oldO.name; 
// any other attributes you want to copy over.. 
newO.src='path-to-image.ext'; 
oldO.parentNode.replaceChild(newO,oldO);

출처

2010-07-08 09:23:54

jquery를 사용하여 제출 단추를 이미지 단추로 바꾸기

답변

관련 문제