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

Question

我有一个小的 javascript 问题(我真的不知道 javascript，我刚开始学一点点)。

所以它是这样的:

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

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

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

• 第二件事我有一个文本字段，它在两个 div 中具有相同的名称，称为 -url- 并且因为输入是隐藏的但仍然存在于页面上如果我在 -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 select 标记中的选定选项生成输入。

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

edit 有人问:这个表格去哪儿了？

它转到一个名为 links_edit.php 的 Controller 处理信息，我知道没有指定操作但它默认为该 Controller ，因此它执行数据库查询和表单验证。

Controller 部分的附加代码(这是我从 Controller 中的表单获取数据的方式:

<?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>