使用URL变量预先填充HTML5表单

Question

我有以下HTML代码：

<section id="two" class="wrapper alt style2">
<section dir="rtl">
    <center>
        <h1> מילוי פרטים אישיים לתעודת אחריות</h1>
    </center>
    <br>
    <!-->
    <form method="post" action="#">
        <!-->
        <form id="frmcontainer6" method="post" enctype="application/x-www-form-urlencoded" action="https://web.mxradon.com/t/FormTracker.aspx" onsubmit="return lpContentGrabber('frmcontainer6');">
            <!-->
            <form action="mailto:graphics@emka.co.il" method="post">
                <!-->
                <div class="row uniform">
                    <div class="6u 12u$(xsmall)">
                        <input type="text" id="EfullName" name="EfullName" maxlength="100" value="" placeholder="שם מלא" autocomplete="off" />
                    </div>
                    <div class="6u$ 12u$(xsmall)">
                        <input type="email" name="email" id="email" value="" placeholder="Email" required />
                    </div>
                    <div class="6u 12u$(xsmall)">
                        <input type="text" name="PhoneNu" id="PhoneNu" value="" placeholder="מספר טלפון" required />
                    </div>
                    <div class="6u$ 12u$(xsmall)">
                        <input type="text" name="CAdress" id="CAdress" value="" placeholder="כתובת" required />
                    </div>
                    <br>
                    <div class="6u 12u$(xsmall)">
                        <input type="text" id="Pmodel" name="Pmodel" maxlength="100" value="" autocomplete="off">
                    </div>
                    <div class="6u$ 12u$(xsmall)">
                        <input type="text" name="SerialNu" value="SN12-8486-EF19-8541" id="SerialNu" readonly/>
                    </div>
                    <div class="12u$">
                        <textarea name="message" id="message" placeholder="הערות נוספות" rows="6"></textarea>
                    </div>
                    <div class="image center">
                        <input type="checkbox" id="demo-copy" name="demo-copy">
                        <label for="demo-copy">סמן לקבלת מבצעים והנחות למייל</label>
                    </div>
                    <div class="12u$">
                        <ul class="actions">
                            <center>
                                <li>
                                    <input type="submit" value="שלח טופס" class="special" />
                                </li>
                                <li>
                                    <button type="reset" value="Reset">נקה טופס</button>
                                </li>
                            </center>
                        </ul>
                    </div>
                </div>
            </form>
</section>

​

我正在尝试通过URL预填充Pmodel值，方法如下

www.ee.com?Pmodel=123456

但它不起作用。

我做错了什么？

Answer 1

您只是将其作为URL参数插入。为了预填充值，您需要从URL中检索它并将其作为Pmodel元素的值插入。

在页面加载后，您可以在服务器端(例如，PHP、Java，取决于您的服务器)或在客户端使用JavaScript完成此操作。

例如(JavaScript)在页面末尾插入以下脚本：

<script type="text/javascript">
    //get all URL parameters
    var parameters = window.location.search.substring(1).split("&");
    var splitParam, value;
    //cycle through them and find the correct one
    for(var i=0; i<parameters.length; i++){
        splitParam = parameters[i].split("=");
        if(splitParam[0]=="Pmodel"){
            //get its value
            value = splitParam[1];
            break;
        }
    }
    if(value){
        //set the input value
        document.getElementById("Pmodel").value = value;
    }
</script>

填充示例：jsFiddle