JS

Question

양식을 제출하십시오. 장바구니 플러그인을 사용하고 있으며 제품 페이지의 기본 양식을 사용하여 가격, 제품 이름 등의 값을 제출합니다. 문제는 플러그인이 표준 제출 버튼을 사용하여 값 및 나는 더 예쁜 커스텀 jquery 롤오버로 단추를 교체하고 싶습니다. 이 일어날 수 있도록하기 위해 좀 JS를 사용하고 내 사용자 주변의 링크 버튼을 제출 던져 :

<a href="#" onclick="document.forms[0].submit()" value="Add to Cart" onsubmit="return ReadForm(this, true);"> 
<img class="fade" src="style/img/add_btn.jpg" style="background: url(style/img/add_ro.png);" alt=""/> 
</a> 

양식을 제출하고, 사용자가 홈 페이지로 리디렉션되지만 형태로 데이터를 얻을하지 않는 것을 제출하고 제품은 '장바구니'페이지에 추가되지 않습니다. 양식이 제출 될 것으로 의심되지만 데이터를 제출하는 추가 JS 기능을 실행하지 못하고 있습니다. 당신은 문제의 사이트를 체크 아웃 여기를 살펴보고 클릭합니다

<!-- 
// 
function ReadForm (obj1, tst) 
{ 
// Read the user form 
var i,j,pos; 
val_total="";val_combo=""; 

for (i=0; i<obj1.length; i++) 
{  
// run entire form 
obj = obj1.elements[i]; 

// a form element 
if (obj.type == "select-one") 
{ // just selects 
if (obj.name == "quantity" || 
obj.name == "amount") continue; 
pos = obj.selectedIndex;  // which option selected 
val = obj.options[pos].value; // selected value 
val_combo = val_combo + "(" + val + ")"; 
} 
} 
// Now summarize everything we have processed above 
val_total = obj1.product_tmp.value + val_combo; 
obj1.product.value = val_total; 
} 
//--> 

가 '장바구니 버튼에 추가': http://hardtopdepot.com/?p=34

플러그인은 페이지 상단에 약간의 JS 추가

상단의 카트를 볼 수 있습니다 : http://hardtopdepot.com/?page_id=50

어떤 도움을 주신다면 고맙습니다 .- 감사합니다!

Answer 1

해당 페이지에는 현재 검색 양식 인 첫 번째 양식을 제출하는 두 가지 양식이 있습니다. 의 onclick로 변경하는 A 요소에 대한 onsubmit 이벤트가 없습니다, 또한

document.forms[1].submit() 

을, 그래서 당신의 연결은 간단하게 할 수 있습니다 :

<a href="#" onclick="document.forms[1].submit()" value="Add to Cart"> 
    <img class="fade" src="style/img/add_btn.jpg" style="background: url(style/img/add_ro.png);" alt=""/> 
</a> 

편집 :이 해결되지만 현재 노력하고 무엇을 하려면, bobince는 매우 좋은 지적합니다.

Answer 2

버튼으로 작동합니다. 단추로 두십시오. 링크로 표시하면 자바 스크립트없이 폼이 불필요하게 끊어 지거나 새 탭 중간 클릭 또는 책갈피에 대한 원치 않는 링크 동작이 발생합니다. 필드가 여러 개인 양식을 만들고 제출 버튼이없는 경우 제출 작업을 Enter 제출하지 않을 수도 있습니다.

CSS를 사용하여 단추 모양이 링크처럼 보일 수도 있고 원하는대로 표시 할 수도 있습니다. background을 변경하고 border 및 padding을 제거하십시오.

이 접근법의 유일한 진짜 문제는 IE (당연히 IE)가 1px의 제거 할 수없는 패딩을 추가한다는 것입니다. 일반적으로 타겟팅 된 CSS를 사용하여 문제를 해결할 수 있습니다. 또는 간단한 이미지 만 원할 경우 <input type="image"/>을 사용하십시오. 그게 바로 거기에있어 다른 이미지와 마찬가지로 롤오버에서 사용할 수 있습니다.