Pre-populating HTML5 form with URL variable

Question

I have the following HTML code:

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

I'm trying to pre-fill the Pmodel value by URL using somthing like

www.ee.com?Pmodel=123456

but it doesn't work.

What am I doing wrong?

Answer 1

You're just inserting it as a URL parameter. In order to pre-fill the value you need to retrieve it from the URL and insert it as a value for the Pmodel element.

You can do this either on the server side (for example PHP, Java, depends on your server) or on client's side with JavaScript after the page loads.

For example (JavaScript) insert this script on the end of your page:

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

Example for filling: jsFiddle