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:[email protected]" 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?

Dropout · Accepted Answer · 2015-05-15 09:45:32Z

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

answered May 15, 2015 at 9:45

Dropout

14k10 gold badges59 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dropout Over a year ago

Within the cycles the splitParam[0] is the parameter's name and splitParam[1] is its value.

Dropout Over a year ago

I'd really appreciate if you could mark this as the right answer. Thanks!

Collectives™ on Stack Overflow

Pre-populating HTML5 form with URL variable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related