Pass variable from URL to PHP to Javascript and Display Value in Input Field

Question

I have an email subscriber form that I'm trying to pre-populate with an email address (which will show up in the form).

The email address to use is included in the URL

http://www.domain.com/[email protected]  

The input field in the form is:

<input class="text" id="awf_field-48578149" type="text" name="email" value="" tabindex="501"  />

The page is on a site running Wordpress as the CMS, so I don't want to execute PHP using an "allow PHP" plugin due to security issues. I tried creating a custom PHP page template and including language to assign the variable in PHP and then HTML via javascript.

First, I created a custom-page.php page template including the following:

<?php
/*
Get email from URL and set to email1 variable
*/
$email1 = $_GET['email'];
?>

<script type="text/javascript">
    var email2 = <?php echo json_encode($email1); ?>;
    document.getElementById("awf_field-48578149").value = email2;
</script>

Next, I included the form code on a Wordpress page using the custom-page.php template.

The challenge is to get the variable value to show up in the input box when the page loads (pre-populated).

I'm by absolutely no means a coder, but would appreciate help. Any ideas?

Here's the form code (on the Wordpress page using the template):

<!-- AWeber Web Form Generator 3.0 -->
<form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl"  >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="787465482" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="mhpc001" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou-coi.htm?m=text" id="redirect_3b0dde6df528b65fe85ebedf277b6e10" />

<input type="hidden" name="meta_adtracking" value="Existing_Owner" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="name,email" />

<input type="hidden" name="meta_tooltip" value="" />
</div>
<div id="af-form-787465482" class="af-form"><div id="af-header-787465482" class="af-header"><div class="bodyText"><p>&nbsp;</p></div></div>
<div id="af-body-787465482"  class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-48578148">Name: </label>
<div class="af-textWrap">
<input id="awf_field-48578148" type="text" name="name" class="text" value=""  tabindex="500" />
</div>
<div class="af-clear"></div></div>
<div class="af-element">
<label class="previewLabel" for="awf_field-48578149">Email: </label>
<div class="af-textWrap"><input class="text" id="awf_field-48578149" type="text" name="email" tabindex="501"  />
</div><div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<input name="submit" class="submit" type="submit" value="Submit" tabindex="502" />
<div class="af-clear"></div>
</div>
</div>
</div>
<div style="display: none;"><img src="http://forms.aweber.com/form/displays.htm?id=7BzsLGysLBxM" alt="" /></div>
</form>

<!-- /AWeber Web Form Generator 3.0 -->

Answer 1

I think it should be:

<script type="text/javascript">
    var email2 = "<?php echo $_GET['email']; ?>";
    document.getElementById("awf_field-48578149").value = email2;
</script>

Answer 2

Try wrapping the code in :

jQuery(document).ready(function(){ //code here });

This will make the browser wait to execute the code until the page has finished loading. Also, you may want to think about make sure the string passed to the Javascript is only an email address and not code to protect yourself from cross-site scripting.