Develop Reference

Validate dynamically named radio buttons using javascript

I have been trawling through various examples of radio buttons validation and grasp the concept but no examples seem to fit my situation. I have queried my database which has 4 options and for each option I have generated an associated radio button as below:
<?php foreach($options as $option){ ?>
<p><input type="radio" name="ID<?php echo $row['id']; ?>" value="<?php echo $option; ?>"><?php echo $option; ?></p>
<?php } ?>
So this basically generates 4 radio buttons per row called from the database. This appears in the source as:
<form method="POST" action="Result.php">
<p>1. Question </p>
<p><input type="radio" name="ID1" value="answer1">answer1</p>
<p><input type="radio" name="ID1" value="answer2">answer2</p>
<p><input type="radio" name="ID1" value="answer3">answer3</p>
<p><input type="radio" name="ID1" value="answer4">answer4</p>
<p>2. Question 2</p>
<p><input type="radio" name="ID2" value="answer1">answer1</p>
<p><input type="radio" name="ID2" value="answer2">answer2</p>
<p><input type="radio" name="ID2" value="answer3">answer3</p>
<p><input type="radio" name="ID2" value="answer4">answer4</p>
<input type="submit" name="submit" value="Submit!">
</form>
etc etc.
The names of these radio buttons are partially generated by php, how can I use javascript with an associated alert to check 1 of the radio buttons from each question has been checked prior to submitting the form the questions are populated within?
Or maybe even just how can I achieve this with php ISSET?

Using just JavaScript to verify whether a radio button within a radio group is checked:
function radiogroupSelected(name){
var inputArr = document.getElementsByName(name);
for(var i = 0; i < inputArr.length; i++){
if(inputArr[0].checked){
return true;
}
}
return false;
}
Now you can call this function like radiogroupSelected('ID1') to determine if one of the inputs was selected.

Form elements added after AJAX and php script not transfered to $_POST

I am using AJAX to get the value of the element chosen in a select input and to launch a PHP script that returns some input checkboxes fields.
Here is what it looks like :
HTML
<form method="post" action="liens_chra.php" name="Form" id="Form">
<label for="id_turbo">Turbo</label>
<select name="id_turbo" size="1" id="id_turbo">
<option value="10970">TM1761178</option>
<!-- and more -->
</select>
<div id="choix_reffab">
<!-- checkboxes appear here -->
</div>
<p class="form ">
<input type="submit" name="valider" value="Enregistrer">
</p>
<!-- something I tried too
<input type="button" id="submitevent" value="Enregister">
<script type="text/javascript" >
$('#submitevent').click(function() {
$("#Form").submit();
});
</script> -->
</form>
JQuery/AJAX
$("#id_turbo").change(function(){
var id_turbo = $("#id_turbo").val();
$.ajax({type: "POST",
url: "<?=URLSITEWEB;?>admin/outils/ajax/liste_Reffab.php",
data: "id_turbo="+id_turbo+"",
error: function(){
/*alert(id_famille+" \n ne passent pas.");*/
},
success: function(data){
$("#choix_reffab").html(data);
}
});
});
PHP
/* things */
foreach ($fabTab as $fab) {
$chaine .= '<input type="checkbox" "name=tabreffab[]" id="'.$fab.'" value="'.$fab.'" /><label for="'.$fab.'">'.$fab.'</label>';
}
echo $chaine;
So, when the user selects a value, some checkboxes appears.
My problem is that the data I want is not transfered to $_POST, and here is the result :
var_dump($_POST['tabreffab']) // is NULL, others values are ok
I'm fairly new to AJAX & JQuery, so I have no idea what to do. I tried submitting the form using JQuery, made no changes.

I got your issues when you return your checkbox your mistake is at name property of element.
In your code "name=tabreffab[]" Replace with name = "tabreffab[]"
$chaine .= ''.$fab.'';
Insted of above write like below code
$chaine .= '<input type="checkbox" name = "tabreffab[]" id="'.$fab.'" value="'.$fab.'" /><label for="'.$fab.'">'.$fab.'</label>';

checkboxes value will display in $_POST[] only on selecting a value
try in a editor
<?php
echo "<pre>";
print_r($_POST);
?>
<form id="sampleName" name ="sampleName" method="post" action="">
<textarea id="testID" name="textAreaName"></textarea>
<input type="text" name="text1" />
<input type="checkbox" name="check" value="1"/>
<input type="checkbox" name="check" value="2"/>
<input type="checkbox" name="check" value="3"/>
<input type="submit" value="submit">
</form>

The problem is in your Ajax call, specifically in the data part. It takes a json formatted object. The right way to write this is data:{id_turbo:"id_turbo_value"} not as what you used - data: "id_turbo="+id_turbo+""

Automatically add a certain class, whenever <Form> code contains a certain value?

