动态添加和删除MDL文本字段和textarea

时间：2018-04-12 14:01:55

标签： javascript html material-design

方案： 我正在开发一个包含多个文本字段的mdl表单。 textareas供用户输入信息。

表单中有2个部分（第1部分和第2部分），每个部分都有一个MDL按钮来添加文本字段。当用户单击MDL按钮时，应在其指定部分下的现有字段下添加文本字段。

行为： 目前，当用户点击任一部分中的MDL按钮时，表单底部会在错误的部分添加一个字段。

预期行为： 1.当用户单击第1部分（Plus MDL按钮）中的添加字段时，应在第1部分下添加文本字段。 2.反之，第2节

我已经尝试了3天但无法实现，请协助。 enter code here 

<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <title>Material Design Lite</title>

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="images/android-desktop.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Material Design Lite">
    <link rel="apple-touch-icon-precomposed" href="images/ios-desktop.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
    <meta name="msapplication-TileColor" content="#3372DF">

    <link rel="shortcut icon" href="images/favicon.png">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.teal-red.min.css">
    <link rel="stylesheet" href="stylespost.css">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="styles1.css">
    <script src="bower_components/ckeditor/ckeditor.js"></script>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.blue-indigo.min.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Robot <!--css -->
<style type="text/css">


/*____________________________________*/
.mrg{
        margin-top: -11.4%;
    margin-left: 94%;
    height: 25px;
    background-color: #ff5252;
    border-radius: 50%;
    color: #fff;
    font-size: 32px;
  }

</style>



    <style>
    #view-source {
      position: fixed;
      display: block;
      right: 0;
      bottom: 0;
      margin-right: 40px;
      margin-bottom: 40px;
      z-index: 900;
    }
   .mdl-layout__header {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    box-sizing: border-box;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    min-height: 64px;
    max-height: 1000px;
    z-index: 3;
    background-color: rgb(63, 81, 181);
    color: rgb(255,255,255);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-property: max-height,box-shadow;
} 
.demo-card-wide.mdl-card {
  width: 640px;
  height: auto;

}

.mdl-card__actions {

  outline: skyblue solid 5px;
  z-index: 4;


}
#name {
  display:flex;
margin-top: 10px;
  justify-content: left;
}

#contact{
  diplay: flex;

}


.mdl-button {
// outline: red solid 5px; 
  margin-left: 10px ;

}
.demo-card-wide {
  height: 200px;
 // outline: limegreen 10px solid;
}


.demo-card-wide > .mdl-card__title {
  color: #fff;
  height: 64px;
  background-color:#3f51b5;
}

.mdl-card__title-text {
  position: relative;
  top: 6px;

}

.demo-card-wide > .mdl-card__menu {
  color: #fff;
}


#mycard {
  height: auto;
  width:100%;
 display:flex;
  flex-direction: row;
  // outline: red solid 10px;
  justify-content: center;
  align-items: center;
}

.mdl-textfield {
  width: 450px !important;
  margin-right: 10px;
}
.mdl-button--file {
  input {
    cursor: pointer;
    height: 100%;
    right: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 300px;
    z-index: 4;
  }
}
input:focus {
    outline:none !important;
}
textarea:focus{
  outline: none !important; 
}
    </style>

<!--css end-->
o:300,400,500,700" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>

 <!--css -->
<style type="text/css">


/*____________________________________*/
.mrg{
        margin-top: -11.4%;
    margin-left: 94%;
    height: 25px;
    background-color: #ff5252;
    border-radius: 50%;
    color: #fff;
    font-size: 32px;
  }

</style>



    <style>
    #view-source {
      position: fixed;
      display: block;
      right: 0;
      bottom: 0;
      margin-right: 40px;
      margin-bottom: 40px;
      z-index: 900;
    }
   .mdl-layout__header {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    box-sizing: border-box;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    min-height: 64px;
    max-height: 1000px;
    z-index: 3;
    background-color: rgb(63, 81, 181);
    color: rgb(255,255,255);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-property: max-height,box-shadow;
} 
.demo-card-wide.mdl-card {
  width: 640px;
  height: auto;

}

.mdl-card__actions {

  outline: skyblue solid 5px;
  z-index: 4;


}
#name {
  display:flex;
margin-top: 10px;
  justify-content: left;
}

#contact{
  diplay: flex;

}


.mdl-button {
// outline: red solid 5px; 
  margin-left: 10px ;

}
.demo-card-wide {
  height: 200px;
 // outline: limegreen 10px solid;
}


.demo-card-wide > .mdl-card__title {
  color: #fff;
  height: 64px;
  background-color:#3f51b5;
}

.mdl-card__title-text {
  position: relative;
  top: 6px;

}

.demo-card-wide > .mdl-card__menu {
  color: #fff;
}


#mycard {
  height: auto;
  width:100%;
 display:flex;
  flex-direction: row;
  // outline: red solid 10px;
  justify-content: center;
  align-items: center;
}

.mdl-textfield {
  width: 450px !important;
  margin-right: 10px;
}
.mdl-button--file {
  input {
    cursor: pointer;
    height: 100%;
    right: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 300px;
    z-index: 4;
  }
}
input:focus {
    outline:none !important;
}
textarea:focus{
  outline: none !important; 
}
    </style>

<!--css end-->

  </head>
  <body>
    <div class="demo-layout mdl-layout mdl-layout--fixed-header mdl-js-layout mdl-color--grey-100">

        <header class="mdl-layout__header">

    <!--__________________________________________________________________________-->

<!--__________________________________________________________________________-->

  </header>
      <div class="demo-ribbon"></div>
      <main class="demo-main mdl-layout__content">
        <div class="demo-container mdl-grid">
          <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
          <div class="demo-content mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
              <!--___________________________-->
              <div id ="mycard">

