将文本字段值传递给表单中的url参数

Question

We are trying to register users to a webinar and the only way to do it is via a one-click registration link that is normally used on an email. But we need to use this link on an optin form as well.

https://register.webinar.com/auto-register?webid=69bb17b947&memberid=39867&firstname=yourname&email=[e-mail]&schedule=1

We have three schedules to choose from and this is set on the parameter 'schedule=X'

I'm using radio button with onclick action so that the submit link will changed based on the schedule chosen. e.g.

<form accept-charset="UTF-8" action="submit.php" method="POST" id="myForm">
    <label for="FirstName">First Name *</label>
    <input id="FirstName" name="FirstName" type="text" />
    <label for="Email">Email *</label>
    <input id="Email" name="Email" type="text" />
    <div class="radio_form">
            <input name="sel_schedule" type="radio" value="https://app.webinarjam.net/ew/auto-register?webicode=69bb17b947&memberid=39867&firstname=yourname&email=[e-mail]&schedule=1" onclick="javascript:document.getElementById('next_url').href=this.value;" checked="checked">
            <label>Schedule 1</label>

            <input name="sel_schedule" type="radio" value="https://app.webinarjam.net/ew/auto-register?webicode=69bb17b947&memberid=39867&firstname=yourname&email=[e-mail]&schedule=2" onclick="javascript:document.getElementById('next_url').href=this.value;">
            <label>Schedule 2</label>

            <input name="sel_schedule" type="radio" value="https://app.webinarjam.net/ew/auto-register?webicode=69bb17b947&memberid=39867&firstname=yourname&email=[e-mail]&schedule=3" onclick="javascript:document.getElementById('next_url').href=this.value;">
            <label>Schedule 3</label>
    </div>
<div class="submit_form">
    <a id="next_url" name="next_url" href="https://app.webinarjam.net/ew/auto-register?webicode=69bb17b947&memberid=39867&firstname=yourname&email=[e-mail]&schedule=1" onclick="document.getElementById('myForm').submit();">Submit</a>

Now the other issue, how can I pass the field values for the name and email on the registration link before they click on the submit button? I thought of using onchange for the text fields but I don't know how to pass the info in the url parameter of the registration link.

Thanks in advance!

Answer 1

You can access url parameters and use those to populate form fields like this -

<form accept-charset="UTF-8" action="submit.php" method="POST" id="myForm">
<label for="FirstName">First Name *</label>
<input id="FirstName" name="FirstName" type="text" />
<label for="Email">Email *</label>
<input id="Email" name="Email" type="text" />
<div class="radio_form">
        <input name="sel_schedule" type="radio" value="https://app.webinarjam.net/ew/auto-register?webicode=69bb17b947&memberid=39867&firstname=yourname&email=[e-mail]&schedule=1" onclick="javascript:document.getElementById('next_url').href=this.value;" checked="checked">
        <label>Schedule 1</label>

        <input name="sel_schedule" type="radio" value="https://app.webinarjam.net/ew/auto-register?webicode=69bb17b947&memberid=39867&firstname=yourname&email=[e-mail]&schedule=2" onclick="javascript:document.getElementById('next_url').href=this.value;">
        <label>Schedule 2</label>

        <input name="sel_schedule" type="radio" value="https://app.webinarjam.net/ew/auto-register?webicode=69bb17b947&memberid=39867&firstname=yourname&email=[e-mail]&schedule=3" onclick="javascript:document.getElementById('next_url').href=this.value;">
        <label>Schedule 3</label>
</div>
<div class="submit_form">
    <a id="next_url" name="next_url" href="https://app.webinarjam.net/ew/auto-register?webicode=69bb17b947&memberid=39867&firstname=yourname&email=[e-mail]&schedule=1" onclick="document.getElementById('myForm').submit();">Submit</a>
</div>
    </form>

    <script>
    var getUrlParameter = function getUrlParameter(sParam) {
        var sPageURL = decodeURIComponent(window.location.search.substring(1)),
            sURLVariables = sPageURL.split('&'),
            sParameterName,
            i;

        for (i = 0; i < sURLVariables.length; i++) {
            sParameterName = sURLVariables[i].split('=');

            if (sParameterName[0] === sParam) {
                return sParameterName[1] === undefined ? true : sParameterName[1];
            }
        }
    };

    var webid = getUrlParameter('webid');
    var firstName = getUrlParameter('firstname');
    var email = getUrlParameter('email');
    var schedule = getUrlParameter('schedule');

    document.getElementById("FirstName").value = firstName;
    document.getElementById("Email").value = email;
    </script>