javascript - Make the current select menu hidden and and show the hidden input above it -
i creating dynamic inputs form using javascript. having problem when select dropdown no hidden element should shown required attr , current select dropdown should hidden.so far code:
<div id="work"> <div class="form boxed "> <a href="#" class="close-form remove-box button"><i class="fa fa-close"></i></a> <input class="search-field" type="text" placeholder="job title" maxlength="100" /> <input class="search-field" type="text" placeholder="company name" maxlength="255" /> <input class="search-field" type="text" placeholder="location" value=""/> <input type="text" class="datepicker-here" data-language="en" data-min-view="months" data-view="months" data-date-format="mm yyyy" placeholder="enter start date" /> <input type="text" class="datepicker-here" data-language="en" data-min-view="months" data-view="months" data-date-format="mm yyyy" placeholder="enter end date" style="display: none" /> <label>are still working ?</label> <select style="padding: 12px" required onchange="yesnocheck(this);"> <option value="">select option</option> <option value="present">yes</option> <option value="no">no</option> </select> </div> </div> <a href="javascript:void(0)" onclick="addinput2('work');" class="button gray "><i class="fa fa-plus-circle"></i> add more</a> this javascript function creating dynamic inputs:
function addinput2(divname){ var newdiv = document.createelement('div'); newdiv.innerhtml = "<div class='form boxed '> <a href='#' class='close-form remove-box button'><i class='fa fa-close'></i></a> <input class='search-field' type='text' placeholder='job title' value='' maxlength='100' /> <input class='search-field' type='text' placeholder='company name' maxlength='255' /> <input class='search-field' type='text' placeholder='location' value=''/> <input type='text' class='datepicker-here' data-language='en' data-min-view='months' data-view='months' data-date-format='mm yyyy' placeholder='enter start date' /> <input type='text' class='datepicker-here' data-language='en' data-min-view='months' data-view='months' data-date-format='mm yyyy' style='display: none' placeholder='enter end date' /> <label>are still working ?</label> <select style='padding: 12px' required onchange=''> <option value=''>select option</option> <option value='present'>yes</option> <option value='no'>no</option> </select> </div>"; document.getelementbyid(divname).appendchild(newdiv); } this function should work, far able current selected value
function yesnocheck(that) { if (that.value == "no") { } else { } }
first, need uniquely identify each occurrence of select , hidden input, can interact them.
for reason, put variable jubnum outside addinput2() function, , increment each time function called. using variable, can assign unique id's elements need interact each other.
once can uniquely identify select in question, , input in question, can use display = block show input, , required = true give required attribute.
var jobnum = 1; function addinput2(divname){ var newdiv = document.createelement('div'); newdiv.innerhtml = "<div class='form boxed'><a href='#' class='close-form remove-box button'><i class='fa fa-close'></i></a><input class='search-field' type='text' placeholder='job title' value='' maxlength='100' /> <input class='search-field' type='text' placeholder='company name' maxlength='255' /><input class='search-field' type='text' placeholder='location' value=''/><input type='text' class='datepicker-here' data-language='en' data-min-view='months' data-view='months' data-date-format='mm yyyy' placeholder='enter start date' /><input id='job"+jobnum+"end' type='text' class='datepicker-here' data-language='en' data-min-view='months' data-view='months' data-date-format='mm yyyy' style='display: none' placeholder='enter end date' /><label>are still working ?</label><select id='job"+jobnum+"' style='padding: 12px' required onchange='yesnocheck(this);'><option value=''>select option</option><option value='present'>yes</option><option value='no'>no</option></select></div>"; jobnum++; document.getelementbyid(divname).appendchild(newdiv); } function yesnocheck(that) { if (that.value == "no") { document.getelementbyid(that.id + 'end').style.display = 'block'; document.getelementbyid(that.id + 'end').required = true; } else { document.getelementbyid(that.id + 'end').style.display = 'none'; document.getelementbyid(that.id + 'end').required = false; } }<div id="work"> <div class="form boxed"> <a href="#" class="close-form remove-box button"><i class="fa fa-close"></i></a> <input class="search-field" type="text" placeholder="job title" maxlength="100" /> <input class="search-field" type="text" placeholder="company name" maxlength="255" /> <input class="search-field" type="text" placeholder="location" value=""/> <input type="text" class="datepicker-here" data-language="en" data-min-view="months" data-view="months" data-date-format="mm yyyy" placeholder="enter start date" /> <input id="job0end" type="text" class="datepicker-here" data-language="en" data-min-view="months" data-view="months" data-date-format="mm yyyy" placeholder="enter end date" style="display: none" /> <label class="no">are still working ?</label> <select id="job0" class="noo" style="padding: 12px" required onchange="yesnocheck(this);"> <option value="">select option</option> <option value="present">yes</option> <option value="no">no</option> </select> </div> </div> <a href="javascript:void(0)" onclick="addinput2('work');" class="button gray "><i class="fa fa-plus-circle"></i> add more</a>
Comments
Post a Comment