javascript - 在表单上可见隐藏/显示后向表单添加必需属性

标签 javascript php css codeigniter

该表单有 3 组字段，用户可以使用这些字段来添加他们的教育背景。 fastdropdown js 用于添加更多或显示隐藏字段，只要它打开/显示在 form

上，我就需要它 

<legend>Education:</legend>
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="Year_of_Degree">Year Of Degree *:</label>
    <div class="col-sm-9">
                        <select name="Year_of_Degree" class="Year_of_Degree form-control fstdropdown-select" id="Year_of_Degree">
                        <option value="" <?php echo  set_select('Year_of_Degree', ''); ?> >-Select-</option>
                        <?php for($year = 2019; $year >=1970; $year--){ ?>
                        <option value="<?php echo $year?>" <?php echo set_select('Year_of_Degree', $year); ?>><?php echo $year?></option>
                        <?php }?>
                        </select>           
</div>
                        </div>
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="Class_of_Degree">Class Of Degree *:</label>
    <div class="col-sm-9">
                        <select name="Class_of_Degree"class="Class_of_Degree form-control required" id="Class_of_Degree">
                        <option value="" <?php echo  set_select('Class_of_Degree', ''); ?> >-Select-</option>
                        <option value="First Class Honours" <?php echo  set_select('Class_of_Degree', 'First Class Honours'); ?> >First Class Honours</option>
                        <option value="Second Class Honours – Upper Division" <?php echo  set_select('Class_of_Degree', 'Second Class Honours – Upper Division'); ?> >Second Class Honours – Upper Division</option>
                        <option value="Second Class Honours – Lower Division" <?php echo  set_select('Class_of_Degree', 'Second Class Honours – Lower Division'); ?> >Second Class Honours – Lower Division</option>
                        <option value="Third Class Honours" <?php echo  set_select('Class_of_Degree', 'Third Class Honours'); ?> >Third Class Honours</option>
                       
                        <option value="Distinction" <?php echo  set_select('Class_of_Degree', 'Distinction'); ?> >Distinction</option>
                        <option value="Upper Credit" <?php echo  set_select('Class_of_Degree', 'Upper Credit'); ?> >Upper Credit</option>
                        <option value="Lower Credit" <?php echo  set_select('Class_of_Degree', 'Lower Credit'); ?> >Lower Credit</option>
                        <option value="Merit" <?php echo  set_select('Class_of_Degree', 'Merit'); ?> >Merit</option>
                        <option value="Pass" <?php echo  set_select('Class_of_Degree', 'Pass'); ?> >Pass</option>
                        <option value="Fail" <?php echo  set_select('Class_of_Degree', 'Fail'); ?> >Fail</option>
                       
                        </select>
                        </div>
                        </div>
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="Institution">Institution *:</label>
    <div class="col-sm-9">
                        <select name="Institution" class="Institution form-control fstdropdown-select" id="Institution">
                        <option value="" <?php echo  set_select('Institution', ''); ?> >-Select-</option>
                        <?php if($institution_list){
                        foreach($institution_list as $institution){ ?>
                        <option value="<?php echo $institution->idinstitution?>" <?php echo set_select('Institution', $institution->idinstitution); ?>><?php echo $institution->institution?></option>
                        <?php }
                        }?>
                        </select>
                        </div>
                        </div>
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="Degree_Type">Degree Type *:</label>
    <div class="col-sm-9">
                        <select name="Degree_Type"class="Degree_Type form-control required" id="Degree_Type">
                        <option value="" <?php echo  set_select('Degree_Type', ''); ?> >-Select-</option>
                        <option value="OND" <?php echo  set_select('Degree_Type', 'OND'); ?> >OND</option>
                        <option value="HND" <?php echo  set_select('Degree_Type', 'HND'); ?> >HND</option>
                        <option value="Associate’s Degree" <?php echo  set_select('Degree_Type', 'Associate’s Degree'); ?> >Associate’s Degree</option>
                        <option value="Bachelor’s Degree" <?php echo  set_select('Degree_Type', 'Bachelor’s Degree'); ?> >Bachelor’s Degree</option>
                        <option value="Master’s Degree" <?php echo  set_select('Degree_Type', 'Master’s Degree'); ?> >Master’s Degree</option>
                        <option value="Professional Degree" <?php echo  set_select('Degree_Type', 'Professional Degree'); ?> >Professional Degree</option>
                        <option value="Doctorate Degree" <?php echo  set_select('Degree_Type', 'Doctorate Degree'); ?> >Doctorate Degree</option>
                       
                       
                        </select>
                        </div>
                        </div>
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="Course_of_Study">Course Of Study *:</label>
    <div class="col-sm-9">
                        <input type="text" name="Course_of_Study" placeholder="Course Of Study..." class="Course_of_Study form-control" id="Course_of_Study" value="<?php echo set_value('Course_of_Study', ''); ?>" >           
