Javascript Form Pre filled with URL

  • Resolved James Kenny Photo

    (@james-kenny-photo)


    10 years, 1 month ago

    Hi All,

    I wonder if someone might be able to help me fix a small problem I’m having. It’s probably quite a basic fix, but I am no coder!

    I have recently built a proofing section on my photography website, where clients can view and submit their selections after I have completed a shoot for them.

    Essentially, after each job, I send them a link to their particular set of proofs, where they can log in with their client ref and password.

    I am trying to make a ‘portal’ page, where there is a simple form field, into which they can enter the last part of the link and be forwarded on to their proofs.

    The idea is that the form field is ‘pre-filled’ with the first part of the URL (www.jkenny.co.uk/proofing/.…..) and they simply input the last part of their link, click go, and then are taken to their individual log in area.

    I’ve almost got it working, but when they click ‘Go’, the link has ‘?URL=’ added on to it… I’m not sure why this is happening, and I can’t see a way to fix it.

    The page the form is on is located at http://www.jkenny.co.uk/proofing and below is the code I’ve used to make the form. Can anyone see where I’m going wrong?

    <script type="text/javascript">// <![CDATA[
function convertURL() {  document.go.url.value = document.go.url.value.replace( /\s/g, "");  var url = document.getElementsByName( "url")[0];  var fullurl = document.getElementsByName( "fullurl")[0];  fullurl.value = "http://www.jkenny.co.uk/proofing/"+ url.value;
// ]]></script>

<form name="go" onsubmit="convertURL();location.href=url.value;return false">
<h2 style="text-align: center;"></h2>
<h2 style="text-align: center;"></h2>
<p style="text-align: center;">Welcome to the online proofing portal. To continue to your login page, please complete the URL below using the details provided to you. If you have not yet received your login information, please <a href="http://www.jkenny.co.uk/contact/">get in touch</a>.</p>
 

<span style="color: #ffffff;">.</span>

 
<h2 style="text-align: center;"></h2>
<h1 style="text-align: center;"><em><span style="color: #c0c0c0;">www.jkenny.co.uk/proofing/</span></em><input type="text" name="url" /></h1>
 

 

 
<p style="text-align: center;"><input type="submit" value="Proceed to Login" /></p>
 <span style="color: #ffffff;">.</span>

</form>

    Thanks in advance!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 1 month ago

    Who wrote that script?

    Thread Starter James Kenny Photo

    (@james-kenny-photo)

    10 years, 1 month ago

    The majority of it came from a post I found where someone was trying to do something similar. I chopped it around to see if I could make it work for what I wanted… but I don’t know anything about that kind of thing, so obviously it didn’t work hah!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 1 month ago

    Just so that it’s a bit readable for other people here, here’s the same JS again:

    <script type="text/javascript">
    // <![CDATA[
    function convertURL() {
        document.go.url.value = document.go.url.value.replace(/\s/g, "");
        var url = document.getElementsByName("url")[0];
        var fullurl = document.getElementsByName("fullurl")[0];
        fullurl.value = "http://www.jkenny.co.uk/proofing/" + url.value;
        // ]]>
</script>

    Thread Starter James Kenny Photo

    (@james-kenny-photo)

    10 years, 1 month ago

    Thanks Andrew!

    For all I know, there’s probably another, much cleaner way to do what I’m looking for, but after spending a couple of hours searching various forums, that was the closest thing I came to.

    Thread Starter James Kenny Photo

    (@james-kenny-photo)

    10 years, 1 month ago

    <style>
p{
	color:#999;
	font-size:14px;
}

h1,h2{
	text-align:center;
}
.middle{
	color:#999;
	text-align:center;
	font-size:25pt;
}
</style>
<script type="text/javascript">
function sendURL() {
	var myurl = 'http://www.jkenny.co.uk/proofing/';
	var url = document.getElementById("url").value.replace( /\s/g, "");
	//alert(myurl+url);
	location.href = myurl+url;
}
</script>

<form  onsubmit="sendURL();return false;">
<p>Welcome to the online proofing portal. To continue to your login page, please complete the URL below using the details provided to you. If you have not yet received your login information, please get in touch.</p>

<div class="middle">www.jkenny.co.uk/proofing/<input type="text" id="url" name="url" value="" />

<input type="submit" value="Proceed to Login" />
</div>
</form>

    A user on another forum sent me that above, which works =) Thought I’d post it so others could see a solution

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 1 month ago

    Thanks for sharing 🙂

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Javascript Form Pre filled with URL’ is closed to new replies.