Auto-submit after switch value

Question

I want to auto-submit after switch value the codes look like this.

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'];} ?>

the code i want is switch value from button to input then submit. with above code it switch the value but it doesn't submit anything to foo.php.

how to do this?

Answer 1

The only issue i found in this code

Replace

document getElementById('form1').submit();

with

document.getElementById('form1').submit();

"." is missing in your code

Answer 2

try the below code i will submit the form when button is clicked and pass value to 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>

it will pass the value of Leviathan to 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>

"When the form is submitted set the value of the submit button on to the value of the #ipt input."

Also your php script should do $_POST['ipt'] .

Answer 4

As you are using jQuery ... I suggest to use it, It will be more simple.

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...';
    }
?>