基于选择选项的JavaScript动态表单生成

Question

我有一个小的javascript问题（我不知道JavaScript，我刚开始学习一点）。

因此，它是这样的：

• 我有应该根据HTML选择标签中选择一个选项，它应该有在选择三个选项加载一组特定字段的形式。
  • 选择选项
  • 报价
  • 电子邮件

我认识的人告诉我，使用交换机/案例做一些事情，但说实话，我不知道从哪里开始改变。 我试图做一些与隐藏/块东西在CSS为了隐藏/显示特定的表格div根据选定的选项，但它不适用于我给我以下问题：

• 当我使用的形式提交按钮整个表单消失，这样是不应该发生

• 我有了两个div的同一名称的文本字段，第二件事-url-而且由于输入被隐藏但如果我在-offer部分中写入url，它仍会出现在页面 中，它会将其设置为空白，因为em中的-url-字段（隐藏在当前和提供部分之下）表单的所有部分都是空白的。

我希望很清楚，如果您有任何问题，请问我！ 下面的代码：

<script type="text/javascript" > 
 
     
 
$(document).ready(function(){ 
 
     $("select").change(function(){ 
 
      $("select option:selected").each(function(){ 
 
       if($(this).attr("value")=="offer"){ 
 
        $(".choose").hide(); 
 
        $(".offer").show(); 
 
        alert(attr("value")); 
 
       } 
 
       if($(this).attr("value")=="email"){ 
 
        $(".choose").hide(); 
 
        $(".email").show(); 
 
       } 
 
       if($(this).attr("value")=="choose"){ 
 
        $(".choose").hide(); 
 
        $(".choose1").show(); 
 
       } 
 
      }); 
 
     }).change(); 
 
    }); 
 
    
 
</script>

<style> 
 
