버튼 클릭 결과 인쇄

-1

버튼을 클릭 한 후 결과가 통과되었음을 나타내려는 5 개의 필드 세트가 있습니다. 보시다시피 버튼을 클릭하고 마지막으로 이동하려는 항목을 선택하십시오. 여기 버튼 클릭 결과 인쇄

 $(document).ready(function() { 
      var results = ""; 
      $('button').click(function() { 
      results += $(this).attr("value") + "<br>"; 
      }); 
      $("#demo").html(results); 
     });

는 HTML 코드이 코드에서

 <fieldset> 
     <h2 class="fs-title">Pick a Type</h2> 


    <input type="button" name="next" class="next action-button" value="VoIP" /> <br> 
    <input type="button" name="next" class="next action-button" value="Analog" /> 

    </br> 
    <input type="text" name="custom" placeholder="Custom" style="width: 100px;"/> 
    <br> 

    <!--<input type="button" name="next" class="next action-button" value="Next" style="float:right" /> 
    <input type="button" name="previous" class="previous action-button" value="Previous" style="float:left" /> 
    --> 
     </fieldset> 
    <fieldset> 

    <h2 class="fs-title">Pick a Sub-Type</h2> 


    <input type="button" name="next" class="next action-button" value="Desk Phone" /><br> 
    <input type="button" name="next" class="next action-button" value="Polycom" /> <br> 
    <input type="button" name="next" class="next action-button" value="Wireless Phone" style="white-space:normal"/> <br> 
    <input type="text" name="customsub" placeholder="Custom " style="width: 100px;"/> 
    <br> 
    <br> 
    <br> 
    </br> 
    <!--<input type="button" name="previous" class="previous action-button" value="Cancel" style="float:left" /> --> 

</fieldset> 
<fieldset> 

    <h2 class="fs-title">Enter Model</h2> 
    <input type="text" name="model" placeholder="Model"/> 
    <input type="button" name="next" class="next action-button" value="Next" style="float:right" /> 
    <input type="button" name="previous" class="previous action-button" value="Previous" style="float:left" /> 

</fieldset> 
<fieldset id="sample"> 
    <h2 class="fs-title">Complete</h2> 
    <h3 class="fs-subtitle">Equipment Added Successfully!</h3> 
    <p id="demo"> </p> 
    <input type="button" name="previous" class="previous action-button" value="Add Another" /> 
    <input type="submit" name="submit" class="submit action-button" value="Done" /> 
</fieldset>

출처

2014-07-18 WakkaDroid

가 너무 HTML을하시기 바랍니다 줄 수 있습니까? – Niflhel

완료되었습니다. – WakkaDroid

, 당신은 #demo 요소 즉시의 HTML을 설정하는 것입니다.

버튼을 클릭 할 때 물건을 추가하면됩니다. 일반적으로 <br>을 사용하여 분리하는 것은 이상적이지 않습니다. (즉, 당신이 당신의 예에서 사용 된 무엇으로) 그게 button 요소 value 속성을 가정합니다

$(document).ready(function() { 
    $('button').click(function() { 
     $("#demo").append("<div>" + this.value + "</div>"); 
    }); 
});

주 : 대신에, div 또는 p 요소 또는 유사한을 추가합니다. 그렇지 않은 경우 this.value 대신 $(this).text() 또는 $(this).html()을 사용하십시오.

전체 예 : Live Copy

<!DOCTYPE html> 
<html> 
<head> 
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
    <meta charset="utf-8"> 
    <title>Example</title> 
</head> 
<body> 
    <button value="1">One</button> 
    <button value="2">Two</button> 
    <button value="3">Three</button> 
    <button value="4">Four</button> 
    <div id="demo"></div> 
<script> 
$(document).ready(function() { 
    $('button').click(function() { 
     $("#demo").append("<div>" + this.value + "</div>"); 
    }); 
}); 
</script> 
</body> 
</html>

출처

2014-07-18 17:43:59

버튼 클릭 결과 인쇄

답변

관련 문제