Как я могу отправить переменную в форму, используя эту функцию JavaScript? - PullRequest
Новая
       11

Как я могу отправить переменную в форму, используя эту функцию JavaScript?

6 голосов
/ 31 января 2011

Я получил этот вызов по клику: 

onClick="mySubmit();

которая вызывает эту функцию: 

function mySubmit(){
    document.getElementById("myForm").submit();
}

, который затем отправляет эту форму: 

<form id="myForm" action="action.php" method="post">

Мой вопрос: как мне отправить переменную в форму из onClick, чтобы получить что-то вроде <form id="myForm" action="action.php?id=**(the variable sent from the onclick goes here)**" method="post">

Спасибо!

Ответы [ 3 ]

12 голосов
/ 31 января 2011

Самый простой способ: добавить скрытое поле в форму.

<form id="myForm" action="action.php" method="post">
  <input type='hidden' id= 'hiddenField' name='id' value='' />

<script> 
  function mySubmit() {
     document.getElementById('hiddenField').value = "Whatever I want here";
     document.getElementById("myForm").submit();
   }
</script>

Или используйте функцию типа 

function addHiddenField(form, props) {
  Object.keys(props).forEach(fieldName => {
    var field = form[fieldName];
    if (!field) {
      field = document.createElement('input');
      field.type = 'hidden';
      field.name = fieldName;
      form.appendChild(field);
    }
    field.value = props[fieldName];
  });
}

document.querySelector('form').addEventListener('submit', () => {
  addHiddenField(this, {
    someQueryName: 'someQueryValue',
    otherQueryName: 'otherVal'
  });
});
<form>
  Name
  <input name=name />
  <input type=submit />
</form>

Обратите внимание, что вы можете использовать DevTools для изменения песочницы iframe, чтобы она могла отправлять формы, и вы можете проверить опубликованный URL.sandbox="... allow-forms"

4 голосов
/ 31 января 2011

поместите тип ввода, скрытый внутри формы, затем отправьте форму 

<input id="id" name="id" type="hidden" />

установить значение скрытого поля в вашем javascript submit () 

document.getElementById('id').value = **;

но при установке form method = "post" идентификатор не будет частью строки запроса, то есть URL останется action.php вместо если вам действительно нужен идентификатор в строке запроса, т.е. url action.php? id = **, тогда вам нужно изменить метод method = "get", при этом идентификатор скрытого поля автоматически будет частью URL, т.е. action.php ? ID = **

прочитайте о разнице между получением и отправкой

вот как вы можете получить доступ к опубликованному значению на следующей странице , если вам действительно нужно использовать method = "post" action = "action.php"

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

Ваш HTML: 

<form id="myForm" action="#" method="post">
            <input type='hidden' id="id" name='id' value='123' />
            <input type='submit' name='submit' value='Click me !' onclick='addParam()' />
        </form>

Ваш сценарий: 

function addParam() {

                var url = "action.php?id=" + document.getElementById('id').value;
                document.getElementById("myForm").setAttribute('action', url);

            }

Спасибо.

...