I'm trying to write a simple text box (for people to type the url in) with a button in html

advertisements

i am trying to write a simple textbox (for people to type url in it) with a button in html. when the button is clicked, it will send the url of the current website that I am browsing to the url that is listed in the textbox using the POST method. is it possible? i have been looking on forums but don't really know which is the right one cos it seems that there are various way of doing it and i don't really know how to edit them.

my current code:

<html>
<head>
<title>YouTube</title>

<script type="javascript/text">

function handleButtonEnterClick(tab) {
//TODO:
    var textbox_url = document.getElementById("url_textbox");
    var textbox_value = textbox_url.value; //eg. value = "www.google.com"

       //Need to have a POST method written here to send the url of the current
       //webpage for example www.youtube.com to url listed in the textbox,
       //for example www.google.com
       //May I know how can I do it? Thanks.
}
</script>
</head>

<body>

<div id ="container">
<p>Enter URL:</p>
<input type="text" id="url_textbox" name="url_textbox" />
<input type="button" id="button_enter" name="button_enter"
       value="enter" onclick="handleButtonEnter" />
</div>

</body>
</html>


What you need is a <form> element, which a) has action attribute to indicate where to send the data; b) on submit sends the data (I've added an extra <input type='hidden'> to store your current pages url for sending).

<script type="javascript/text">
    function handleButtonEnterClick() {
        var textbox_value = document.getElementById("url_textbox").value;
        document.getElementById('myUrl').value = window.location;
        var form = document.getElementById('myForm');
        form.action = textbox_value;
        form.submit();
    }
</script>

<div id="container">
    <form action="" method="post" id="myForm">
        <p>Enter URL:</p>
        <input type="hidden" id="myUrl" name="url" />
        <input type="text" id="url_textbox" name="url_textbox" />
        <input type="button" id="button_enter" name="button_enter"
               value="enter" onclick="handleButtonEnter" />
    </form>
</div>