Search code examples
jqueryauto-populate

jquery to autopopulate field with a constructed url

I am making this much harder than it has to be, so I am stopping and starting from the beginning.

I want to use jquery to auto populate a url field for a client.

As the client types in the info, I want to autopop the Complete Url field

For example: when they start typing http://www.yahoo.com/finance (I want that to appear, as each letter is typed, in the Complete URL field) then I need the input from the URL1 field to be added as each letter is enter then then this ?cid=(lz)washcom(tz) [I will just stick this in a variable] and then the value from the url2 field

At the end of all thism the Complete URL field would read:

http://www.yahoo.com/finance/tracer?cid=(lz)washcom(tz)tracer_long_shore

of course if they remove any of the data from the fields, I want it to clear from the Complete URL field

Do anyone know how to do this:

jsFiddle here: http://jsfiddle.net/justmelat/YWZPR/

HTML Code Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>
<body>
<table border="1" width="85%">
<tr>
<td>Center Name:</td>
<td><input id="ctrName" type="text" /></td>
</tr>
<tr>
<td>URL:</td>
<td><input id="mainURL" type="text" /></td>
</tr>
<tr>
<td>url1 / url2:</td>
<td><input id="url1" type="text" size="15" /> / <input id="url2" type="text" size="15" /></td>
</tr>
<tr>
<td>Complete URL:</td>
<td><input id="completeURL" type="text" /></td>
</tr>
</table>
</body>
</html>
Solution

  • I think that this updated fiddle is what you are looking for. I'm a little unclear about all the ordering and stuff, but does this accomplish what you are trying to do?

    I added this jQuery code:

    $("input").keyup(
  function(){
        $("#completeURL").val($("#mainURL").val() + "/" + $("#url1").val() + "/?cid=(lz)washcom(tz)" + $("#url2").val());
    }
);​

    It just creates the correct string each time that you keyup. Let me know if I understood what you are trying to accomplish correctly.