?
Solved

Create online embed link generator

Posted on 2010-01-11
15
Medium Priority
?
393 Views
Last Modified: 2012-05-08
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?
0
Comment
Question by:pld51
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 7
15 Comments
 
LVL 4

Expert Comment

by:Mangagm
ID: 26289349
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>
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 26290644
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

0
 

Author Comment

by:pld51
ID: 26294473
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

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 26297659
If urlstring is from the server just use

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

Author Comment

by:pld51
ID: 26299834
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>
0
 
LVL 75

Expert Comment

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

Author Comment

by:pld51
ID: 26303952
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?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 26303970
onClick="updateLink(this.form)"/>
0
 

Author Comment

by:pld51
ID: 26304653
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.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 26304692
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:"";
0
 

Author Comment

by:pld51
ID: 26305769
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>'
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 26307844
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

0
 

Author Comment

by:pld51
ID: 26309845
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

0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 26311377
Sorry, lost a quote and you had one too many after the urlstring %>
Btw if you get spaces in the url of the iframe, you will need to escape them:
for example html += '&wd='+  escape(theForm.wd.value);

So try this

<html>
<head>
<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;
} 

window.onload=function() {
  updateLink(document.forms[0])
}
</script>

Open in new window

0
 

Author Closing Comment

by:pld51
ID: 31675655
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!
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question