jQuery를 : 기본 양식 동작을 방지하고 사용자에게

경고 나는 다음과 같은 스크립트가 :jQuery를 : 기본 양식 동작을 방지하고 사용자에게

<script type="text/javascript"> 
$(document).ready(function(){ 

$("#ProjModelChoose").change(function() { 
    $("#ProjModelChooseCOM").attr("name","form" + $(this).val()); 
    $("input[name='buyid']").attr("value", $(this).val()); 
}); 

$("#ProjModelChoose2").change(function() { 
    $("#ProjModelChooseOEM").attr("name","form" + $(this).val()); 
    $("input[name='buyid']").attr("value", $(this).val()); 
}); 

$(".atcButton").click(function() { 
    if($("select option:selected").val("Choose Your Projector Model")) { 
    event.preventDefault(); 
    alert("Please choose a projector model"); 
    } 
    }); 
}); 
</script>

html로 :

<table cellpadding="0" cellspacing="0" border="0"> 
<tr> 
<span>Purchase today for: </span><h3 class="atcPrice">$192</h3> 
<select name="chooseModelOEM" id="ProjModelChoose"> 
<option value="Choose Your Projector Model">Choose Your Projector Model</option> 
<option value="126648">PLC-SU70</option> 
<option value="126682">PLC-WXE45</option> 
<option value="126684">PLC-WXE46</option> 
<option value="126686">PLC-WXL46</option> 
<option value="126717">PLC-XE40</option> 
<option value="126719">PLC-XE45</option> 
<option value="126795">PLC-XL40</option> 
<option value="126797">PLC-XL45</option> 
<option value="126998">PLC-XU73</option> 
<option value="127000">PLC-XU74</option> 
<option value="127006">PLC-XU83</option> 
<option value="127008">PLC-XU84</option> 
<option value="127010">PLC-XU86</option> 
<option value="127012">PLC-XU87</option> 
</select> 
<form name="" action='someaction' method=post id="ProjModelChooseCOM" target="_blank"><input type='hidden' name='buyid' value=""><input type='hidden' name='c' value="1025622"><input type='hidden' name='n' value='5'><td class='text'><input name='add' id='add' size=4 value=1 class='qtyButton' border="0" ></td><td class='text'><input type="image" src="olp-atcbutbg.png" border='0' value='Add to Cart' alt='Add to Cart' class='atcButton'></td></form> 
</tr> 
</table>

좋아, 그래서 기본적으로 내가 선택한 옵션의 값에 삽입하고 유저가 드롭 다운을 선택했을 때의 형식. 그건 잘 작동합니다. 그러나 사용자가 선택을하지 않으면 ("프로젝터 모델 선택"에 드롭 다운을 남김) 제품을 장바구니에 추가하려고하면 양식 제출을 중단해야합니다 (동적이므로 수행하려고 시도합니다). 관계 없음) 경고를 표시합니다. 내 위의 코드는 수행하지도 =/

출처

2012-02-16 user1098767

양식에 선택 태그가 있는지 확인하고 해당 값을 확인하는 것이 좋습니다. 이런 식으로, 모든 것은 당신의 형식으로 범위가 정해집니다. 나는 http://jsfiddle.net/3NMDd/을 편집했다. – iGbanam

나는 @Yasky에 동의한다. HTML을 더 유효하게 만들 것이고 실제로 으로 값을 복사 할 필요가 없습니다. 이전에 이것을 언급하는 것을 잊어 버렸습니다. –

내일 새로운 제안을 직장에서 시도해 볼 것입니다. 그러나 숨겨진 입력에 값을 복사 할 필요가 없다는 것을 어떻게 의미합니까? 양식 제출이 하나뿐이므로 숨겨진 필드의 값은 선택한 항목에 따라 변경해야합니다. – user1098767

이 시도하지 :

$(".atcButton").click(function() { 
    if($("select option:selected").val() === "Choose Your Projector Model") { 
     alert("Please choose a projector model"); 
     return false; 
    } 
});

는 또한 $(".atcButton").click()에서 $("#ProjModelChooseCOM").submit()에 이벤트 핸들러를 변경할 수 있습니다.

업데이트 미안하지만이 문제에 대해 오해했습니다. 가치 비교 문제를 해결하기 위해 편집 됨.

출처

2012-02-16 22:05:08

시도해 보았지만 작동하지 않았습니다. 선택 목록의 기본 옵션이 실제로 JS에 의해 "선택"으로 간주됩니까? 어쩌면 그게 문제 야. – user1098767

죄송합니다. 나는 두 가지 문제가 있다는 것을 놓쳤다. 위의 코드는 조금 더 잘 작동합니다. –

업데이트 된 코드를 시도했지만 경고없이 양식을 계속 제출합니다. – user1098767

이 시도 :

$(".atcButton").click(function(event) { 
    if($("select option:selected").val() === "Choose Your Projector Model") { 
     event.preventDefault(); 
     alert("Please choose a projector model"); 
     } 
    }); 
});

내가 클릭의 결과로 불리는 익명 함수에 대한 인수로 "이벤트"를 추가했다.

업데이트 : 값 비교 코드가 변경되었습니다.

출처

2012-02-16 22:08:29 itsmequinn

그게 효과가! 감사합니다 : D – user1098767

사실, 그것은 작동하지 않았다, 미안 해요. 그것은 내가 선택한 것을 무시하고 경고를 표시하고 양식을 취소합니다. – user1098767

좋아, 값 비교 부분을 업데이트했습니다. 한 번 더 해보십시오. – itsmequinn

$(".atcButton").click(function(event) { 
    if($("select option:selected").index() == 0) { 
    alert("Please choose a projector model"); 
     event.preventDefault();  
    } 
});

시도해보십시오.

출처

2012-02-16 22:48:26 littlealien

jQuery를 : 기본 양식 동작을 방지하고 사용자에게

답변

관련 문제