I have a web page where four images are created with Javascript on page load. These images are inside a form and made to act as radio buttons, see code below.
<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>
There is also a button for submitting the form, which is hidden with jQuery. The problem is that I want the clicking of the radio buttons (i.e. images) to send POST data as well as increment a JS variable (which in turn will change the images by fetching a certain item in a JS array). The rest of the code is as follows (the relevant parts):
<?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>
The part of the jQuery code that is supposed to make the changing of radio buttons (i.e. clicking of images) send POST data and increment variable doesn't work. Although it does hide the button for submitting the data. Is this because they have been dynamically created and is there a way around this?
