Help with UI Page - get parameter from URL

[kchorny]

I have built the below UI page (probably not very elegantly) called sd_authorization.  I am getting to this page via a redirect from another ui page, and I am passing the email address through the URL (sd_authorization.do?sysparm_email=anaddress@domain.com).  However, I'm flying by the seat of my pants and need help getting the email address from the URL into the email field on this form, and then setting the field read-only if there is a value in it.

<g:ui_form>
<!-- used in exactly one place -->
<style>
div.sd_auth {
width: 20em;
margin: 1em;
padding: 1em;
padding-top: 0;
border: 1px solid lightgrey;
border-radius: 4px;
}

div.sd_auth div {
margin-top: 1em;
}

div.sd_auth input {
width: 100%;
}

div.sd_auth label {
font-weight: bold;
}

.welcome_content {
margin-left: 1em;
margin-right: 1em;
}

/* make breadcrumbs happy */
.welcome_content A.breadcrumb {
padding: 0 .5em;
margin-bottom: 0;
background-color: transparent;
border-radius: 0;
}
</style>

<div class="sd_auth">
<h5>${gs.getMessage('You have successfully verified your email address. You have been sent an email with the Authorization Code. Once received, complete the below fields and click Submit Authorization Request.','info')}</h5>
<h3>${gs.getMessage('Authorize Service Desk Account')}</h3>
<h5>${gs.getMessage('Starred (*) fields are required')}</h5>
<div>
<label class="control-label" for="email">${gs.getMessage('*Authorization Code')}</label>
<input id="auth_code" type="text" name="auth_code" value="" class="form-control" size="40" autocomplete="off" />
</div>
<div>
<label class="control-label" for="email">${gs.getMessage('*Email address')}</label>
<input id="email" type="text" name="email" value="" class="form-control" size="40" autocomplete="off" />
</div>
<div>
<label class="control-label" for="email">${gs.getMessage('*First Name')}</label>
<input id="first_name" type="text" name="first_name" value="" class="form-control" size="40" autocomplete="off" />
</div>
<div>
<label class="control-label" for="email">${gs.getMessage('*Last Name')}</label>
<input id="last_name" type="text" name="last_name" value="" class="form-control" size="40" autocomplete="off" />
</div>
<div>
<label class="control-label" for="bPhone">${gs.getMessage('*Business Phone')}</label>
<input id="bPhone" type="text" name="bPhone" value="" class="form-control" size="14" autocomplete="off" />
</div>
<div>
<label class="control-label" for="mPhone">${gs.getMessage('Mobile Phone')}</label>
<input id="mPhone" type="text" name="mPhone" value="" class="form-control" size="14" autocomplete="off" />
</div>
<div>
<label class="control-label" for="email">${gs.getMessage('*Personal 4-digit PIN')}</label>
<input id="pin" type="text" name="pin" value="" class="form-control" size="40" autocomplete="off" />
<h5>${gs.getMessage('Please choose your PIN carefully and write it down.')}</h5>
</div>
<div class="text-center">
<button id="reset" class="btn btn-primary" type="button" onclick="checkAuth();return false;">Submit Authorization Request</button>
</div>
<div class="text-center">
<button id="cancel" class="btn btn-default" type="button" style="margin-right:5px" onclick="window.history.back()">Cancel</button>
</div>
</div>
</g:ui_form>

[kchorny]

I'm passing the parameter in the URL successfully.  And I think I can just add this at the very top of the HTML section (directly above what I show in my original post):

<g:evaluate var = "jvar_email">
var emailAddress = '$[sysparm_email]';

emailAddress;

</g:evaluate>

Now I need to edit the below section, which currently shows an input field with no value.  I need it to show the email address that I passed and grabbed, and I need it to be read-only:

<div>
<label class="control-label" for="email">${gs.getMessage('*Email address')}</label>
<input id="email" type="text" name="email" value="" class="form-control" size="40" autocomplete="off" />
</div>

How do I change this section so that it does what I need it to do?

[nayanawadhiya1 · Accepted solution]

Try Below code - 

<div>
<label class="control-label" for="email">${gs.getMessage('*Email address')}</label>
<input id="email" type="text" name="email" value="${jvar_email}" class="form-control" size="40" autocomplete="off" readonly />
</div>

[kchorny]

This worked! Except I had to use value="${emailAddress}" and readonly="true".  Thank you so much!

[Sushma Rudrayai]

Doesnt work

[Abhijeet Upadhy]

Hello kchorny

Use the following code client side to get the email:

Code: var email = window.top.location.toString().split("sysparm_email=")[1].toString();

document.getElementById("email").value = email;

Thanks

Abhijeet Upadhyay