특정 입력 필드와 전체 양식 간의 표시 간 전환 양식

Question

페이지에 다른 페이지에 게시 된 작업을 관리하는 양식이 있습니다. 이 양식에는 구인 게시가 승인 또는 거부되는지를 결정하는 몇 가지 주요 필드가 있습니다. 양식을 처음에는 선택 프로세스의 중요 또는 핵심으로 지정된 필드 만 표시하도록하겠습니다. 또한 리뷰어가 검토중인 특정 작업에 대한 자세한 정보를 원할 경우 전체 양식을 표시하는 토글 버튼이 있습니다.

중요한 필드를 어떻게 지정합니까?

어떻게 필드와 전체 양식을 전환합니까?

<div class="row"> 
<div class="col-md-8 col-md-offset-2 col-sm-6 col-sm-offset-3"> 
    <div class="w-section inverse"> 
     <div class="w-box sign-in-wr bg-5"> 
      <div class="form-body"> 
       <h5> 
        Please provide the following information about employment opportunity. 
       </h5> 
       <div class="row"> 
        <form class="form-light padding-20" id="addJob"> 
         <div class="form-group"> 
          <div class="col-lg-6"> 
           <label style="font-size:16px;" data-for="title">Title</label> 
           <input type="text" class="form-control" name="title" id="title" placeholder=""> 
          </div> 
          <div class="col-md-12"> 
           <label style="font-size:16px;" data-for="salary">Salary</label> 
           <input type="text" class="form-control" name="salary" id="salary" placeholder=""> 
          </div> 
          <div class="col-lg-12"> 
           <label style="font-size:16px;" data-for="location">Location</label> 
           <input type="text" class="form-control" name="location" id="location" placeholder=""> 
          </div> 
          <div class="col-lg-4"> 
           <label style="font-size:16px;" data-for="company">Company</label> 
           <input type="text" class="form-control" name="company" id="company" placeholder=""> 
          </div> 
          <div class="col-lg-4"> 
           <label style="font-size:16px;" data-for="jobDescription">Job Description</label> 
           <input type="text" class="form-control" name="jobdescription" id="jobdescription" placeholder=""> 
          </div> 
          <div class="col-lg-2"> 
           <label style="font-size:16px;" data-for="industry">Industry</label> 
           <input type="text" class="form-control" name="industry" id="industry" placeholder=""> 
           <label class="checkbox"><input type="checkbox" name="profit" id="profit">Profit</a></label> 
           <label class="checkbox"><input type="checkbox" name="nonprofit" id="nonprofit">Non-Profit</a></label> 
          </div> 
          <div class="col-lg-2"> 
           <label style="font-size:16px;" data-for="experience">Experience</label> 
           <input type="text" class="form-control" name="experience" id="experience" placeholder=""> 
          </div> 
          <div class="col-lg-2"> 
           <label style="font-size:16px;" data-for="reqSkills">Skills required</label> 
           <select name="requiredSkillsDropdown"> 
            <option value="HTML5">HTML5</option> 
            <option value="CS3">CS3</option> 
            <option value="javascrip">Javascript</option> 
            <option value="jquery">jQuery</option> 
           </select> 
          </div> 
          <div class="col-lg-6"> 
           <label style="font-size:16px;" data-for="workexp">Address</label> 
           <input type="text" class="form-control" name="street" id="street" placeholder="Street"> 
           <input type="text" class="form-control" name="city" id="city" placeholder="City"> 
           <input type="text" class="form-control" name="state" id="state" placeholder="State"> 
           <input type="text" class="form-control" name="zip" id="zip" placeholder="Zip"> 
          </div> 
          <div class="col-lg-4"> 
           <label style="font-size:16px;" data-for="contact">Contact</label> 
           <input type="text" class="form-control" name="contact" id="zip" placeholder=""> 
          </div> 
          <div class="col-lg-12"> 
           <button class="btn btn-two pull-right" id="capturejobinfo" type="button">Submit</button> 
          </div> 
         </div> 
        </form> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

들이이 중요한 경우 사용자 정의 data-* 속성이 나타내는 입력을위한 컨테이너를 보내기

지금까지이 양식이있다 (중요 입력 산업, 경험과 기술이 필요하다) 여부 (위에서 샘플)

<div class="col-lg-2" data-critical="true"> 
    <label style="font-size:16px;" data-for="experience">Experience</label> 
    <input type="text" class="form-control" name="experience" id="experience" placeholder=""> 
</div> 

및 다른 사람을위한

는 data-critical에 대한 false를 사용합니다.

$("div.form-group div[data-critical=true]").show(); //to show 

또는 .hide() 숨길 : 당신은 전환 할 수 있습니다.