</div>
                        </div>
                        <div id="qualification2" class="row-fluid">
                        <hr style="border: 1px solid #ccc;" />                        
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="Year_of_Degree1">Year Of Degree :</label>
    <div class="col-sm-9">
                        <select name="Year_of_Degree1" class="Year_of_Degree1 form-control fstdropdown-select" id="Year_of_Degree1">
                        <option value="" <?php echo  set_select('Year_of_Degree1', ''); ?> >-Select-</option>
                        <?php for($year = 2019; $year >=1970; $year--){ ?>
                        <option value="<?php echo $year?>" <?php echo set_select('Year_of_Degree1', $year); ?>><?php echo $year?></option>
                        <?php }?>
                        </select>         
</div>
                        </div>
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="Class_of_Degree1">Class Of Degree:</label>
    <div class="col-sm-9">
                        <select name="Class_of_Degree1"class="Class_of_Degree1 form-control required" id="Class_of_Degree1">
                        <option value="" <?php echo  set_select('Class_of_Degree1', ''); ?> >-Select-</option>
                        <option value="First Class Honours" <?php echo  set_select('Class_of_Degree1', 'First Class Honours'); ?> >First Class Honours</option>
                        <option value="Second Class Honours – Upper Division" <?php echo  set_select('Class_of_Degree1', 'Second Class Honours – Upper Division'); ?> >Second Class Honours – Upper Division</option>
                        <option value="Second Class Honours – Lower Division" <?php echo  set_select('Class_of_Degree1', 'Second Class Honours – Lower Division'); ?> >Second Class Honours – Lower Division</option>
                        <option value="Third Class Honours" <?php echo  set_select('Class_of_Degree1', 'Third Class Honours'); ?> >Third Class Honours</option>
                       
                        <option value="Distinction" <?php echo  set_select('Class_of_Degree1', 'Distinction'); ?> >Distinction</option>
                        <option value="Upper Credit" <?php echo  set_select('Class_of_Degree1', 'Upper Credit'); ?> >Upper Credit</option>
                        <option value="Lower Credit" <?php echo  set_select('Class_of_Degree1', 'Lower Credit'); ?> >Lower Credit</option>
                        <option value="Merit" <?php echo  set_select('Class_of_Degree1', 'Merit'); ?> >Merit</option>
                        <option value="Pass" <?php echo  set_select('Class_of_Degree1', 'Pass'); ?> >Pass</option>
                        <option value="Fail" <?php echo  set_select('Class_of_Degree1', 'Fail'); ?> >Fail</option>
                       
                        </select>
                        </div>
                        </div>
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="institution1">Institution:</label>
    <div class="col-sm-9">
                        <select name="institution1" class="institution1 form-control fstdropdown-select" id="institution1">
                        <option value="" <?php echo  set_select('institution1', ''); ?> >-Select-</option>
                        <?php if($institution_list){
                        foreach($institution_list as $institution){ ?>
                        <option value="<?php echo $institution->idinstitution?>" <?php echo set_select('institution1', $institution->idinstitution); ?>><?php echo $institution->institution?></option>
                        <?php }
                        }?>
                        </select>
                        </div>
                        </div>
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="Degree_Type1">Degree Type:</label>
    <div class="col-sm-9">
                        <select name="Degree_Type1"class="Degree_Type1 form-control required" id="Degree_Type1">
                        <option value="" <?php echo  set_select('Degree_Type1', ''); ?> >-Select-</option>
                        <option value="OND" <?php echo  set_select('Degree_Type1', 'OND'); ?> >OND</option>
                        <option value="HND" <?php echo  set_select('Degree_Type1', 'HND'); ?> >HND</option>
                        <option value="Associate’s Degree" <?php echo  set_select('Degree_Type1', 'Associate’s Degree'); ?> >Associate’s Degree</option>
                        <option value="Bachelor’s Degree" <?php echo  set_select('Degree_Type1', 'Bachelor’s Degree'); ?> >Bachelor’s Degree</option>
                        <option value="Master’s Degree" <?php echo  set_select('Degree_Type1', 'Master’s Degree'); ?> >Master’s Degree</option>
                        <option value="Professional Degree" <?php echo  set_select('Degree_Type1', 'Professional Degree'); ?> >Professional Degree</option>
                        <option value="Doctorate Degree" <?php echo  set_select('Degree_Type1', 'Doctorate Degree'); ?> >Doctorate Degree</option>
                       
                       
                        </select>
                        </div>
                        </div>
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="Course_of_Study1">Course Of Study:</label>
    <div class="col-sm-9">
                        <input type="text" name="Course_of_Study1" placeholder="Course Of Study..." class="Course_of_Study1 form-control" id="Course_of_Study1" value="<?php echo set_value('Course_of_Study1', ''); ?>" >           
