Автоматическое заполнение формы с помощью кнопки с настройками радио

Мне было интересно, можно ли заполнить форму, нажав кнопку, которая отображает список переключателей, которые вы выбрали бы одним из них, и заполнить форму выбор и поля, которые вы сделали. На данный момент я сделал форму с помощью кнопки и требуемых данных (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

Автоматическое заполнение формы с помощью кнопки с настройками радио

ответ

Смежные вопросы