Sunday, February 15, 2009

Javascript page redirection

The following javascript will:
  • Create a form on the fly and send post request without using the underlying form action tag
  • Post only the fields you want
  • You can put the following code in the RadEditor




<input type=hidden name="retURL" value="http://www.whatever.com.au/">

<label for="salutation">Salutation</label>

<select id="salutation" name="salutation">

<option value="">--None--</option>

<option value="Mr">Mr</option>

<option value="Ms">Ms</option>

<option value="Miss">Miss</option>

<option value="Mrs">Mrs</option>

<option value="Dr">Dr</option>

<option value="Prof">Prof</option>

<option value="Hon">Hon</option>

<option value="Sir">Sir</option>

<option value="Lady">Lady</option>

<option value="Capt">Capt</option>

</select><br>

<label for="first_name">First Name</label><input id="first_name" maxlength="40" name="first_name" size="20" type="text" /><br>

<label for="last_name">Last Name</label><input id="last_name" maxlength="80" name="last_name" size="20" type="text" /><br>

<label for="email">Email</label><input id="email" maxlength="80" name="email" size="20" type="text" /><br>

<label for="phone">Phone</label><input id="phone" maxlength="40" name="phone" size="20" type="text" /><br>

<label for="description">Description</label><textarea name="description"></textarea><br>

<label for="street">Address</label><textarea name="street"></textarea><br>

<label for="city">City</label><input id="city" maxlength="40" name="city" size="20" type="text" /><br>

<label for="state">State/Province</label><input id="state" maxlength="20" name="state" size="20" type="text" /><br>

<label for="zip">Zip</label><input id="zip" maxlength="20" name="zip" size="20" type="text" /><br>

<label for="title">Title</label><input id="title" maxlength="40" name="title" size="20" type="text" /><br>

<label for="fax">Fax</label><input id="fax" maxlength="40" name="fax" size="20" type="text" /><br>

<label for="mobile">Mobile</label><input id="mobile" maxlength="40" name="mobile" size="20" type="text" /><br>

<label for="lead_source">Lead Source</label><select id="lead_source" name="lead_source"><option value="">--None--</option><option value="Details Referred">Details Referred</option>

<option value="Direct Mail">Direct Mail</option>

<option value="Display">Display</option>

<option value="Email">Email</option>

<option value="Event">Event</option>

<option value="Mobile">Mobile</option>

<option value="Open House">Open House</option>

<option value="Phone">Phone</option>

<option value="Walk-In">Walk-In</option>

<option value="Website">Website</option>

</select><br>

Project Office:<select id="00N20000000lQgj" name="00N20000000lQgj" title="Project Office"><option value="">--None--</option><option value="Abervale">Abervale</option>

<option value="Bingara Gorge">Bingara Gorge</option>

<option value="Blakeview">Blakeview</option>

<option value="Burwood Terrace">Burwood Terrace</option>

<option value="Caesia Gardens">Caesia Gardens</option>

<option value="Caroline Springs">Caroline Springs</option>

<option value="Craigieburn">Craigieburn</option>

<option value="Daikyo">Daikyo</option>

<option value="Edgewater">Edgewater</option>

<option value="Fiddlers Green">Fiddlers Green</option>

<option value="Forest Gardens">Forest Gardens</option>

<option value="Forest Hills">Forest Hills</option>

<option value="Glenaeon">Glenaeon</option>

<option value="Gawler East">Gawler East</option>

<option value="Highvale">Highvale</option>

<option value="Jacksons Landing">Jacksons Landing</option>

<option value="Keperra">Keperra</option>

<option value="Lakeside Pakenham">Lakeside Pakenham</option>

<option value="Laurimar">Laurimar</option>

<option value="Lutanda">Lutanda</option>

<option value="Mawson Lakes">Mawson Lakes</option>

<option value="Nelsons Grove">Nelsons Grove</option>

<option value="Nelsons Ridge">Nelsons Ridge</option>

<option value="Peppertree Hills">Peppertree Hills</option>

<option value="Pittwater">Pittwater</option>

<option value="Rochford Place">Rochford Place</option>

<option value="Rocky Springs">Rocky Springs</option>

<option value="Rouse Hill">Rouse Hill</option>

<option value="Springfield Lakes">Springfield Lakes</option>

<option value="St Marys">St Marys</option>

<option value="St Patricks Estate">St Patricks Estate</option>

<option value="Sunshine Coast">Sunshine Coast</option>

<option value="The Terraces">The Terraces</option>

<option value="Trinity Green">Trinity Green</option>

<option value="Varsity Lakes">Varsity Lakes</option>

<option value="Victoria Harbour">Victoria Harbour</option>

<option value="Woodlands">Woodlands</option>

<option value="Yarrabilba">Yarrabilba</option>

</select><br>

<label for="emailOptOut">Email Opt Out</label>

<input id="emailOptOut" name="emailOptOut" type="checkbox" value="1" /><br>

<input type="button" onclick="post_to_url('http://www.test.com', 'post');" value="Submit">

<script type="text/javascript">

function post_to_url(path, method)

{

method = method "post"; // Set method to post by default, if not specified.

// The rest of this code assumes you are not using a library.

// It can be made less wordy if you use one.

var form = document.createElement("form");

form.setAttribute("method", method);

form.setAttribute("action", path);

var sal = document.getElementById("salutation");

createHidden("salutation", sal.options[sal.selectedIndex].value, form);

createHidden("first_name", document.getElementById('first_name').value, form);

createHidden("last_name", document.getElementById('last_name').value, form);

createHidden("email", document.getElementById('email').value, form);

createHidden("phone", document.getElementById('phone').value, form);

createHidden("description", document.getElementById('description').value, form);

createHidden("street", document.getElementById('street').value, form);

createHidden("city", document.getElementById('city').value, form);

createHidden("state", document.getElementById('state').value, form);

createHidden("zip", document.getElementById('zip').value, form);

createHidden("title", document.getElementById('title').value, form);

createHidden("fax", document.getElementById('fax').value, form);

createHidden("mobile", document.getElementById('mobile').value, form);

var lead = document.getElementById("lead_source");

createHidden("lead_source", lead.options[lead.selectedIndex].value, form);

var projOffice = document.getElementById("00N20000000lQgj");

createHidden("00N20000000lQgj", projOffice.options[projOffice.selectedIndex].value, form);

var opt = document.getElementById("emailOptOut");

var ischecked;

if(opt.checked){

ischecked = 1

}

else{

ischecked = 0

}

createHidden("emailOptOut", ischecked, form);

document.body.appendChild(form); //This is necessary

form.submit();

}

function createHidden(hiddenName, hiddenValue, myForm)

{

var hiddenField = document.createElement("input");

hiddenField.setAttribute("type", "hidden");

hiddenField.setAttribute("name", hiddenName);

hiddenField.setAttribute("value", hiddenValue);

myForm.appendChild(hiddenField);

}

</script>


Reference:
Javascript Post Request like a Form Submit
blog comments powered by Disqus