Radio buttons validation with multi forum
hello,
after trying unsuccessfully for 4 days my script, I need you:
I have 3 forms on the same page. For each, I have 3 radio button, and the form is automatically submitted as soon as I click a radio button.
The value of the radio button is then retrieved from a php page, and rendering is displayed in a div
The following code works fine for one form, but instead of 3 different functions (indicated by the "testsubmit(xx)" in the code), I have wanted to make only one, but I do not know how.
>> Please help me :)
The code : (i put 2 same form in this exemple, it depends of the good code)
---------------
index.htm
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>
</head>
<body >
<script type='text/javascript'>
function testsubmit(cadre)
{
var myRadio = $('input[name=radiochoice]');
var test = myRadio.filter(':checked').val();
//alert(test);
$.ajax({
type: "POST",
url: "testpage.php",
data: { name: test }
}).done(function( msg ) {
document.getElementById(cadre).innerHTML=msg
});
}
</script>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<br>
<div class="ui-bar" style="background-color:#999;text-shadow:none; color:#000">
<div style="margin-left:15px">
<form id="testforum" data-ajax="false">
<fieldset data-role="controlgroup" data-type="horizontal" onchange="testsubmit('result')"
data-inline='true' data-native-menu='false' >
<input type="radio" name="radiochoice" id="radiochoice1" value="radiochoice1" />
<label for="radiochoice1">radiochoice1</label>
<input type="radio" name="radiochoice" id="radiochoice2" value="radiochoice2" />
<label for="radiochoice2">radiochoice2</label>
<input type="radio" name="radiochoice" id="radiochoice3" value="radiochoice3" />
<label for="radiochoice3">radiochoice3</label>
</fieldset>
</form>
<div id="result"></div>
</div>
<br><br>
<div style="margin-left:15px">
<form id="testforum" data-ajax="false">
<fieldset data-role="controlgroup" data-type="horizontal" onchange="testsubmit('result')"
data-inline='true' data-native-menu='false' >
<input type="radio" name="radiochoice" id="radiochoice1" value="radiochoice1" />
<label for="radiochoice1">radiochoice1</label>
<input type="radio" name="radiochoice" id="radiochoice2" value="radiochoice2" />
<label for="radiochoice2">radiochoice2</label>
<input type="radio" name="radiochoice" id="radiochoice3" value="radiochoice3" />
<label for="radiochoice3">radiochoice3</label>
</fieldset>
</form>
<div id="result"></div>
</div>
</div>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
testpage.php
<?php echo $_POST['name']; ?>