'입력'을 눌러 양식 완성을 비활성화하십시오.

Question

선택이 이루어질 때까지 제출 버튼을 숨기는 양식이 있습니다. 선택 항목이 유효하지 않은 경우 (예 : 재고가 없거나 제품을 사용할 수없는 경우) 제출 버튼이 표시되지 않습니다.

HTML/PHP :

<select id="choice" name="conc" required="required" onChange="appearButton();"> 
    <option selected="selected" value="" disabled="disabled">select an option</option> 
    <option value="0">choice</option> 
</select> 
Qty: <input type="text" size="2" maxlength="2" value="1" name="qty" required="required"/><br/> 
<span id="availability">Select Option to see Stock Availability</span><br/> <?php 
//SQL related to checking if stock is avail. or not would go here 
if ($checkstock->rowCount() == 0) { 
    echo "This item is currently unavailable."; 
} else { 
    echo '<span id="cartbutton"></span>'; 
} ?> 

JS :

function appearButton() { 
    if (($("#availability").text() != "Out of Stock") 
    && ($("#availability").text() != "Select Options to see Stock Availability")) { 
     $("#cartbutton").html('<input type="submit" value="Add to Cart"/>'); 
    } else { 
     $("#cartbutton").text(""); 
    } 
} 

#availability 변경 #choice 드롭 선택에 따라서는 JSON 객체의 값을 잡는다.

내 선택은 입력 한 내용이 유효하지 않은 경우 제출 버튼이 존재하지 않지만 qty 입력란에 들어가서 제출 버튼이 없어도 제출한다는 것입니다.

특정 인스턴스에서 반환 될 때 양식 제출을 사용하지 않도록 설정하는 가장 좋은 방법은 무엇입니까? 항목이 유효한 경우 입력시 제출 양식을 작성하고 싶지 않지만 사용할 수없는 옵션을 원합니다.

Answer 1

visible/invisible에서 enabled/disabled로 변경하는 것이 좋습니다. 물론 UX이 아닙니다.

<form>의 경우 보길 원하는 내용은 onsubmit입니다.

예 : 나는 그냥 같은 논리를 복사하여 양식이 제출해서는 안 경우는 false를 돌려 만든

function checkState() { 
    if (($("#availability").text() == "Out of Stock") || ($("#availability").text() == "Select Options to see Stock Availability")) 
     return false; 
    return true; 
} 

: 자바 스크립트 함수를 포함 할 것

<form onsubmit="checkState()" ...other attributes...> 
    ...form elements... 
</form> 

합니다. 그런 다음 checkState에서 실행 (DRY)를 당신의 appearButton를 다시 작성할 수 있습니다 : 제거,

function appearButton() { 
    if (!checkState()) 
     $("#cartbutton").html('<input type="submit" value="Add to Cart"/>'); 
    else 
     $("#cartbutton").text(""); 
}