Как вывести и одновременно передать значение value в форме HTML?

Question

[cahe4a1]

Коллеги, Здравствуйте! Помогите пожалуйста разобраться.

Есть кнопка передачи формы в которой два важных значения name и value. Кнопка отображает надпись со значения value. Как сделать так, чтобы в value было написано "Яндекс Деньги" и при этом кнопка передавала значение value="20"? У меня должно получиться несколько кнопок с разными названиями, которые передают разные индексы value. С уважением, Александр!

<input type="submit" class="superbutton" name="pay_mode" value="20"  />

Comments

[netrox]

Попробуй :
https://developer.mozilla.org/en-US/docs/Web/HTML/...

Answer 1

[alexalexes]

Кнопку оставляете в покое, значение передаете скрытым полем.

<form action="?action=select_pay" method="POST">
<input type="hidden"  name="pay_mode" value="20"  />
<input type="submit" class="superbutton"  value="Яндекс Деньги"  />
</form>
<form action="?action=select_pay" method="POST">
<input type="hidden"  name="pay_mode" value="10"  />
<input type="submit" class="superbutton"  value="Еще одна платежка"  />
</form>

Comments

[cahe4a1]

<form action="?action=select_pay" method="POST">
<input type="hidden"  name="pay_mode" value="20"  />
<input type="submit" class="superbutton"  value="Яндекс Деньги"  />
</form>
<form action="?action=select_pay" method="POST">
<input type="hidden"  name="pay_mode" value="10"  />
<input type="submit" class="superbutton"  value="Еще одна платежка"  />
</form>

