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>