</div>
                        </div>
                        </div>
                        <div id="qualification3" class="row-fluid">
                        <hr style="border: 1px solid #ccc;" />                        
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="Year_of_Degree2">Year Of Degree:</label>
    <div class="col-sm-9">
                        <select name="Year_of_Degree2" class="Year_of_Degree2 form-control fstdropdown-select" id="Year_of_Degree2">
                        <option value="" <?php echo  set_select('Year_of_Degree2', ''); ?> >-Select-</option>
                        <?php for($year = 2019; $year >=1970; $year--){ ?>
                        <option value="<?php echo $year?>" <?php echo set_select('Year_of_Degree2', $year); ?>><?php echo $year?></option>
                        <?php }?>
                        </select>         
</div>
                        </div>
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="Class_of_Degree2">Class Of Degree:</label>
    <div class="col-sm-9">
                        <select name="Class_of_Degree2"class="Class_of_Degree2 form-control required" id="Class_of_Degree2">
                        <option value="" <?php echo  set_select('Class_of_Degree2', ''); ?> >-Select-</option>
                        <option value="First Class Honours" <?php echo  set_select('Class_of_Degree2', 'First Class Honours'); ?> >First Class Honours</option>
                        <option value="Second Class Honours – Upper Division" <?php echo  set_select('Class_of_Degree2', 'Second Class Honours – Upper Division'); ?> >Second Class Honours – Upper Division</option>
                        <option value="Second Class Honours – Lower Division" <?php echo  set_select('Class_of_Degree2', 'Second Class Honours – Lower Division'); ?> >Second Class Honours – Lower Division</option>
                        <option value="Third Class Honours" <?php echo  set_select('Class_of_Degree2', 'Third Class Honours'); ?> >Third Class Honours</option>
                       
                        <option value="Distinction" <?php echo  set_select('Class_of_Degree2', 'Distinction'); ?> >Distinction</option>
                        <option value="Upper Credit" <?php echo  set_select('Class_of_Degree2', 'Upper Credit'); ?> >Upper Credit</option>
                        <option value="Lower Credit" <?php echo  set_select('Class_of_Degree2', 'Lower Credit'); ?> >Lower Credit</option>
                        <option value="Merit" <?php echo  set_select('Class_of_Degree2', 'Merit'); ?> >Merit</option>
                        <option value="Pass" <?php echo  set_select('Class_of_Degree2', 'Pass'); ?> >Pass</option>
                        <option value="Fail" <?php echo  set_select('Class_of_Degree2', 'Fail'); ?> >Fail</option>
                       
                        </select>
                        </div>
                        </div>
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="institution2">Institution:</label>
    <div class="col-sm-9">
                        <select name="institution2" class="institution2 form-control fstdropdown-select" id="institution2">
                        <option value="" <?php echo  set_select('institution2', ''); ?> >-Select-</option>
                        <?php if($institution_list){
                        foreach($institution_list as $institution){ ?>
                        <option value="<?php echo $institution->idinstitution?>" <?php echo set_select('institution2', $institution->idinstitution); ?>><?php echo $institution->institution?></option>
                        <?php }
                        }?>
                        </select>
                        </div>
                        </div>
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="Degree_Type2">Degree Type:</label>
    <div class="col-sm-9">
                        <select name="Degree_Type2"class="Degree_Type2 form-control required" id="Degree_Type2">
                        <option value="" <?php echo  set_select('Degree_Type2', ''); ?> >-Select-</option>
                        <option value="OND" <?php echo  set_select('Degree_Type2', 'OND'); ?> >OND</option>
                        <option value="HND" <?php echo  set_select('Degree_Type2', 'HND'); ?> >HND</option>
                        <option value="Associate’s Degree" <?php echo  set_select('Degree_Type2', 'Associate’s Degree'); ?> >Associate’s Degree</option>
                        <option value="Bachelor’s Degree" <?php echo  set_select('Degree_Type2', 'Bachelor’s Degree'); ?> >Bachelor’s Degree</option>
                        <option value="Master’s Degree" <?php echo  set_select('Degree_Type2', 'Master’s Degree'); ?> >Master’s Degree</option>
                        <option value="Professional Degree" <?php echo  set_select('Degree_Type2', 'Professional Degree'); ?> >Professional Degree</option>
                        <option value="Doctorate Degree" <?php echo  set_select('Degree_Type2', 'Doctorate Degree'); ?> >Doctorate Degree</option>
                       
                       
                        </select>
                        </div>
                        </div>
                        <div class="form-group row">
                        <label  class="col-sm-3 col-form-label" for="Course_of_Study2">Course Of Study:</label>
    <div class="col-sm-9">
                        <input type="text" name="Course_of_Study2" placeholder="Course Of Study..." class="Course_of_Study2 form-control" id="Course_of_Study2" value="<?php echo set_value('Course_of_Study2', ''); ?>" >           
