使用帶有無線電選項的按鈕自動填充表格

我想知道是否可以通過單擊顯示單選按鈕列表來填寫表單，您將從中選擇一個單選按鈕來填寫表單你所做的選擇和領域。到目前爲止，我已經通過一個按鈕和所需的數據（JSON）來創建表單，但是，我想將所有這些內容合併爲一個。例如，某些代碼將是：使用帶有無線電選項的按鈕自動填充表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>This is my title</title> 
<link rel="stylesheet" type="text/css" href="view.css" media="all"> 
<script type="text/javascript" src="jquery.js"></script> 


</head> 
<body id="main_body" > 

    <img id="top" src="top.png" alt=""> 
    <div id="form_container"> 

     <h1><a>Example</a></h1> 
     <form id="form" class="myForm" method="post" action="get.php"> 
     <div class="form_description"> 
      <h2>Example</h2> 
      <p>Please Fill Out the Fields Below.</p> 

     </div>      
     <ul > 


     <li id="profile"> 
     <label class="description" for="">Please select your profile by clicking the button or continuing below: 
     </label> 
     <div> 
      <input id="profilebutton" type="button" name="prof" class="button_text" value="Select Profile"> 
     </div> 
     </li> 


     <!--First Name Input--> 

     <li id="FirstName" > 
     <label class="description" for="firstname">First Name </label> 
     <div> 
      <input id="firstname" name="firstname" class="element text medium" type="text" maxlength="255" value=""/> 
     </div> 
     </li>  

     <!--Last Name Input--> 

     <li id="LastName" > 
     <label class="description" for="lastname">Last Name </label> 
     <div> 
      <input id="lastname" name="lastname" class="element text medium" type="text" maxlength="255" value=""/> 
     </div> 
     </li> 


     <li id="age" > 
     <label class="description" for="age">Age </label> 
     <div> 
      <input id="age" name="age" class="element text medium" type="text" maxlength="255" value=""/> 
     </div> 
     </li>  



     <li class="buttons"> 
      <input type="hidden" name="form_id" /> 

      <input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" /> 
      <input type="reset" class="button_text" id="resetForm" name="reset" value="Reset" /> 
     </li> 
      </ul> 

     </form> 

    </div> 

    </body> 
</html>

然後，例如，當你按一下按鈕，就可以重新引導你到另一個網頁，或顯示一個包含信息的頁面，你會選擇，它會填充字段。例如，數據看起來像：

{ 
    "CASE1": { 
     "FNAME": "Joe", 
     "LNAME": "Schmo", 
     "AGE": "45", 
     "SEX": "M", 
     "ID": "1" 
    }, 
    "CASE2": { 
     "FNAME": "John", 
     "LNAME": "Snow", 
     "AGE": "23", 
     "SEX": "M", 
     "ID": "2" 
    } 
}

任何幫助將不勝感激。

來源

2015-07-04 Sweaver

你應該可以使用jQuery來做到這一點。基本的想法是，當你點擊不同的按鈕時，你使用jquery將數據分配給字段。

例如：

<scricpt> 
jQuery(function() { 
    jQuery('#profilebutton1').on('click', function() { CASE1() }); 
    jQuery('#profilebutton2').on('click', function() { CASE2() }); 
}); 

function CASE1() { 
    $('#firstname').val("John") 
    $('#lastname').val("Snow") 
    $('#age').val("45") 
} 
function CASE2() { 
    $('#firstname').val("Joe") 
    $('#lastname').val("Schmo") 
    $('#age').val("23") 
} 
</script>

來源

2015-07-04 12:16:03 Wellspring

感謝您的輸入源泉。我會嘗試一下，看看它是否有效。但是，是否有一種方法可以在保留在同一頁面上的同時單擊配置文件按鈕，並只用單選按鈕顯示配置文件？無論是出現的小文本字段還是等等。謝謝 – Sweaver

使用帶有無線電選項的按鈕自動填充表格

回答

相關問題