切换值后自动提交

Question

我想在切换值后自动提交代码，如下所示。

的index.php

<form action="foo.php" method="post" id="form1">
<input type="hidden" id="ipt" value="" name="foo">
</form>

<button type="submit" id="btn" value="Leviathan">Leviathan</button>

    <script>

    var btn = document.getElementById('btn');

    btn.addEventListener('click', function(event){

    document.getElementById('ipt').value = event.target.value;
    document.getElementById('form1').submit();}, false);

    </script>

foo.php

<?php if(isset($_POST['foo'])){echo $_POST['foo'];} ?>

我想要的代码是将值从按钮切换为输入然后提交。 使用上面的代码，它会切换值，但不会向foo.php提交任何内容。

这个怎么做？

Answer 1

我在此代码中发现的唯一问题

更换

文档getElementById（'form1'）。submit（）;

同

的document.getElementById（ 'form1中'）提交（）;

“” 您的代码中缺少

Answer 2

尝试下面的代码，当单击按钮时我将提交表单并将值传递给foo.php

 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <form action="foo.php" method="post" id="form1">
    <input type="hidden" id="ipt" value="asdasd" name="foo">
    </form>

    <button type="submit" id="btn" value="Leviathan" onclick="submit_form();">Leviathan</button>

        <script>

        function submit_form()
        {

             $("#form1").submit();
        }
 </script>

它将Leviathan的值传递给foo.php

Answer 3

<form class="test-form" action="foo.php" method="post" id="form1">
    <input type="hidden" id="ipt" name="ipt" value="" />
    <button type="submit" class="submit-btn" value="Leviathan">Leviathan</button>
</form>


<script>
    var form = document.querySelector('.test-form');

    form.addEventListener('submit', function(ev) {
        var buttonValue = form.querySelector('.submit-btn').value;
        form.querySelector('#ipt').value = buttonValue;
    });
</script>

“提交表单后，将提交按钮的值设置为#ipt输入的值。”

您的php脚本也应该执行$_POST['ipt'] 。

Answer 4

当您使用jQuery ...我建议使用它，它将更加简单。

的index.php

<form action="foo.php" method="post" id="form1">
    <input type="hidden" id="ipt" value="" name="foo">
</form>

<input type="button" id="btn_01" class="btn_value" value="Leviathan 01" />
<input type="button" id="btn_02" class="btn_value" value="Leviathan 02" />
<input type="button" id="btn_03" class="btn_value" value="Leviathan 03" />

<script>
    $('.btn_value').on('click', function() {
        $('#ipt').val( $(this).val() );
        $('#form1').submit();
    });
</script>

foo.php

<?PHP
    if ( $_POST ) {
        var_dump($_POST);
    } else {
        echo 'nothing...';
    }
?>