如何使用jQuery得到文本框的值

Question

<div id="newPax"> 
 
      <div class="clearer"></div> 
 
      <select name="pax[prefix]" id="pax_prefix" class="selectpicker" style=" width:125px;"> 
 
       <option value="">--</option> 
 
       <option value="Mr" >Mr</option> 
 
       <option value="Mrs" >Mrs</option> 
 
       <option value="Ms" >Ms</option> 
 
       <option value="Dr" >Dr</option> 
 
       <option value="Justice" >Justice</option> 
 
       <option value="Madam Justice" >Madam Justice</option> 
 
      </select> 
 
      <input type="text" name="pax[first_name]" id="pax_first_name" class="input-xmedium capL" placeHolder="First Name" value=""> 
 
      <input type="text" name="pax[last_name]" id="pax_last_name" class="input-xmedium capL" placeHolder="Last Name" value=""> 
 
      <div class="input-prepend"><span class="add-on"> + </span> 
 
       <input type="text" name="pax[pax_no]" id="pax_no" class="input-xmini acenter" value="0" placeHolder="Pax#"> 
 
      </div> 
 
      <br> 
 
      <input type="text" name="pax[phone]" id="pax_phone" class="input-medium phoneFormat" placeHolder="Cell Phone" value=""> 
 
      <input type="email" name="pax[email]" id="pax_email" class="input-medium" placeHolder="Email" value=""> 
 
      <input type="email" name="pax[confirm_email]" id="pax_confirm_email" class="input-medium" placeHolder="Confirm Email" value=""> 
 
      </div> 
 
     

$('#pax_prefix').live("click", function(){ 
 
    
 
    var pax_pre = $('#pax_prefix').val(); 
 
    $('#pax_first_name').live("click", function(){ 
 
    var paxname = $('#pax_first_name').val(); 
 
    $('#pax_last_name').live("click", function(){ 
 
    var paxlast = $('#pax_last_name').val(); 
 
    $('#pax_no').live("click", function(){ 
 
    var paxn = $('#pax_no').val(); 
 

 
    $('#previewPax span').text(pax_pre + paxname + paxlast + paxn); 
 
    $('#previewPax').show('fast'); 
 
}); 
 
}); 
 
}); 
 
});

這裏以上jQuery代碼我想，當用戶進入閥擺脫文本框的一些領域，在同一頁面上使用jquery顯示一次，請幫助我，謝謝

Answer 1

$('#pax_prefix').change(function() { 
 
    var pax_pre = $('#pax_prefix').val(); 
 
    alert(pax_pre); 
 
}); 
 
$('#pax_first_name').click(function() { 
 
    var paxname = $('#pax_first_name').val(); 
 
    alert(paxname); 
 

 
}); 
 
$('#pax_last_name').click(function() { 
 
    var paxlast = $('#pax_last_name').val(); 
 
    alert(paxlast); 
 

 
}); 
 
$('#pax_no').click(function() { 
 
    var paxn = $('#pax_no').val(); 
 
    alert(paxlast); 
 
    $('#previewPax span').text(pax_pre + paxname + paxlast + paxn); 
 
    $('#previewPax').show('fast'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="newPax"> 
 
    <div class="clearer"></div> 
 
    <select name="pax[prefix]" id="pax_prefix" class="selectpicker" style=" width:125px;"> 
 
     <option value="">--</option> 
 
     <option value="Mr">Mr</option> 
 
     <option value="Mrs">Mrs</option> 
 
     <option value="Ms">Ms</option> 
 
     <option value="Dr">Dr</option> 
 
     <option value="Justice">Justice</option> 
 
     <option value="Madam Justice">Madam Justice</option> 
 
    </select> 
 
    <input type="text" name="pax[first_name]" id="pax_first_name" class="input-xmedium capL" placeHolder="First Name" value=""> 
 
    <input type="text" name="pax[last_name]" id="pax_last_name" class="input-xmedium capL" placeHolder="Last Name" value=""> 
 
    <div class="input-prepend"><span class="add-on"> + </span> 
 

 
     <input type="text" name="pax[pax_no]" id="pax_no" class="input-xmini acenter" value="0" placeHolder="Pax#"> 
 
    </div> 
 
    <br> 
 
    <input type="text" name="pax[phone]" id="pax_phone" class="input-medium phoneFormat" placeHolder="Cell Phone" value=""> 
 
    <input type="email" name="pax[email]" id="pax_email" class="input-medium" placeHolder="Email" value=""> 
 
    <input type="email" name="pax[confirm_email]" id="pax_confirm_email" class="input-medium" placeHolder="Confirm Email" value=""> 
 
</div>