HTML-форма с динамическим действием (с использованием JavaScript?) - PullRequest
Новая
       12

HTML-форма с динамическим действием (с использованием JavaScript?)

3 голосов
/ 09 февраля 2011

Я хочу создать форму, подобную этой:

  1. Введите свой идентификационный номер в поле ввода формы и отправьте.
  2. Действие формы становится примерно таким: /account/{id}/.

Мне сказали, что JavaScript - единственный способ достичь этого (см. здесь ), но как?

Ответы [ 3 ]

8 голосов
/ 09 февраля 2011

Используя jQuery , это может выглядеть примерно так: 

$('#inputAccount').change(function () {
    $('#myForm').attr('action', 'http://www.example.com/account/' + $('#inputAccount').val());
});

Это должно изменить действие формы каждый раз, когда изменяется текст в элементе ввода. Вы также можете использовать .blur() вместо .change() для выполнения действия всякий раз, когда фокус покидает элемент ввода, чтобы он не менялся постоянно и т. Д. Затем, когда форма отправлена, она должна подчиниться тому, что было последний раз помещенный в его атрибут действия.

3 голосов
/ 09 февраля 2011 
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $(frm.txt).keyup(function(){
            $(frm).get(0).setAttribute('action', '/account/'+$(frm.txt).val());
        });
    });
    </script>
</head>
<body>
<form id="frm" action="foo">
    <input type="text" id="txt" />
    <input type="submit" id="sub" value="do eet" />
</form>
0 голосов
/ 06 апреля 2018

Вы можете сделать что-то подобное в JavaScript. В зависимости от установленного переключателя (в данном случае, но это может быть другой элемент формы), будет выбрано действие или другое: 

<script type="text/javascript">
function OnSubmitForm()
{
  if(document.myform.operation[0].checked == true)
  {
    document.myform.action ="insert.html";
  }
  else
  if(document.myform.operation[1].checked == true)
  {
    document.myform.action ="update.html";
  }
  return true;
}
</script>

<form name="myform" onsubmit="return OnSubmitForm();">
   name: <input type="text" name="name"><br>
   email: <input type="text" name="email"><br>
   <input type="radio" name="operation" value="1" checked>insert
   <input type="radio" name="operation" value="2">update
   <p>
   <input type="submit" name="submit" value="save">
   </p>
</form>
...