.choose{ 
 
     padding: 0px; 
 
     display: none; 
 
     margin-top: 0px; 
 
     /*border: 1px solid #000; */ 
 
    } 
 
    .offer{ } 
 
    .email{ } 
 
    
 
    .choose1{background: #ffffff;} 
 

 
</style>

<form action="#" method="post" id="add" enctype="multipart/form-data" class="form-signin"> 
 
    <input type="hidden" name="id" value="{- $item.id -}" /> 
 
    <input type="hidden" name="save" value="1" /> 
 
    <input type="hidden" name="store" value="1" /> 
 
     <select name="is_type"> 
 
      <option value="choose">Choose option</option> 
 
      <option value="offer">Offer</option> 
 
      <option value="email">E-mail</option> 
 
     </select> 
 
    </div> 
 
    <div class="choose choose1">choose your option</div> 
 
    <div class="choose offer"> 
 
     <!-- offer option start --> 
 
       
 
    
 
    <div class="form-group row"> 
 
     <label for="url" class="col-sm-4 control-label">{- "Url"|translate -} :</label> 
 
     <div class="col-sm-8"> 
 
     <input type="text" class="form-control" id="url" name="url" value="{- $item.url|escape -}" size="50" /> 
 
     {-if $error.url-}<div class="alert alert-danger">{-"The url is mandatory"|translate-}</div>{-/if-} 
 
     </div> 
 
    </div> 
 
    <div class="form-group row"> 
 
     <label for="name" class="col-sm-4 control-label">{- "Name"|translate -} :</label> 
 
     <div class="col-sm-8"> 
 
     <input type="text" class="form-control" id="name" name="name" value="{- $item.name|escape -}" size="50" /> 
 
     {-if $error.name-}<div class="alert alert-danger">{-"The name is mandatory"|translate-}</div>{-/if-} 
 
     </div> 
 
    </div> 
 
    <div class="form-group row"> 
 
     <label for="list" class="col-sm-4 control-label">{- "E-mail list:"|translate -} :</label> 
 
     <div class="col-sm-8"> 
 
      <textarea name="list" rows="10" style="width:100%">{- $item.data|escape -}</textarea> 
 
     {-if $error.list-}<div class="alert alert-danger">{-"Insert at least one e-mail address"|translate-}</div>{-/if-} 
 
     </div> 
 
    </div> 
 

 

 
     
 
     <!-- offer option end --> 
 
    
 
    </div> 
 
    <div class="choose email"> 
 
    <!-- email option start --> 
 
     
 
     
 
    <div class="form-group row"> 
 
     <label for="email" class="col-sm-4 control-label">{- "E-mail"|translate -} :</label> 
 
     <div class="col-sm-8"> 
 
     <input type="text" class="form-control" id="url" name="email" value="{- $item.url|escape -}" size="50" /> 
 
     {-if $error.url-}<div class="alert alert-danger">{-"The E-mail is mandatory"|translate-}</div>{-/if-} 
 
     </div> 
 
    </div> 
 
    <div class="form-group row"> 
 
     <label for="url" class="col-sm-4 control-label">{- "Url"|translate -} :</label> 
 
     <div class="col-sm-8"> 
 
     <input type="text" class="form-control" id="url" name="url1" value="{- $item.url|escape -}" size="50" /> 
 
     {-if $error.url-}<div class="alert alert-danger">{-"The url is mandatory"|translate-}</div>{-/if-} 
 
     </div> 
 
    </div> 
 
    
 
    </div> 
 
      
 
     
 
    <!-- email option end --> 
 
    </div> 
 

 
    
 
    {- if $item.id -} 
 
    <button class="btn btn-default" type="submit">{- "Modify"|translate -}</button> 
 
    {- else -} 
 
    <button class="btn btn-default" type="submit">{- "Add"|translate -}</button> 
 
    {- /if -} 
 

 
    <a href="{-$url_back-}" class="btn btn-default">{- "Cancel"|translate -}</a> 
 
    
 
</form>

现在不用担心的形式大括号，因为它使用了一些奇怪的智者适应（有些人我知道制造）。

我想这是一个长时间阅读的问题：我如何根据javascript中的html选择标记中的选定选项生成输入。

感谢您抽出宝贵的时间来解决所有这些问题，如果您有问题，请再问一次，我真的必须完成这件事。

编辑某人问某事：这种形式去哪里？

它发送到一个名为links_edit.php的处理信息的控制器，我知道没有指定任何操作，但默认为该控制器，所以它执行数据库查询和表单验证。

从控制器部分附加代码（这是我怎么从控制器的形式获取数据：

<?php 
    $id  = $dbt->varGetFromInput('id'); 
    $store = $dbt->varGetFromInput('store'); 
    $save  = $dbt->varGetFromInput('save'); 
    $is_type = $dbt->varGetFromInput('is_type'); 
    ?> 

从这里结束我可以做任何它

Answer 1

尝试按照我的例如：

jQuery(document).ready(SwitchFormCtrl); 
 

 
function SwitchFormCtrl($) { 
 
    var self = this; 
 
    
 
    var select = $('select[name="is_type"]'); 
 
    var offerFieldset = $('.choose.offer'); 
 
    var emailFieldset = $('.choose.email'); 
 

 
    self.showEmailFieldset = function() { 
 
    return offerFieldset 
 
     .fadeOut() 
 
     .promise() 
 
     .then(function() { 
 
     return emailFieldset 
 
      .fadeIn() 
 
      .promise() 
 
     ; 
 
     }) 
 
    ; 
 
    }; 
 
    
 

 
    self.showOfferFieldset = function() { 
 
    return emailFieldset 
 
     .fadeOut() 
 
     .promise() 
 
     .then(function() { 
 
     return offerFieldset 
 
      .fadeIn() 
 
      .promise() 
 
     ; 
 
     }) 
 
    ; 
 
    }; 
 
    
 
    select.change(function() { 
 
    
 
    switch((this.value || '').toLowerCase()) { 
 
     case "offer": 
 
     self.showOfferFieldset(); 
 
     break; 
 
     
 
     case "email": 
 
     self.showEmailFieldset(); 
 
     break; 
 
    } 
 
    
 
    }); 
 
}

.choose { margin: 5px; border: 1px solid green; padding: 5px; } 
 
.choose.email { background: yellow; } 
 
.choose.offer { background: cyan; } 
 

 
/** hide both email and offer fieldset **/ 
 
.choose.offer, 
 
.choose.email { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="#" method="post" id="add" enctype="multipart/form-data" class="form-signin"> 
 
    <input type="hidden" name="id" value="{- $item.id -}" /> 
 
    <input type="hidden" name="save" value="1" /> 
 
    <input type="hidden" name="store" value="1" /> 
 
     <select name="is_type"> 
 
      <option value="choose">Choose option</option> 
 
      <option value="offer">Offer</option> 
 
      <option value="email">E-mail</option> 
 
     </select> 
 
    
 
    <div class="choose choose1">choose your option</div> 
 
    <div class="choose offer"> 
 
     <!-- offer option start --> 
 
       
 
    
 
    <div class="form-group row"> 
 
     <label for="url" class="col-sm-4 control-label">{- "Url"|translate -} :</label> 
 
     <div class="col-sm-8"> 
 
     <input type="text" class="form-control" id="url" name="url" value="{- $item.url|escape -}" size="50" /> 
 
     {-if $error.url-}<div class="alert alert-danger">{-"The url is mandatory"|translate-}</div>{-/if-} 
 
     </div> 
 
    </div> 
 
    <div class="form-group row"> 
 
     <label for="name" class="col-sm-4 control-label">{- "Name"|translate -} :</label> 
 
     <div class="col-sm-8"> 
 
     <input type="text" class="form-control" id="name" name="name" value="{- $item.name|escape -}" size="50" /> 
 
     {-if $error.name-}<div class="alert alert-danger">{-"The name is mandatory"|translate-}</div>{-/if-} 
 
     </div> 
 
    </div> 
 
    <div class="form-group row"> 
 
     <label for="list" class="col-sm-4 control-label">{- "E-mail list:"|translate -} :</label> 
 
     <div class="col-sm-8"> 
 
      <textarea name="list" rows="10" style="width:100%">{- $item.data|escape -}</textarea> 
 
     {-if $error.list-}<div class="alert alert-danger">{-"Insert at least one e-mail address"|translate-}</div>{-/if-} 
 
     </div> 
 
    </div> 
 

 

 
     
 
     <!-- offer option end --> 
 
    
 
    </div> 
 
    <div class="choose email"> 
 
    <!-- email option start --> 
 
     
 
     
 
    <div class="form-group row"> 
 
     <label for="email" class="col-sm-4 control-label">{- "E-mail"|translate -} :</label> 
 
     <div class="col-sm-8"> 
 
     <input type="text" class="form-control" id="url" name="email" value="{- $item.url|escape -}" size="50" /> 
 
     {-if $error.url-}<div class="alert alert-danger">{-"The E-mail is mandatory"|translate-}</div>{-/if-} 
 
     </div> 
 
    </div> 
 
    <div class="form-group row"> 
 
     <label for="url" class="col-sm-4 control-label">{- "Url"|translate -} :</label> 
 
     <div class="col-sm-8"> 
 
     <input type="text" class="form-control" id="url" name="url1" value="{- $item.url|escape -}" size="50" /> 
 
     {-if $error.url-}<div class="alert alert-danger">{-"The url is mandatory"|translate-}</div>{-/if-} 
 
     </div> 
 
    </div> 
 
    
 
    </div> 
 
      
 
     
 
    <!-- email option end --> 
 
    </div> 
 

 
    
 
    {- if $item.id -} 
 
    <button class="btn btn-default" type="submit">{- "Modify"|translate -}</button> 
 
    {- else -} 
 
    <button class="btn btn-default" type="submit">{- "Add"|translate -}</button> 
 
    {- /if -} 
 

 
    <a href="{-$url_back-}" class="btn btn-default">{- "Cancel"|translate -}</a> 
 
    
 
</form>