asked on

Create online embed link generator

Am trying to create an online link generator for clients. The client uses a form to select variables (eg background colour, width, text colour etc), and then the adjusted link appears in a text area box below for him to copy and paste.

At present I have this working as standard form but submit needs to be clicked for the link to be updated in the text area. How to do it, probably with javascript or ajax, so that link immediately updates with a submit button needing to be clicked?

Mangagm

I dont see why you need a submit, probably I dont understand your problem but you might wanna try it this way:

<html>
<head>
<script type="text/javascript">
function generateLink(){

      var aLink = document.getElementById('link');
      var sURL = document.getElementById('URL').value;
      var sValue = document.getElementById('Value').value;

      aLink.innerHTML = sValue;
      aLink.href = sURL;

      var txtCodigo = document.getElementById('codigo');
      var sCodigo = '<a src="'+ sURL +'">' + sValue + '</a>';

      txtCodigo.value = sCodigo;

}
</script>
</head>
<body>
URL <input id="URL" value="http://www.google.com"></input></br>
Value <input id="Value" value="Send me to google." ></input></br>

<br>
<input value="Generate Link" type="button" onclick="generateLink();"></input><br>

<br>
<a id="link" href="javascript:alert('You havent created a link yet.');">Your link will look like this.</a>
<br><br>
Codigo: <input id="codigo" type="textarea" style="width:100%;"></input>
</body>
</html>

Michel Plungjan

You mean

<script type="text/javascript">
function updateLink(theForm) {
  theForm.outputBox.value='<a href=""... style="color:'+theForm.color.value+'">....</a>'
}

<form>
<select name="color" onChange="updateLink(this.form)">
<option value="">Please select</option>
.
.
.
<textarea name="outputBox">...
</form>

Open in new window

pld51

ASKER

Thanks for both. I am looking for an "onchange" rather than "onclick" so that the changes are reflected immediately. Solution of mplungian thus fits. (I used submit as the only way I knew).

mplungian - I actually want the main url part to be dynamic, defined as "if...then" etc. That is, your definition would start: theForm.outputBox.value='<a href="urlstring"... Where urlstring is a variable defined above. The problem is, I only know how to define this in VBScript.

How do I do this? I tried
theForm.outputBox.value='<a href='+<%= urlstring %>+'.......
but this did not work.

At present I have the

Michel Plungjan

If urlstring is from the server just use

theForm.outputBox.value='<a href="<%= urlstring %>" .........

pld51

ASKER

I thought I tried that, but it works. Thanks.

Hopefully last question: I would like the output box to show the initial value of the link, with preset values that appear in form fields. At present it is blank, and if the user does not click in a form field, that default value does not appear in the final link.

I tried this but did not work:- <textarea name="outputBox" id="outputBox" cols="60" rows="5" onLoad="updateLink(form)"></textarea>

The form is simply <form>

Michel Plungjan

no. In the head of the page have
<script type="text/javascript">
window.onload=function() {
updateLink(document.forms[0])
}
</script>

pld51

ASKER

Thanks, the whole form is now almost working perfectly.

The one exception is a checkbox. Onload shows the correct checked value, but if I click to uncheck, the result does not update.

Here is the code used for the checkbox:-
<input name="nl" type="checkbox" id="nl" value="y" checked="checked" onchange="updateLink(this.form)"/>

How to get this checkbox working correctly?

Michel Plungjan

onClick="updateLink(this.form)"/>

pld51

ASKER

For some reason does not work. On clicking, the value in the URL remains fixed, at nl=y.

I tried the unchecked version, <input name="nl" type="checkbox" id="nl" value="y" onClick="updateLink(this.form)"/>, but even unchecked this still returns the checked value in the url, nl=y.

Any last thoughts? Otherwise I will replace checkbox with a dropdown that works.

Michel Plungjan

Since you did not post the updateLink code I cannot tell you why it goes wrong

I would expect something like

someString += (theForm.nl.checked)?theForm.nl.value:"";

pld51

ASKER

It's rather long, but hopefully you can spot the error with the "nl" part:-

theForm.Result.value='<iframe src="<%= urlstring %>'+<%= Request("id2") %>+'&wd='+theForm.wd.value+'&hloop='+theForm.hloop.value+'&bgd='+theForm.bgd.value+'&bgd2='+theForm.bgd2.value+'&nl='+theForm.nl.value+'" name="ifrm" id="ifrm" height="'+theForm.height.value+'" width="'+theForm.width.value+'" frameborder="'+theForm.frameb.value+'" scrolling="'+theForm.scrolling.value+'">'+theForm.errortxt.value+'</iframe>'

Michel Plungjan

That is not readable nor easily modifiable

Here


var html = "";
html += '<iframe src="<%= urlstring %>'+<%= Request("id2") %>';
html += '&wd='+theForm.wd.value;
html += '&hloop='+theForm.hloop.value;
html += '&bgd='+theForm.bgd.value;
html += '&bgd2='+theForm.bgd2.value;
html += '&nl='+(theForm.nl.checked)?theForm.nl.value:"";
html += '" name="ifrm" id="ifrm" height="'+theForm.height.value+'"';
html += ' width="'+theForm.width.value+'";
html += ' frameborder="'+theForm.frameb.value+'"';
html += ' scrolling="'+theForm.scrolling.value+'">';
html += theForm.errortxt.value+'</iframe>'
theForm.Result.value=html;

Open in new window

pld51

ASKER

Thanks, definitely a major improvement! But seems to have a syntax error, all turns blue in the page and does not work. I have zero experience of this kind of JS, so sorry cannot debug. Attached is full coding at present of the 2 functions.

<script type="text/javascript"> 
function updateLink(theForm) { 
var html = ""; 
html += '<iframe src="<%= urlstring %>'+<%= Request("id2") %>'; 
html += '&wd='+theForm.wd.value; 
html += '&hloop='+theForm.hloop.value; 
html += '&bgd='+theForm.bgd.value; 
html += '&bgd2='+theForm.bgd2.value; 
html += '&nl='+(theForm.nl.checked)?theForm.nl.value:""; 
html += '" name="ifrm" id="ifrm" height="'+theForm.height.value+'"'; 
html += ' width="'+theForm.width.value+'"; 
html += ' frameborder="'+theForm.frameb.value+'"'; 
html += ' scrolling="'+theForm.scrolling.value+'">'; 
html += theForm.errortxt.value+'</iframe>'
theForm.Result.value=html;
} 
</script>
<script type="text/javascript">
window.onload=function() {
  updateLink(document.forms[0])
}
</script>

Open in new window

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

pld51

ASKER

Fantastic mplungjan, thanks for prolonged and excellent help. Worked perfectly, only thing still not right was the checkbox but I substituted for dropdown and no problems. Wish I could give more than the max points!