I want to add a special class to each form that contains the word special as part of its action URL.
But I have many forms, and I can't think of an automated way to do this.
The only way I came up with was to create the following code, but I will have to create such code for each and every form, using a different index number:
<?php
$case1 = "special";
$case2 = "none";
if($case1 == "none") {
$class1 = ""; // don't add any class
}
else {
$class1 = "effect"; // add `effect` class
}
if($case2 == "none") {
$class2 = ""; // same goes here
}
else {
$class2 = "effect"; // and here
}
?>
HTML:
<form action="/go/<?= $case1 ?>" method="POST" target="_blank">
<input type="submit" class="<?= $class1 ?> general-class" value="submit">
</form>
<form action="/go/<?= $case2 ?>" method="POST" target="_blank">
<input type="submit" class="<?= $class2 ?> general-class" value="submit">
</form>
OUTPUT:
<form action="/go/special" method="POST" target="_blank">
<input type="submit" class="effect general-class" value="submit">
</form>
<form action="/go/none" method="POST" target="_blank">
<input type="submit" class="general-class" value="submit">
</form>
Is there any automated way to do this?
Basically I have two types of forms, one should be opened using a jquery plugin (henace the special class), and the other should open in a normal way.
My way to differentiate between them is to insert the $case[i] variable into the action url, as this is something that I have to do either way.
Perhaps there's a complete different way to achieve this, I don't know.
EDIT:
Real Form is generated mostly manually, with this code:
<form action="/go/<?= $item ?>/<?php echo $case1 ; ?>" method="POST" target="_blank">
<input name="a" type="hidden" value="<?php echo $a; ?>"/>
<input name="b" type="hidden" value="<?php echo $b; ?>"/>
<input name="c" type="hidden" value="<?php echo $c; ?>"/>
<input name="d" type="hidden" value="<?php echo $d; ?>"/>
<input type="submit" class="<?= $class1 ?> general-class" value="Click Me"></form>
(all variables are being given values at the start of the PHP block you see above)

