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

Question

我有一个小的 javascript 问题（我不太了解 javascript，我刚开始学一点）。

所以它是这样的：

• 我有一个表单，它应该根据 html 选择标签内的选定选项加载一组特定的字段，因此它应该在选择中包含三个选项。
  • 选择选项
  • 报价
  • 电子邮件

我认识的人告诉我使用 switch/case 做某事，但老实说我不知道​​从哪里开始。 我尝试对 css 中的那些隐藏/阻止事物做一些事情，以便根据所选选项隐藏/显示特定表单 div，但它对我不起作用，给我以下问题：

• 当我使用表单提交按钮时，整个表单会消失，所以这不应该发生

• 第二件事我有一个文本字段，它在两个名为 -url- 的 div 中具有相同的名称，因为输入被隐藏但仍然存在于页面上 如果我在 -offer- 部分写了一个 url，它会将其设置为空白，因为表单的电子邮件部分中的 -url- 字段（目前隐藏在 offer 部分下）是空白的。

我希望它很清楚，如果您有任何问题，请问我！ 这是代码：

<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 选择标签中的选定选项生成输入。

感谢您花时间真正解决所有这些问题，如果您有任何问题，请再次询问他们，我真的必须完成这项工作。

edit 有人问了一些问题：这个表格去哪里了？

它转到一个名为 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>