</div>
                        </div>
                        </div>
                        <div class="row-fluid text-right" id="degreeBtn1">
                        <input type="button" class="addDegree2" value="+ Add Degree" />
                        <hr style="border: 1px solid #ccc;" />
                        </div>
                        <div class="row-fluid text-right" id="degreeBtn2">
                        <input type="button" class="addDegree3" value="+ Add Degree" />
                        <input type="button" class="removeDegree2" value="- Remove Degree" />
                        <hr style="border: 1px solid #ccc;" />
                        </div>
                        <div class="row-fluid text-right" id="degreeBtn3">
                        <input type="button" class="removeDegree3" value="- Remove Degree" />
                        <hr style="border: 1px solid #ccc;" />
                        </div>

如果有人能告诉我如何在表单上显示必填字段属性时将其附加到字段列表，我将不胜感激

最佳答案

您需要 CSS 中的 :required 伪类。例如:

/* style all input elements with a required attribute */
input:required {
  box-shadow: 4px 4px 20px rgba(200, 0, 0, 0.85);
}

/**
 * style input elements that have a required
 * attribute and a focus state
 */
input:required:focus {
  border: 1px solid red;
  outline: none;
}

/**
 * style input elements that have a required
 * attribute and a hover state
 */
input:required:hover {
  opacity: 1;
}

取自此处:https://css-tricks.com/almanac/selectors/r/required/

当然，您可以创建占位符和类似的东西来增强您的设计。

关于javascript - 在表单上可见隐藏/显示后向表单添加必需属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58626970/

上一篇：html - 选择图像时显示/隐藏按钮

下一篇：javascript - 在 HTML 中具有自定义按钮样式的输入文件

相关文章：

Javascript:在 div 上执行的 scrollBy 函数

javascript - 根据 body id 向元素添加类

javascript - 如何使用 jQuery/Javascript 模拟单击​​在新选项卡/窗口中打开的链接？

javascript - 复选框不显示为图像

html - 如何证明两个 HTML 页面看起来相同？

javascript - 如何检查 Angular 中的日期是否低于 4 年？

INET_NTOA 和 INET_ATON 的 PHP 等价物

javascript - 在 angularJs 中从 Controller 调用同时 $http 服务？

php - 根据 Woocommerce 中的特定产品属性值更改购物车商品价格

javascript - 如何在 gridview 行内展开/折叠时应用过渡效果

©2024 IT工具网  联系我们