There's two ways - PHP and jQuery. Based on your code, we don't have enough info to know if we can use the PHP way or not, so here's the jQuery way:
// wait until the document is ready
jQuery(function($) {
// find all forms that have "special" in the action
$('form[action*="special"]').each(
function() {
// within the form, find the submit button, and add the "effect" class
$(this).find('input[type="submit"]').addClass('effect');
}
);
});
And, the shorter / less verbose way:
jQuery(function($) {
// find all forms that have "special" in the action, find their input, and add the class
$('form[action*="special"] input[type="submit"]').addClass('effect');
});
The PHP Way
So, to do this in PHP, I would recommend writing a simple function, then calling it.
function get_class( $slug ) {
$class_map = array(
'special' => 'effect',
'none' => '',
// .. you could add others here if appropriate
return ( isset( $class_map[ $slug ] ) ) ? $class_map[ $slug ] : '';
);
Then you could use it in your php like so:
<form action="/go/<?= $item ?>/<?php echo $case1 ; ?>" method="POST" target="_blank">
<input name="a" type="hidden" value="<?php echo $a; ?>"/>
<input name="b" type="hidden" value="<?php echo $b; ?>"/>
<input name="c" type="hidden" value="<?php echo $c; ?>"/>
<input name="d" type="hidden" value="<?php echo $d; ?>"/>
<input type="submit" class="<?= get_class( $case1 ); ?> general-class" value="Click Me"></form>
While that may not seem like a big value, if you started applying those concepts to your code, you would quickly see the value start adding up.

Two actions two submit button in php?

I've form tag like this
sample name:register.php page
<form id="formElem" name="formElem" action="form10.php" method="post">
<input id="pd" name="pd" type="text" AUTOCOMPLETE=OFF />
<input id="pd1" name="fname" type="text" AUTOCOMPLETE=OFF />
<input id="pd2" name="mname" type="text" AUTOCOMPLETE=OFF />
<input id="pd2" name="lname" type="text" AUTOCOMPLETE=OFF />
6 more input boxes
<button name="submit" type="submit">Register</button>
<button name="preview" type="submit">Preview</button>
</form>
I'm sending this info to next form10.php page and displaying all the 10 input values on that page
I'm using $pd= htmlentities($_POST['pd']); $fname= htmlentities($_POST['fname']); to fetch values from form tag and such 10 variables and I'm echoing those entered value
on form10.php file after successful submit button.
like i entered fname, mname, lname came from form tag and displayed on form10.php page.
first name <?echo $fname?>
but now problem is user can see the next page (form10.php) after entering only 10 textboxes values inside form tag.
but I want to give preview option to user so that user can preview that next page either filling any of 1 to 10 textbox values. means he has filled fname and lname but not rest of 8 fields and he clicks on preview button I want to open form10_preview.php which same as form10.php but as user has entered only fname and lname so echo only those values which he as supplied.
Now problem is how can i can have two submit button and two actions in one form?

I think it is better to control form submit rules clientside. Remove the action from your form, and change the button type to be button :
<form id="formElem" name="formElem" action="" method="post">
<input id="pd" name="pd" type="text" AUTOCOMPLETE=OFF />
<input id="pd1" name="fname" type="text" AUTOCOMPLETE=OFF />
<input id="pd2" name="mname" type="text" AUTOCOMPLETE=OFF />
<input id="pd2" name="lname" type="text" AUTOCOMPLETE=OFF />
6 more input boxes
<button id="register" type="button">Register</button>
<button id="preview" type="button">Preview</button>
</form>
Then let javascript control the flow of the submitting :
var formElem = document.getElementById('formElem'),
btnSubmit = document.getElementById('register'),
btnPreview = document.getElementById('preview');
function formSubmit() {
switch (this.id) {
case 'register' :
formElem.action='post10.php';
break;
case 'preview' :
formElem.action='preview10.php';
break;
}
formElem.submit();
}
btnSubmit.onclick = formSubmit;
btnPreview.onclick = formSubmit;

You could have the form point to its own page and handle each submit value separately. At the top of the file with the form, you'll need to start the output buffer and a session. This allows the use of header() to redirect, and storage of session variables.
<?php
ob_start();
session_start();
?>
The form will point to itself by removing the action attribute:
<form id="formElem" name="formElem" method="post">
<input id="pd" name="pd" type="text" AUTOCOMPLETE=OFF />
<input id="pd1" name="fname" type="text" AUTOCOMPLETE=OFF />
<input id="pd2" name="mname" type="text" AUTOCOMPLETE=OFF />
<input id="pd2" name="lname" type="text" AUTOCOMPLETE=OFF />
6 more input boxes
<button name="submit" type="submit">Register</button>
<button name="preview" type="submit">Preview</button>
</form>
We process each of the buttons via their name in the POST array:
<?php
if(isset($_POST['submit'])){
foreach ($_POST as $key => $value) {
$_SESSION[$key] = $value;
}
header("Location: form10.php");
}
if(isset($_POST['preview'])){
foreach ($_POST as $key => $value) {
$_SESSION[$key] = $value;
}
header("Location: form10_preview.php");
}
?>
And at the very end of the file, we flush the output buffer:
<?php ob_end_flush(); ?>
So, essentially the form has one action, which is to submit the values to itself. Finally, both form10.php and form10_preview.php will need session_start(); at the top of the file to access the Session variables we've created, like so:
<?php
session_start();
$inputs = array("pd", "fname", "mname", "lname", etc...);
foreach ($inputs as $input) {
echo $_SESSION[$input];
}
?>

Nested Form to disable text field with selection box HTML

I have code form.html and entry.php
First I want to disable textfield with selection box using javascript, then submit it to give an output.
If i not using this code <form name="form1" method="post" action="entry.php"> form.html is success to display in web browser, but how i can submit it with one submit button?
form.html
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$('.group').hide();
$('#option1').show();
$('#chooseForm').change(function() {
$('.group').hide();
$('#'+$(this).val()).show();
})
});
</script>
</head>
<body>
<form name="form1" method="post" action="entry.php">
<select id="chooseForm" name="select">
<option value="option1">Form1</option>
<option value="option2">Form2</option>
<option value="option3">Form3</option>
</select>
<form id="option1" class="group">
<input name="a" value="form A"><br>
</form>
<form id="option2" class="group">
<input name="a" value="form A"><br>
<input name="b" value="form B"><br>
</form>
<form id="option3" class="group">
<input name="a" value="form A"><br>
<input name="b" value="form B"><br>
<input name="c" value="form C"><br>
</form>
<input value="Save" name="submit" type="submit"><br>
</form>
</body>
</html>
entry.php
<?php
$select = $_POST['select'];
$a = $_POST['a'];
$b = $_POST['b'];
$c = $_POST['c'];
echo $select;
echo "<br>";
echo $a;
echo "<br>";
echo $b;
echo "<br>";
echo $c;
?>
Can anyone solve this code without nested form? thanks :)

First of all, you can't nest forms.
As I understand the idea is to group some elements. If so, then replace the interior <form>tags with <div>s.
The other problem is that you want to use the same input elements names through different sections. Basically, if name is not unique, it will get updated with the last occurrence's value. For example:
<input type="text" name="a" value="val 1" />
<input type="text" name="a" value="val 2" />
When the above is posted, $_POST['a'] will contain val 2 value. Even, if the second text-box is hidden. So either you make text-boxes names unique or you disable the ones, which are hidden. disabled attribute will make the control disabled for user input and also not present in $_POST array. So, in this case:
<input type="text" name="a" value="val 1" />
<input type="text" name="a" value="val 2" disabled />
$_POST['a'] will contain val 1 value, because the second text-box is disabled.
In your case, every time you hide a section you should disable all controls within the group. Here's how to do it: disable all form elements inside div.