동적 필드가있는 이메일을 통해 양식을 제출하십시오.

Question

미리 감사드립니다.

코드가 올바르게 작동하지만 모든 입력 이름이 같으면 각 새 줄을 내 .asp 메일 처리기로 전달하는 방법을 모르겠습니다. 내 코드에서 정확하게 입력 상자를 인덱싱하여 제출하는 동안 고유하게 호출 할 수 있도록하고 전자 메일 .asp 메일 처리기로 전자 메일을 보낼 수 있습니까?

지금까지 작성한 코드 문제를 해결할 수 있도록 도와 주신 stackoverflow 커뮤니티에 감사드립니다.

HTML

<form role="form" action="/wohoo" method="POST"> 
    <label>Item</label> 
    <div class="catalog-fieldset"> 
     <div class="catalog-wrapper"> 
      <div class="catalog-items"> 
       <ul> 
        <li>Quantity: 
         <input type="text" size="5" name="Qty[]"> 
        </li> 
        <li>Width: 
         <input type="text" size="5" name="Width[]"> 
        </li> 
        <li>Height: 
         <input type="text" size="5" name="Height[]"> 
        </li> 
       </ul> 
       <button type="button" class="remove-line">Remove</button> 
      </div> 
     </div> 
     <button type="button" class="add-field">Add More...</button> 
    </div> 
</form> 

CSS

ul { 
    list-style: none; 
    display:inline-block; 
    margin:0 0 5px; 
} 
ul li { 
    display: inline-block; 
} 
.remove-line { 
    display:inline-block; 
} 

이 코드는 현재 설정 주어진 http://jsfiddle.net/KeithDickens/afqh4a5o/2/

$(document).ready(function() { 
var max_fields = 10; //maximum input boxes allowed 
var x = 1; //initlal text box count  

$('.catalog-fieldset').each(function() { 
    var $wrapper = $('.catalog-wrapper', this); 

    $(".add-field", $(this)).click(function (e) { 
     e.preventDefault(); 
     if (x < max_fields) { //max input box allowed 
      x++; //text box increment   
      $('.catalog-items:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus(); 
     } 
    }); 
    $('.catalog-items .remove-line', $wrapper).click(function() { 
     x = x - 1; //initlal text box count  
     if ($('.catalog-items', $wrapper).length > 1) $(this).parent('.catalog-items').remove(); 
    }); 
}); 
}); 

Answer 1

읽기 값이 단순히 위치에 따라 할 것입니다 설정했습니다. 당신이 위치를 변경 한 경우에는 암호를 해독하기 때문에이 몹시 취성하지만 기존 추가 자세히 버튼 아래에

<button type="button" class="summarise">Summarise</button> 

를 추가했다 아래에 무엇을 위해 자바 스크립트를 교체하는 경우 그것은 당신에게 시작 이상을 제공해야 . 유효성 확인 등을 적용해야합니다.

$(document).ready(function() { 
    var max_fields = 10; //maximum input boxes allowed 
    var x = 1; //initlal text box count  

    function LineItemViewModel() { 
     var self = this; 
     self.Qty = 0; 
     self.Width = 0; 
     self.Height = 0; 
    } 

    function CollectionViewModel() { 
     var self = this; 
     self.Items = []; 
    } 
    var collection = new CollectionViewModel(); 

    $('.catalog-fieldset').each(function() { 
     var $wrapper = $('.catalog-wrapper', this); 

     $(".add-field", $(this)).click(function (e) { 
      e.preventDefault(); 
      if (x < max_fields) { //max input box allowed 
       x++; //text box increment   
       $('.catalog-items:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus(); 
      } 
     }); 

     $(".summarise", $(this)).click(function (e) { 
      var txts = $('.catalog-fieldset input[type=text]'); 
      var item = new LineItemViewModel(); 
      txts.each(function() { 
       switch($(this).attr("name")){ 
        case "Qty[]": 
         item.Qty = $(this).val(); 
         break; 
        case "Width[]": 
        item.Width = $(this).val(); 
        break; 
        case "Height[]": 
        item.Height = $(this).val(); 
        collection.Items.push(item); 
        item = new LineItemViewModel(); 
        break;   
       } 
      }); 
      alert(collection.Items.length); 
     }); 

     $('.catalog-items .remove-line', $wrapper).click(function() { 
      x = x - 1; //initlal text box count  
      if ($('.catalog-items', $wrapper).length > 1) $(this).parent('.catalog-items').remove(); 
     }); 
    }); 
}); 

위를 할 수있는 청소기/짧은/더 간결 가지 방법이 있지만이 방법은 매우 자기 설명해야한다.