Javascript 使用带有单选选项的按钮自动填充表单_Javascript_Php_Jquery_Html_Json

Javascript 使用带有单选选项的按钮自动填充表单

javascript php jquery html json

Javascript 使用带有单选选项的按钮自动填充表单,javascript,php,jquery,html,json,Javascript,Php,Jquery,Html,Json,我想知道是否可以通过单击一个按钮来填写表单，该按钮显示一个单选按钮列表，您可以从中选择一个按钮，该按钮将用您所做的选择和字段填写表单。到目前为止，我已经制作了表单，带有一个按钮和所需的dataJSON，但是，我想将所有这些都整合到一个表单中。例如，一些代码是： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.

我想知道是否可以通过单击一个按钮来填写表单，该按钮显示一个单选按钮列表，您可以从中选择一个按钮，该按钮将用您所做的选择和字段填写表单。到目前为止，我已经制作了表单，带有一个按钮和所需的dataJSON，但是，我想将所有这些都整合到一个表单中。例如，一些代码是：

<!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>

任何帮助都将不胜感激。

您应该能够使用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>

您应该能够使用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>

感谢您对Wellspring的支持。我将尝试一下，看看它是否有效。但是，是否有一种方法可以在保持在同一页面上的同时单击“配置文件”按钮，并仅使用单选按钮显示配置文件？不管是出现的一个小文本字段还是其他。感谢Wellspring的输入。我将尝试一下，看看它是否有效。但是，是否有一种方法可以在保持在同一页面上的同时单击“配置文件”按钮，并仅使用单选按钮显示配置文件？无论是一个小的文本字段出现或等。谢谢