Author Topic: Input user data to complete URL using only HTML (Read 5106 times)

questorfla · « **on:** January 19, 2017, 12:22 AM »

This might be simpler that I am showing below but the idea is to allow a user to complete a URL link and go there.

My best arrangement only works insofar as it doesn't crash.
A lot of the info below could even be deleted and it still 'works' to get to oracle but nothing i have tried can take the input from the user and add it to the href statement.

Any info appreciated even if it means using a completely alternative method as long as it Looks and works as intended. (and is short

)

[Select]

<!DOCTYPE html>
<html>
<body>
<form name ="gotourl" action=" " method="post"
<p> Enter Final Word Here -
<input type="text" name="fword"
<br><br>
<a href="https://www.oracle.com/"fword>”CLICK to go”</a>
</form-name>
</body>
</html>

Example would be if you want to go to:
https://www.oracle.com/sun

But you only wanted the use to enter the word "sun" in the box displayed Typing it in the box and clicking the work "click to go" just goes to oracle.com and the "sun" subdirectory does not get added.

Something like this would probably be proper using a lot of PHP but I was hoping for a simpler HTML version to add an input to a line of code and go there.

Since I admittedly don't how to do it, there may well be one

4wd · « **Reply #1 on:** January 19, 2017, 05:04 AM »

Seemed to work here OK:

Code: HTML5 [Select]

<HTML>
  <HEAD>
    <SCRIPT LANGUAGE="JavaScript">
      function goToPage(form) {
        var initial = "http://www.oracle.com/";
        var extension = ".html";
        var newurl = initial + form.subpage.value + extension;
        window.location.assign(newurl);
      }
    </SCRIPT>
    <TITLE>Redirect Test</TITLE>
  </HEAD>
  <BODY>
    <P>
    <FORM name="form" action="" method="GET">
      Input word: 
      <INPUT type="text" name="subpage" value="">
      <INPUT type="button" Name="button" value="GO" onClick="goToPage(this.form);">
    </FORM>
  </BODY>
</HTML>

questorfla · « **Reply #2 on:** January 19, 2017, 11:06 AM »

Only one minor edit and 4WD saved the day again!

As below, I only added '/index' to var in your code so the page opens in the browser. !perfect!

I was trying to skimp too much

I was hoping to get by using the "form" setup by itself but could not manage the last bit whether I used "get" or "post" or ??

You are a Lifesaver! >>as usual

Hope you enjoyed a Great Christmas PLUS 'Boxing Day'

Us poor Yanks only get Christmas

uhm ...Well Plus
New Years Day

and of course

INAUGURATION DAY!

[Select]

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function goToPage(form) {
var initial = "http://www.oracle.com/";
var extension = "/index.html";
var newurl = initial + form.subpage.value + extension;
window.location.assign(newurl);
}
</SCRIPT>
<TITLE>Redirect Test</TITLE>
</HEAD>
<BODY>
<P>
<FORM name="form" action="" method="GET">
Input word:
<INPUT type="text" name="subpage" value="">
<INPUT type="button" Name="button" value="GO" onClick="goToPage(this.form);">
</FORM>
</BODY>
</HTML>

mouser · « **Reply #3 on:** January 19, 2017, 11:44 AM »

Just wanted to say it's great to see people helping each other out on little projects like this

questorfla · « **Reply #4 on:** January 19, 2017, 12:31 PM »

Just wanted to say it's great to see people helping each other out on little projects like this
-mouser (January 19, 2017, 11:44 AM)

Thanks Mouser: DC has been my 100% ALL TIME BEST site for "goTo" help.
The "other guys" don't come close.

Shades · « **Reply #5 on:** January 19, 2017, 06:58 PM »

Us poor Yanks only get
INAUGURATION DAY!
-questorfla (January 19, 2017, 11:06 AM)

Za vashe zdorov’ye! or should I say: ваше здоровье?

Yep...to the basement we go!

4wd · « **Reply #6 on:** January 20, 2017, 05:43 PM »

Regarding the testing to see if the destination is valid before redirecting to it - below is what I've tried to work out from information on jQuery but I've obviously got something wrong since it doesn't seem to work.

Anyone knowledgeable in jQuery able to fix what seems to me to be a simple problem?

Code: HTML5 [Select]

<HTML>
  <HEAD>
    <SCRIPT src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></SCRIPT>
    <SCRIPT src="urlExists.js"></script>
    <SCRIPT LANGUAGE="JavaScript">
      function goToPage(form) {
        var initial = "https://www.oracle.com/"
        var extension = "/index.html";
        var newurl = initial + form.subpage.value + extension;
        alert(newurl);
        urlExists(newurl, function(exists){
          alert(exists);
          if (exists) {
            alert('URI exists');
            window.location.assign(newurl);
          } else {
            alert("URI doesn't exist");
          }
        });
      }
    </SCRIPT>
    <TITLE>Redirect Test</TITLE>
  </HEAD>
  <div style="margin-right:auto;margin-left:auto;width:600px;height:120px;border:10px solid #212189;">
  <BODY>
    <P><br>
    <FORM name="form" action="" method="GET">
      &emsp;&emsp;&emsp;Type Code Word Into Box - Click GO: 
      <INPUT type="text" name="subpage" value="">
      <INPUT type="button" Name="button" value="GO" onClick="goToPage(this.form);">
    </FORM>
  </BODY>
</HTML>
</div>

Code: Javascript [Select]

/* urlExists.js
 
https://stackoverflow.com/questions/4301968/checking-a-url-in-jquery-javascript
 */
function urlExists(url, callback){
  $.ajax({
    type: 'HEAD',
    url: url,
    success: function(){
      callback(true);
    },
    error: function() {
      callback(false);
    }
  });
}

Or is it a problem with cross domain request restrictions?

Author Topic: Input user data to complete URL using only HTML (Read 5106 times)

questorfla

Input user data to complete URL using only HTML

4wd

Re: Input user data to complete URL using only HTML

questorfla

Re: Input user data to complete URL using only HTML

mouser

Re: Input user data to complete URL using only HTML

questorfla

Re: Input user data to complete URL using only HTML

Shades

Re: Input user data to complete URL using only HTML

4wd

Re: Input user data to complete URL using only HTML