2013-02-20 2 views
0

현재 기본 필드가있는 양식이 있습니다. 나는 필요에 따라 내 사용자가이 양식을 편집 할 수 있어요입력 필드 값을 기반으로 양식을 제출합니다.

<input name="model" type="text"> 
<input name="esn" type="text"> 
<select name="status"> 
    <option value="Pending">Pending</option> 
    <option value="Ordered">Ordered</option> 
    <option value="Received">Received</option> 
</select> 
<input type="submit" value="Save Order or Add Payment" /> 

, 그래서 기본적으로 모델이 주문 된 경우 그들은 그들이 DB에 저장 후, 주문 등의 상태를 설정합니다. 그것들은 정상적으로 작동하지만 상태를 수신자가 선택하고 제출 버튼을 클릭하면 ESN이 비어 있지 않은지 먼저 확인해야한다는 조건을 추가하고 싶습니다. esn 필드에서 "필수"를 설정할 수 있다는 것을 알고 있지만, 그렇게하면 사용자에게 항상 ESN을 입력하라는 메시지가 표시되며 상태로 수신을 선택할 때 입력해야합니다. 우리는 주문을 추적하는 방법으로 양식을 사용하고 실제로 배송을 받기 전까지는 해당 제품을받지 못합니다.

이 조건을 처리하는 방법에 대한 조언을 구하십시오. 읽어 주셔서 감사합니다.

답변

4

그런 다음 addClass removeClass 함수를 사용할 수 있습니다. 수신 된 옵션을 선택할 때 필요한 클래스를 추가하십시오.

<input name="esn" id="esn" type="text"> 
<select name="status" id="status"> 


$(document).ready(function(){ 
    $('#status').change(function(){ 
     if($(this).val() == 'Received') 
      $('#esn').addClass('required'); 
     else 
      $('#esn').removeClass('required'); 
    }); 
}); 
+0

필요를 닫 없습니다. 또한 코드를 수정하여 코드를 수정하여 상태가 아닌 ESN에 클래스를 추가하십시오. – Techmonk

+1

클래스를 추가하는 것에 대해 말하고 있기 때문에 jQuery를 통해 양식의 유효성을 검사해야합니다. 그리고 나는 이미 정정했다. 어쨌든, 고마워요 – hsuk

+0

jQuery를 배우려고 노력하지만이 대신 addClas를 사용하기로 결정했습니다. 대신 attr을 사용했습니다. 고맙습니다. –

1

당신이 자바 스크립트를 사용하여 달성 할 수있는이 심지어 jQuery를

2
<form method='post' action='somesite.php'> 
     <input name="model" type="text"> 
     <input name="esn" type="text"> 
     <select name="status"> 
      <option value="Pending">Pending</option> 
      <option value="Ordered">Ordered</option> 
      <option value="Received">Received</option> 
     <input type="submit" value="Save Order or Add Payment" onclick='return validate();' /> 
    </form> 

    <script> function validate() { 
     if(document.getElementsByName('esn')[0].value == "") 
{ 
alert ('ESN is Empty'); 
return false; 
} 
     return true 
    } </script> 

처럼 뭔가를 값을 확인할 수 있습니다. esn이 비어있는 경우 사용자가 수신을 선택했는지 확인하는 조건을 작성하여 false를 반환하거나 경고를 표시합니다.

function checkReceived() 
     { 
      var s = document.getElementById('status'); 
      var item1 = s.options[s.selectedIndex].value; 
      if(item1=='Received') 
      { 
       alert("ens should not empty"); 
       return false; 
      } 
      else 
      { 
       return true; 
      } 
     } 



<input type="button" value="Save Order or Add Payment" onclick='checkReceived()'/> 

추가 선택 상자에서 ID와는 선택 상자를 같은 간단한 작업을 위해 jQuery를 사용하는 제대로

1

없이 u를 위해 작동 제출에 함수를 호출

<input type="button" value="Save Order or Add Payment" onclick="validate(this.form)"/> 

function validate(form) 
{ 
if (document.getElementByName(status).value==="Recieved" && document.getElementByName(esn).value==="") 
    alert("Please fill ESN"); 
else 
    form.submit(); 

} 
관련 문제