Home | Blog | Software | Reviews and Features | Forum | Help | Donate | About us
topbanner_forum
  *

avatar image

Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length
  • December 15, 2017, 01:58 PM
  • Proudly celebrating 10 years online.
  • Donate now to become a lifetime supporting member of the site and get a non-expiring license key for all of our programs.
  • donate

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

questorfla

  • Supporting Member
  • Joined in 2012
  • **
  • Posts: 524
  • Fighting Slime all the Time
    • View Profile
    • Donate to Member
Input user data to complete URL using only HTML
« 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 :) )

<!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

  • Supporting Member
  • Joined in 2006
  • **
  • Posts: 4,704
    • View Profile
    • Donate to Member
Re: Input user data to complete URL using only HTML
« Reply #1 on: January 19, 2017, 05:04 AM »
Seemed to work here OK:

Code: HTML5 [Select]
  1.   <HEAD>
  2.     <SCRIPT LANGUAGE="JavaScript">
  3.       function goToPage(form) {
  4.         var initial = "http://www.oracle.com/";
  5.         var extension = ".html";
  6.         var newurl = initial + form.subpage.value + extension;
  7.         window.location.assign(newurl);
  8.       }
  9.     </SCRIPT>
  10.     <TITLE>Redirect Test</TITLE>
  11.   </HEAD>
  12.   <BODY>
  13.     <P>
  14.     <FORM name="form" action="" method="GET">
  15.       Input word:
  16.       <INPUT type="text" name="subpage" value="">
  17.       <INPUT type="button" Name="button" value="GO" onClick="goToPage(this.form);">
  18.     </FORM>
  19.   </BODY>
  20. </HTML>

questorfla

  • Supporting Member
  • Joined in 2012
  • **
  • Posts: 524
  • Fighting Slime all the Time
    • View Profile
    • Donate to Member
Re: Input user data to complete URL using only HTML
« Reply #2 on: January 19, 2017, 11:06 AM »
Only one minor edit and 4WD saved the day again!   :Thmbsup:
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   8)
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! 

 

<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

  • First Author
  • Administrator
  • Joined in 2005
  • *****
  • Posts: 37,700
    • View Profile
    • Mouser's Software Zone on DonationCoder.com
    • Read more about this member.
    • Donate to Member
Re: Input user data to complete URL using only HTML
« 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  :up:

questorfla

  • Supporting Member
  • Joined in 2012
  • **
  • Posts: 524
  • Fighting Slime all the Time
    • View Profile
    • Donate to Member
Re: Input user data to complete URL using only HTML
« 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  :up:

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

Shades

  • Member
  • Joined in 2006
  • **
  • Posts: 2,274
    • View Profile
    • Donate to Member
Re: Input user data to complete URL using only HTML
« Reply #5 on: January 19, 2017, 06:58 PM »
Us poor Yanks only get
 INAUGURATION DAY! 

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

Yep...to the basement we go!  :P

4wd

  • Supporting Member
  • Joined in 2006
  • **
  • Posts: 4,704
    • View Profile
    • Donate to Member
Re: Input user data to complete URL using only HTML
« 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]
  1.   <HEAD>
  2.     <SCRIPT src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></SCRIPT>
  3.     <SCRIPT src="urlExists.js"></script>
  4.     <SCRIPT LANGUAGE="JavaScript">
  5.       function goToPage(form) {
  6.         var initial = "https://www.oracle.com/"
  7.         var extension = "/index.html";
  8.         var newurl = initial + form.subpage.value + extension;
  9.         alert(newurl);
  10.         urlExists(newurl, function(exists){
  11.           alert(exists);
  12.           if (exists) {
  13.             alert('URI exists');
  14.             window.location.assign(newurl);
  15.           } else {
  16.             alert("URI doesn't exist");
  17.           }
  18.         });
  19.       }
  20.     </SCRIPT>
  21.     <TITLE>Redirect Test</TITLE>
  22.   </HEAD>
  23.   <div style="margin-right:auto;margin-left:auto;width:600px;height:120px;border:10px solid #212189;">
  24.   <BODY>
  25.     <P><br>
  26.     <FORM name="form" action="" method="GET">
  27.       &emsp;&emsp;&emsp;Type Code Word Into Box - Click GO:
  28.       <INPUT type="text" name="subpage" value="">
  29.       <INPUT type="button" Name="button" value="GO" onClick="goToPage(this.form);">
  30.     </FORM>
  31.   </BODY>
  32. </HTML>
  33. </div>

Code: Javascript [Select]
  1. /* urlExists.js
  2.  
  3. https://stackoverflow.com/questions/4301968/checking-a-url-in-jquery-javascript
  4.  */
  5. function urlExists(url, callback){
  6.   $.ajax({
  7.     type: 'HEAD',
  8.     url: url,
  9.     success: function(){
  10.       callback(true);
  11.     },
  12.     error: function() {
  13.       callback(false);
  14.     }
  15.   });
  16. }

Or is it a problem with cross domain request restrictions?