2014-12-13 2 views
0

제품 정보가있는 양식이 포함 된 페이지에 여러 제품이 있습니다.jQuery 라디오 버튼 변경 이전 입력 값

제품 입력의 기본값은 제품 이름이며, 기본값 - CD가 끝에 추가됩니다. 사용자가 '디지털 다운로드'를 선택하면 제품의 가치를 업데이트하고 'CD'를 '- 디지털'로 바꿔야합니다.

나는 숨겨진 입력을 보여주기 위해 약간의 변형과 함께 거친 jsfiddle를 만들었습니다. 선택되는 제품 내부의 입력 만 입력해야하는 경우 두 입력이 모두 변경된다는 것을 알 수 있습니다.

http://jsfiddle.net/4ffh9bss/

환호!

<div class="product"> 
    <form action="" method="post"> 
     <input class="product-input" name="product" type="hidden" value="Cool music vol 1 - CD" /> 
     <label>Select format</label> 
     <input type="radio" name="type" value="CD" checked="checked">CD 
     <input type="radio" name="type" value="Digital">Digital Download<br/> 
     <input type="submit" class="product-buy" value="Buy now!" /> 
    </form> 
</div> 

<div class="product"> 
    <form action="" method="post"> 
     <input class="product-input" name="product" type="hidden" value="Cool music vol 2 - CD" /> 
     <label>Select format</label> 
     <input type="radio" name="type" value="CD" checked="checked">CD 
     <input type="radio" name="type" value="Digital">Digital Download<br/> 
     <input type="submit" class="product-buy" value="Buy now!" /> 
    </form> 
</div> 


$(".product").each(function() { 
    $('input:radio').bind("change",updateFormat); 

     function updateFormat(e){ 
      e.preventDefault();      
      var $productValue = $('.product-input').val(); 
      var $productValueSplit = $productValue.split('-')[0]; 
      var $radioValue = $("form input[type='radio']:checked").val(); 

      console.log($productValueSplit + ' - ' + $radioValue); 
     } 
}); 
+0

임 확실하지 . '$ ('# yourProductField '). attr ("value", "theValueYouWantHere");' – nmac

+0

답변 해 주셔서 감사합니다. 나는 내가 원하는 것을 반영하도록 가치를 성공적으로 갱신했다고 생각하지만, 이제는 한 번에 한 제품에 대해서만 그것을 할 수는 없다. 라디오 버튼을 변경하면 모든 제품에 영향을 미칩니다. – Rich

답변

1

나는 많이 당신이 당신의 HTML을 구성하는 방식을 좋아하지 않는다. 그것은 내가 원하는 것을 얻기 위해 펑키 한 일을하게하지만, 그것은 당신에게 달려 있습니다. 나는이 코드로 원하는 것을 달성 할 수 있어요 :

$('input:radio').each(function(){ 
    $(this).on("click", function(){ 
     var ind = $(this).closest(".product").index(); 
     var $productValue = $('.product-input').eq(ind).val(); 
     var $productValueSplit = $productValue.split('-')[0]; 
     var $radioValue = $("form").eq(ind).find('input:checked').val(); 
     $('.product-input').eq(ind).val($productValueSplit + ' - ' + $radioValue); 
    }); 
}); 

뿐인 : 내가 제대로 질문을 해석하지만 값 필드를 업데이트하는``.attr()를 사용할 수있는 경우 http://jsfiddle.net/4ffh9bss/4/

+0

고마워요 Verhaeren! 불행히도 마크 업을 변경할 수 없으므로 그대로 사용해야합니다. – Rich

+0

@ 리치 찾을 수 있습니다. 때때로 우리는 그들이 우리에게주는 것과 함께 일해야합니다. – Verhaeren