<div class="demo-card-wide mdl-card mdl-shadow--2dp">



  <div class="mdl-card__supporting-text">

    <form action="" method="post" enctype="multipart/form-data">



<label for="sample3"><b>Section1</b></label>
 <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored add-more" id="b1"  type="button" style="margin-top: 0%;
    margin-left: 0%; float:right;"><i class="mdl-textfield__icon material-icons">add</i>
  </button>
<div id="name">
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="last" name="addmore1">
    <label class="mdl-textfield__label" for="sample3">A1</label>
    </div>
</div>

<!--demo one-->

<!--__________________________________________-->

<div id="name" style="margin-top:10px;">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">

                        <input autocomplete="off" class="mdl-textfield__input" id="field" name="field[]" type="text" data-items="8" style="font-size:14"/>
                        <label class="mdl-textfield__label" for="sample3">A2</label>
  </div>




  </div>

<!--__________________________________________-->

<!--__________________________________________-->

<label for="sample3"><b>Section2</b></label><button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored add-more1" id="b1"  type="button" style="margin-top: 0%;
    margin-left: 0%; float:right; background: #4caf50;"><i class="mdl-textfield__icon material-icons">add</i>
  </button>
<div id="name" style="margin-top:10px;">

  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">

                        <textarea autocomplete="off" rows=5 class="mdl-textfield__input" id="field" name="field1[]" type="text" data-items="8" style="font-size:14">B1</textarea>
  </div>
  </div>

<div id="name" style="margin-top:10px;">

  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">

                        <textarea autocomplete="off" rows=5 class="mdl-textfield__input" id="field1" name="field1[]" type="text" data-items="8" style="font-size:14">B2</textarea>
  </div>
</div>








      <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
      <!--<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">-->
  Submit
</button>

</form>
  </div>




</div>

</div>
              <!--___________________________-->
          </div>
        </div>

      </main>
    </div>




<!--_____________________________append__________________________________________-->

  </body>
</html>

Javascript：

 <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    <script type="text/javascript">

    $(document).ready(function() {

      $(".add-more").click(function(){ 
          var html = $(".copy").html();
          $(".after-add-more").after(html);
      });

      $("body").on("click",".remove",function(){ 
          $(this).parents(".control-group").remove();
      });

    });


$(document).ready(function() {

      $(".add-more1").click(function(){ 
          var html = $(".copy").html();
          $(".after-add-more").after(html);
      });

      $("body").on("click",".remove",function(){ 
          $(this).parents(".control-group").remove();
      });

    });
</script>


<script type="text/javascript">
$(document).ready(function(){
    var next = 1;
    $(".add-more").click(function(e){
        e.preventDefault();
        var addto = "#field" + next;
        var addRemove = "#field" + (next);
        next = next + 1;
        /*var newIn = '<input autocomplete="off" class="input form-control" id="field' + next + '" name="field' + next + '" type="text">';*/
        var newIn = '<input autocomplete="off" class="mdl-textfield__input" id="field' + next + '" name="field[]" type="text" value="A3">';
        var newInput = $(newIn);
        var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me mrg" >-</button></div>';
        var removeButton = $(removeBtn);
        $(addto).after(newInput);
        $(addRemove).after(removeButton);
        $("#field" + next).attr('data-source',$(addto).attr('data-source'));
        $("#count").val(next);  

            $('.remove-me').click(function(e){
                e.preventDefault();
                var fieldNum = this.id.charAt(this.id.length-1);
                var fieldID = "#field" + fieldNum;
                $(this).remove();
                $(fieldID).remove();
            });
    });

componentHandler.upgradeAllRegistered();

});


</script>

<script type="text/javascript">
$(document).ready(function(){
    var next = 1;
    $(".add-more1").click(function(e){
        e.preventDefault();
        var addto = "#field" + next;
        var addRemove = "#field" + (next);
        next = next + 1;
        /*var newIn = '<input autocomplete="off" class="input form-control" id="field' + next + '" name="field' + next + '" type="text">';*/
        var newIn = '<textarea autocomplete="off" class="mdl-textfield__input" id="field' + next + '" name="field1[]" type="text" >B3</textarea>';
        var newInput = $(newIn);
        var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me mrg" >-</button></div>';
        var removeButton = $(removeBtn);
        $(addto).after(newInput);
        $(addRemove).after(removeButton);
        $("#field" + next).attr('data-source',$(addto).attr('data-source'));
        $("#count").val(next);  

            $('.remove-me').click(function(e){
                e.preventDefault();
                var fieldNum = this.id.charAt(this.id.length-1);
                var fieldID = "#field" + fieldNum;
                $(this).remove();
                $(fieldID).remove();
            });
    });

componentHandler.upgradeAllRegistered();

});


</script>

<script type="text/javascript">
/*$(document).ready(function() {
  $('#member_pattern').hide();
  $('.add-member').click(function() {
    var clone = $('#member_pattern').clone(), cont = $('.members-cont');
    $(cont).append(clone);
    $(cont).find('#member_pattern').show(200, function() {
      $(this).attr('id', '');
      componentHandler.upgradeAllRegistered();
    });
  });
});*/
</script>
<script type="text/javascript">
/*var index = $('.member-section').length;
var clone = $('.member-section-pattern').clone();
$(clone)
  .removeClass('member-section-pattern')
  .find(':not([data-upgraded=""])').attr('data-upgraded', '');

$('.members-cont').append(clone);
$(clone).show(200, function() {
  componentHandler.upgradeAllRegistered();
});*/
</script>

0 个答案:

没有答案
相关问题
最新问题