Simple Form Problem

JavaScript
1

Im trying to make a simple form … where you can type a URL into the input box and when you click the button. It will take you to the URL that you typed.


<input type="text" maxlength="100" size="58" name="forum_url">

<input type="button" value="Forums" style="width : 170px; margin: 3px" onClick="location.href='this.document.links.forum_url.value'";

this doesn’t work… what do i do?

2

Your code has both invalid HTML and javascript, the below will work

<form action="" method="get" id="links">
    <input type="text" maxlength="100" size="58" name="forum_url" />
    <input type="button" value="Forums" style="width : 170px; margin: 3px" onclick="window.location=document.forms.links.forum_url.value; return false;" />
</form>
3

Thanks alot! :D:D

4

It works fine except…

Lets say you type in… www.google.com

but my domain is www.domain.com/mydomain

it automatically makes the URL www.domain.com/mydomainwww.google.com

how can i fix this?

5

nevermind… it works fine as long as you put ‘HTTP://’ first… Thanks again!

6

Its actually pretty simple to check for http etc, simply use the code below and it will work fine.

<form action="" method="get" id="links">
    <input type="text" maxlength="100" size="58" name="forum_url" />
    <input type="button" value="Forums" style="width : 170px; margin: 3px" onclick="gotoURL()" />
</form>

<script>
function gotoURL() {
    // Get the URL
    var url = document.forms.links.forum_url.value;
    
    // Make sure the URL has a length
    if (!url.length) {
        alert('Please enter a valid URL');
        return false;
    }
    
    // Check if it has "http://" in the value
    var regex = /^(http|ftp|https|ftps)/i;
    
    if (!regex.test(url)) {
        url = 'http://' + url;
    }
    
    window.location = url;
    return false;
}
</script>
7

0.o

This is Awesome man! thanks for your help, i was looking for a way to fix that.

8

No problem, the regex could even be shortened to

var regex = /^(http(s)?|ftp(s)?)/i;
9

I have 2 more problems…:frowning:

how can i make the link open in another Frame on the page? target=“framename” ?

I’m also trying to figure out a way for the form values to “remember me”… I know this can be done through cookies but all the methods I have tried so far have been faliures.

10

Below is the code that will allow you to open the link in an iframe

<form action="" method="get" id="links">
    <input type="text" maxlength="100" size="58" name="forum_url" />
    <input type="button" value="Forums" style="width : 170px; margin: 3px" onclick="gotoURL()" />
</form>

<script>
function gotoURL() {
    // Get the URL
    var url = document.forms.links.forum_url.value;
    
    // Make sure the URL has a length
    if (!url.length) {
        alert('Please enter a valid URL');
        return false;
    }
    
    // Check if it has "http://" in the value
    var regex = /^(http(s)?|ftp(s)?)/i;
    
    if (!regex.test(url)) {
        url = 'http://' + url;
    }
    
    // Create a new iframe
    createIframe('urlFromForm', url);
    return false;
}

function createIframe(iframe, url) {
    // Check if any iframe elements exists on the page
    //
    // If one exists that has the exact same name then skip the
    // DOM build process
    var iframes = document.getElementsByTagName('iframe'), ele = false, exists = false;
    
    if (iframes.length) {
        for(var i = 0; i < iframes.length; i++) {
            if (iframes[i].name == iframe) {
                exists = true, ele = iframes[i];
                break;
            }
        }
    }
    
    if (!exists) {
        // Create the new iframe element
        ele = document.createElement('iframe');
        
        // Set the iframe attributes
        ele.name = iframe;
        ele.width = '500px';
        ele.height = '500px';
        ele.frameborder = 'none';
        ele.style.border = 'none';
        ele.style.allowtransparency = 'true';
        ele.style.margin = '0px';
        ele.scrolling = 'yes';
        
        // Append the iframe to the body
        document.body.appendChild(ele);
    }
    
    ele.src = url;
}
</script>

As for the cookie remember what is the code you have tried, could you please post it.

11

I have solved this. Thanks again for your help.

12

No problem