Question

我有一个网页，其中在页面加载时使用Javascript创建了四个图像。这些图像位于表单内部，并用作单选按钮，请参阅下面的代码。

<div class="flex-item">
    <input type="radio" name="image" value="7.11" id="alt1" class="hidden">
    <label for="alt1"><img src="images/house.jpg"></label>
</div>

还有一个用于提交表单的按钮，该按钮是用jQuery隐藏的。问题是我希望单击单选按钮（即图像）来发送POST数据以及增加JS变量（这反过来将通过获取JS数组中的某个项来更改图像）。其余代码如下（相关部分）：

<?php
    if ( isset($_POST['image'])
    {
        $image = $_POST[ 'image' ]; // 'image' is the name of the radio buttons
        // Will result in "image1" or "image2", etc - whatever "value" you assigned to the radio buttons
    }            
    die;   // stop execution now - dont output the html below         
?>

<!doctype html>
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="styles.css">
<script src="jquery-3.1.1.min.js"></script>

<script>
// Should send POST data on image click and increment variable
jQuery(function($) {
    // Hide / suppress the submit button
    $('input[type="submit"]').closest('div').hide();
    // Bind to change event for all radio buttons
    $('input[type="radio"]').on('change', function() {
        $("#test").text('hello'); // for testing
        // Submit the form ("this" refers to the radio button)
        $(this).closest('form').submit();
        firstIndex += 4; // incrementing the variable
        onSetParameters; //"starting over again" and creating new images
    });
});
</script>

</head>
<body>
    <div class='main'>
        <h1>Heading</h1>
        <p>Heading2 <?php echo "$image<br>"; ?></p>

        <div id="test">hej</div> //for testing
        <hr>
        <form id='myForm' method="post">
            <div class="four_images">
                <div>
                    <input type="submit" name="save" value="Save Image Selection">
                </div>
            </div>
        </form>
    </div>
</body>
</html>

应该更改单选按钮（即点击图像）的jQuery代码部分发送POST数据和增量变量不起作用。虽然它确实隐藏了提交数据的按钮。这是因为它们是动态创建的并且有解决方法吗？

单击单选按钮设置动作，动态创建单选按钮

0 个答案: