Contact form with sortable and expandable textboxes

asked Jul 21, 2017 by ThomasR (240 points)
Hello,

I have written a contact form where the user can add more order input textforms and sort them. When the user submits the added and sortable text inputs, are not in the Contact mail.

Below you find the html and javascript code.
When you type two letters in the textfield "Leistung" it adds another "Leistung" input and you can sort them. But they are not send with the rest.


------------------------
<div class="textEmail"><label>Email<span style="color:red;"> * </span></label><input type="text" required value="" name="email"></div>


<div ><label></label><p id="btn" class="button"><span><input type="button" name="Neukunde" value="Neukunde" ></span></p></div>
<div class="textbox"> <label>Vorname<span style="color:red;"> </span></label><input type="text"  value="" name="Name"></div>
<div class="textbox"><label>Nachname<span style="color:red;"> </span></label><input type="text"  value="" name="Nachname"></div>
<div class="textbox" ><label>Telefon(optional)</label><input type="text" value="" name="Telefon" > </div>
<div class="textbox"><label>Schlüsselnummer_2_2<span style="color:red;"> </span></label><input type="text"  value="" name="Schlüsselnummer_2_2"></div>
<div class="textbox"><label>Schlüsselnummer_2_3<span style="color:red;"> </span></label><input type="text"  value="" name="Schlüsselnummer_2_3"></div>
<div ><label>Gewünschter_Termin_(Abgabe):</label> <span class="date"><input class="dateinput" type="text" value="" name="Gewünschter_Termin_(Abgabe)">
<div ><label>Ersatzwagen</label><p class="checkbox"><span><input id="check" type="checkbox" name="Ersatzwagen[]" value="Ja" > Ja</span></p></div>




<div class="test">

<div class="mylist"><label class="leistunglabel">Leistung 1 </label><input class="mytext" type="text" value="" name="Leistung">
</div>

</div>


<script>

$(".textbox :input").css({"border":"2px solid","border-color":" #696969","width":"60%"});


$(".dateinput").css({"border":"2px solid","border-color":" #696969","width":"60%"});

$(".textEmail :input").css({"border":"2px solid","border-color":" #696969","width":"60%"});

$(".mylist").css({"backgroundColor": "#DCDCDC","width":"100%"});
$(".mytext").css({"border":"2px solid","border-color":" #696969"});

$("#check").css({"outline":"2px solid","border-color":" #696969","backgrund-color":"#696969"});


var count=1;


$(".textbox").hide();


$("#btn").click(function(){
    $(".textbox").toggle();
});


if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){


$(".test:last").keyup(function(){



 if($(".mylist:last").find(":text").val().length>1){

$(".mylist:last").clone().appendTo(".test").find(":text").val("");

count++;
     

     $(".leistunglabel").last().text("Leistung " + count + " ");
     
   



}




});



}else {
   


//Adds a new text input after the user writes two letters
$(".test:last").keyup(function(){



 if($(".mylist:last").find(":text").val().length>1){

$(".mylist:last").clone().appendTo(".test").find(":text").val("");

count++;
     

     $(".leistunglabel").last().text("Leistung " + count + " ");
     
   

  $(".test").sortable();
  $(".test").disableSelection();
   


}




});


   $( ".test" ).sortable({
        update: function( ) {
          
          var nummer=1;
         
          $( ".mylist" ).each(function() {
          
                 $(this).find(".leistunglabel").text("Leistung " + nummer + " ");
                 nummer++;
          
                    });
          
          
        }
    });
  

}



</script>

1 Answer

answered Jul 22, 2017 by Ciatronical (850 points)
Dear Thomas,

the attribute 'name' is important for the correct processing of your form.

$("input.mytext").keyup(function(){
    if($(".mylist:last").find(":text").val().length >= 1 ){
        $(".mylist:first").clone( true ).insertAfter( ".mylist:last").find(":text").val("");
        $(".powerlabel:last").text("Leistung " + ++count + " ");
        $( ".mytext:last" ).attr( "name",  "Leistung " + count ); //IMPORTANT
    }
})

Best regards

Ronny
...