Этот вариант не сработал - так как в форме есть ещё поля. Это получается как двойная форма, если я поля повторно пропишу под вторую форму (

[cahe4a1]

<div>
    <button type="submit">W1 касса</button>
              </div>
  <input type="hidden" id="postId" name="pay_mode"" value="20">
			  
			    <div>
    <button type="submit">Яндекс Деньги</button>
               </div>
  <input type="hidden" id="postId" name="pay_mode"" value="15">

Пробовал так. Все равно берет значение из последнего input...

[cahe4a1]

Подсмотрел такой вариант. Как на примере этого кода можно реализовать несколько кнопок с разными значения value в моем случае?

<div class="pay_btns" data-status="1"  style="opacity:0.3;pointer-events:none" >
							<button    onclick='setpaidway(1)' class="btn-leque btn-leque-primary btn-leque-sm">WMR</button>
								<button    onclick='setpaidway(2)' class="btn-leque btn-leque-success btn-leque-sm">WMZ</button>
								<button    onclick='setpaidway(5)' class="btn-leque btn-leque-default btn-leque-sm">WMU</button>
								<button    onclick='setpaidway(3)' class="btn-leque btn-leque-danger btn-leque-sm">Яндекс.Деньги</button>
								<button    onclick='setpaidway(4)' class="btn-leque btn-leque-warning btn-leque-sm">QIWI</button>
							</div>

[alexalexes]

cahe4a1, а что вам мешает сделать селектор?

<select name="pay_mode">
  <option value="20" selected>Яндекс Деньги</option>
  <option value="10">Еще одна платежка</option>
</select>

Можно сделать радио-кнопки.
Если все-таки нужно простые кнопки, то нужно одно скрытое поле и обработчики этих кнопок:

<input id="pay_mode_input" type="hidden"  name="pay_mode" value="20"  />
<input type="button" value="Яндекс Деньги"  onclick="document.getElementById('pay_mode_input').value = 20;" />
<input type="button" value="Еще одна платежка"  onclick="document.getElementById('pay_mode_input').value = 10;" />

[cahe4a1]

alexalexes, Нужно прописать дополнительный JS код для onclick?

[alexalexes]

У вас каким-то образом в форме нужно обозначить поле с именем pay_mode и каким то определенным значением. Будет это скрытое поле, обычное поле, селектор - не суть важно. Важно что у него будет атрибут name="pay_mode" и для этого элемента будет задаваться какое-то value. Значение может подставляться через JS или благодаря стандартной работы элемента ввода - не важно. При отправке формы этот параметр отправится как надо.

[cahe4a1]

alexalexes,

<input id="pay_mode_input" type="hidden"  name="pay_mode" value="20"  />
<input type="button" value="Яндекс Деньги"  onclick="document.getElementById('pay_mode_input').value = 20;" />
<input type="button" value="Еще одна платежка"  onclick="document.getElementById('pay_mode_input').value = 10;" />

Этот вариант к сожалению не срабатывает. Когда прописываю вместо button - submit, вторая кнопка "Еще одна платежка" все равно берет значение 20

[alexalexes]

Сабмит в этом варианте нужно делать программно:

<input id="pay_mode_input" type="hidden"  name="pay_mode" value="20"  />
<input type="button" value="Яндекс Деньги"  onclick="document.getElementById('pay_mode_input').value = 20; document.forms[0].submit();" />
<input type="button" value="Еще одна платежка"  onclick="document.getElementById('pay_mode_input').value = 10; document.forms[0].submit();" />

При этом полезно обработчик вынести функцию:

function set_pay_mode_and_submit(mode)
{
    document.getElementById('pay_mode_input').value = mode;
   // тут нужно получить все поля формы и проверить на заполненность
 if(если все заполнено)
  {
     document.forms[0].submit(); // если форма одна единственная на странице, то сработает, но лучше дать форме name и обратиться по имени: document.forms[name].submit(); 
  }
}

Тогда вызов обработчика будет таким:

<input id="pay_mode_input" type="hidden"  name="pay_mode" value="20"  />
<input type="button" value="Яндекс Деньги"  onclick="set_pay_mode_and_submit(20)" />
<input type="button" value="Еще одна платежка"  onclick="set_pay_mode_and_submit(10)" />

[cahe4a1]

alexalexes, не срабатывают кнопки к сожалению... forms[0] - вписывал сюда name формы, не помогло.

[cahe4a1]

alexalexes, коллега подсказал вот такое решение. Но value все равно не передается в Action формы

<!doctype html>
<html lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
 
<script src=""></script>
 
[JS]<script>
 
 
 
$(document).on("click", "#a", function(){
    
    var vall = $(this).val();
  switch(vall) {
      
      case 'деньги':
      var vall1 = 20;
 
       break;
       case 'деньги1':
  var vall1 = 21;
 
       break;
       case 'деньги2':
  var vall1 = 22;
    
       break;
  }
    alert('Переменная утсановлена в '+vall1);
});
 
 
 
 
 
 
</script>[/JS]
 
</head>
 
<body>
<form>
   <input  id='a'  type='submit' value='деньги' >
     <input  id='a'  type='submit' value='деньги1' >
          <input  id='a'  type='submit' value='деньги2' >
</form>
 
</body>
</html>

[alexalexes]

не срабатывают кнопки к сожалению... forms[0] - вписывал сюда name формы, не помогло.

Почему? Должно работать. Нужно правильно вписать атрибут name у формы и к ней же обратиться.
Еще нужно точно указать action и метод отправки данных, это зависит от того, где и как на сервере у вас обрабатываются посланные данные.

<script>
function set_pay_mode_and_submit(mode)
{
  document.getElementById('pay_mode_input').value = mode;
  var any_text_value = document.getElementById('any_text_id').value;
  // тут нужно получить все поля формы и проверить на заполненность
  if(any_text_value.length == 0) //если не заполнено какое-то поле
  {
    alert('Заполните поле any_text!');
    return;
  }
  // все проверки прошли, отправляем форму
  document.forms['one_form'].submit();
}
</script>
<form name="one_form" action="" method="GET">
  <label>any_text:<input id="any_text_id" type="text" name="any_text"/></label>
  <input id="pay_mode_input" type="hidden"  name="pay_mode" value="20"  />
  <input type="button" value="Яндекс Деньги"  onclick="set_pay_mode_and_submit(20)" />
  <input type="button" value="Еще одна платежка"  onclick="set_pay_mode_and_submit(10)" />
</form>

[Димитрий Тверской]

alexalexes, сам это сейчас хочу сделать, не очень получаеться, вы решили эту проблему ?

Answer 2

[cahe4a1]

Дело в том, что мне нужно реализовать именно несколько кнопок. 3 кнопки под разные способы оплаты. Если человек нажимает кнопку Яндекс Деньги - нужно передать value="20" Если W1 кассу то value="20" и т.д.

Такой вариант не сработал :

<input type="hidden"  name="pay_mode" value="20"  />
              <input type="submit" class="superbutton"  value="W1 касса"  />
			  
			  <input type="hidden"  name="pay_mode" value="15"  />
              <input type="submit" class="superbutton"  value="Яндекс Деньги"  />

Answer 3

[Andrew]

Как вариант, попробуйте сделать как-то так

<input type="submit" class="superbutton"  value="Яндекс Деньги" data-transfer="20"   />

И собирать значения из value и из data-transfer.
Или при сабмите заменять value на data-transfer

$('input[type=submit]').click(function() {
$(this).val($(this).attr('data-transfer'));
}

Comments

[cahe4a1]

value все равно не передается, все уже переюзал

[Andrew]

cahe4a1, куда не передаётся? как вы его передаёте?
При сабмите записывайте в скрытое поле, если input:submit.value не берётся.

[Азат Киберов]

cahe4a1,
может это

<?
 if (isset($_POST['page']))
  echo $_POST['page']."<br/>";
 
 
?>
<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
    <head>
        <title>Тестовая страница</title>
        <script type='text/javascript'>
            function sub(action){           
                if (action == 1)
                    window.document.getElementById('page').value = 1;
                else
                    window.document.getElementById('page').value = 3;
 
                window.document.getElementById('form').submit();            
            }
        </script>
    </head>
    <body>
        <form method='post' action='' id='form'>
            <input type='hidden' name='page' value='1' id='page'/>
            <input type='button' value='Далее' onclick='sub(1)'/>
            <input type='button'  value='Назад' onclick='sub(3)'/>
        </form>
    </body>
</html>

Answer 4

[Азат Киберов]

<?
 if (isset($_POST['page']))
  echo $_POST['page']."<br/>";
 
 
?>
<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
    <head>
        <title>Тестовая страница</title>
        <script type='text/javascript'>
            function sub(action){           
                if (action == 1)
                    window.document.getElementById('page').value = "20";
                else
                    window.document.getElementById('page').value = "30";
 
                window.document.getElementById('form').submit();            
            }
        </script>
    </head>
    <body>
        <form method='post' action='' id='form'>
            <input type='hidden' name='page' value='1' id='page'/>
            <input type='button' value='Яндекс деньги' onclick='sub(1)'/>
            <input type='button'  value='W1' onclick='sub(3)'/>
        </form>
    </body>
</html>

Если нужен с ajax код предоставлю..Обращайтесь.

Answer 5

[stimu]

<input type="submit" class="superbutton" name="pay_mode" value="20">ЮMoney</input>