Question

我想知道是否可以通过单击显示单选按钮列表的按钮来填写表单，您可以从中选择一个单选按钮，并使用您选择的字段填写表单。截至目前，我已经使用按钮和所需数据（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"
    }
}

非常感谢任何帮助。

Answer 1

您应该可以使用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>

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

1 个答案: