я пытаюсь написать простое текстовое поле (для людей, чтобы ввести URL-адрес в нем) с помощью кнопки в HTML - PullRequest
Новая
       17

я пытаюсь написать простое текстовое поле (для людей, чтобы ввести URL-адрес в нем) с помощью кнопки в HTML

1 голос
/ 03 июня 2011

Я пытаюсь написать простое текстовое поле (для людей, чтобы ввести URL-адрес в нем) с помощью кнопки в HTML. когда кнопка нажата, она отправит URL-адрес текущего веб-сайта, который я просматриваю, на URL-адрес, указанный в текстовом поле, с использованием метода POST. Является ли это возможным? Я искал на форумах, но на самом деле не знаю, какой из них правильный, потому что кажется, что есть разные способы сделать это, и я не знаю, как их редактировать.

мой текущий код: 

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

Ответы [ 4 ]

3 голосов
/ 03 июня 2011

Вам нужен элемент <form>, который а) имеет атрибут action, указывающий, куда отправлять данные; б) при отправке отправляет данные (я добавил дополнительный <input type='hidden'> для хранения URL ваших текущих страниц для отправки). 

<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>
3 голосов
/ 03 июня 2011

Это должно работать: 

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

    <script type="javascript/text">

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

        //Set the form action to the textbox value
        var the_form = document.getElementById("the_form");
        the_form.setAttribute("action", textbox_value);

        //Set the value of the url field to the current url
        document.getElementById("url").setAttribute("value", window.location);

        the_form.submit();
      }
    </script>
  </head>

  <body>

    <div id ="container">
      <form action="" method="post" id="the_form">
        <p>Enter URL:</p>
        <input type="hidden" name="url" id="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>

  </body>

</html>
1 голос
/ 03 июня 2011

Текущее расположение страницы хранится в переменной JavaScript "window.location.href" (в других случаях она может отличаться в Chrome).

Вам также необходимо установить действие вашей формы для URL-адреса в текстовой области. Рекомендуется поместить тег id в элемент html-формы и использовать этот тег id, чтобы задать для свойства action формы содержимое текстового поля как часть обработчика кнопок onclick.

0 голосов
/ 03 июня 2011

Есть два варианта:

  • Используйте HTML-форму, как Ant показал , установите action и method атрибуты. Добавьте кнопку submit внутри формы (вместе с вашим текстовым полем). Когда вы нажмете кнопку «Отправить», ваши данные будут опубликованы.
  • Используйте AJAX, чтобы опубликовать форму, если вы хотите остаться на текущей странице
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...