I have a form with multiple checkboxes which are stored as different columns in a database.
I want to display them as a single column in a webpage, how can I do that?
HTML Form:
<div class="form-group">
<label class="col-md-2 control-label">R-11</label>
<div class="col-md-1">
<input type="checkbox" class="form-control" name="r11" value="R11">
</div>
<label class="col-md-2 control-label">E-1</label>
<div class="col-md-1">
<input type="checkbox" class="form-control" name="e1" value="E1">
</div>
<label class="col-md-2 control-label">E-2</label>
<div class="col-md-1">
<input type="checkbox" class="form-control" name="e2" value="E2">
</div>
<label class="col-md-2 control-label">E-3</label>
<div class="col-md-1">
<input type="checkbox" class="form-control" name="e3" value="E3">
</div>
<label class="col-md-2 control-label">L-1</label>
<div class="col-md-1">
<input type="checkbox" class="form-control" name="l1" value="L1">
</div>
<label class="col-md-2 control-label">R-12</label>
<div class="col-md-1">
<input type="checkbox" class="form-control" name="r12" value="R12">
</div>
<label class="col-md-2 control-label">C-1</label>
<div class="col-md-1">
<input type="checkbox" class="form-control" name="c1" value="C1">
</div>
<label class="col-md-2 control-label">C-2</label>
<div class="col-md-1">
<input type="checkbox" class="form-control" name="c2" value="C2">
</div>
<label class="col-md-2 control-label">C-3</label>
<div class="col-md-1">
<input type="checkbox" class="form-control" name="c3" value="C3">
</div>
</div>
PHP Code, generating the rows and columns:
<?php
while($maininfo=mysqli_fetch_assoc($records)){
echo "<tr>";
echo "<td>".$maininfo['run_number']."</td>";
echo "<td>".$maininfo['date']."</td>";
echo "<td>".$maininfo['station']."</td>";
echo "<td>".$maininfo['time_of_call']."</td>";
echo "<td>".$maininfo['onscene']."</td>";
echo "<td>".$maininfo['inservice']."</td>";
echo "<td>".$maininfo['address']."</td>";
echo "<td>".$maininfo['category1']."</td>";
echo "<td>".$maininfo['category2']."</td>";
echo "<td>".$maininfo['info']."</td>";
echo "<td>".$maininfo['shift']."</td>";
echo "<td>".$maininfo['name']."</td>";
echo "<td>".$maininfo['r11']."</td>";
echo "<td>".$maininfo['e1']."</td>";
echo "<td>".$maininfo['e2']."</td>";
echo "<td>".$maininfo['e3']."</td>";
echo "<td>".$maininfo['l1']."</td>";
echo "<td>".$maininfo['r12']."</td>";
echo "<td>".$maininfo['c1']."</td>";
echo "<td>".$maininfo['c2']."</td>";
echo "<td>".$maininfo['c3']."</td>";
echo "</tr>";
}//end while
?>
I would like the table in the website to show all of the r-11 thru c-3 in one column. How can I do that? I have tried merging a couple of them together like:
echo "<td>".$maininfo['r11', 'e1']."</td>";
However, that doesn't work.
This represents the output from one database column:
$maininfo['r11']
This is two:
$maininfo['r11'] . $maininfo['e1']
Wrap those two in an HTML table cell:
"<td>" . $maininfo['r11'] . $maininfo['e1'] . "</td>"
Repeat as necessary for however you want to design the HTML output. Add spaces, separators, more HTML markup, etc.
Basically, the values are still individual things. You simply need to concatenate the output together into the HTML structure you want. It's not up to the database to do this, or the array structure. They have their own jobs to do. It's up to you to build your output strings.
echo "<td>".$maininfo['r11'].$maininfo['e1']."</td>";
Related
I want to make a list of four questions and four options for each question. I have successfully fetched the questions with foreach loop but, radio buttons do not seem to work with foreach loop.
Eg: I chose one answer form the first question and jump to second, but if I select an answer for the second question, the selected option of the first questions gets deselected. I have tried changing values of options, that did not work, I tried using for loop inside the foreach loop and even that did not work.
Following is my code:
<form method="post" action="process/quiz.php">
<?php
$quizList = $quiz->getQuiz(4);
if($quizList){
foreach($quizList as $list){
?>
<div class="row rowpadding">
<div class="col-md-8 col-md-offset-2" id="panel1">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<?php echo $list->title; ?>
</h5>
</div>
<div class="panel-body two-col">
<div class="row">
<div class="col-md-6">
<div class="frb frb-danger margin-bottom-none">
<input type="radio" id="radio-button-1" name="ans1" value="<?php echo $list->option_A ?>">
<label for="radio-button-1">
<span class="frb-title"><?php echo $list->option_A ?> </span>
<span class="frb-description"></span>
</label>
</div>
</div>
<div class="col-md-6">
<div class="frb frb-danger margin-bottom-none">
<input type="radio" id="radio-button-2" name="ans2" value="<?php echo $list->option_B ?>">
<label for="radio-button-2">
<span class="frb-title"><?php echo $list->option_B ?></span>
<span class="frb-description"></span>
</label>
</div>
</div>
<div class="col-md-6">
<div class="frb frb-danger margin-bottom-none">
<input type="radio" id="radio-button-3" name="ans3" value="<?php echo $list->option_C ?>">
<label for="radio-button-3">
<span class="frb-title"><?php echo $list->option_C ?></span>
<span class="frb-description"></span>
</label>
</div>
</div>
<div class="col-md-6">
<div class="frb frb-danger margin-bottom-none">
<input type="radio" id="radio-button-4" name="ans4" value="<?php echo $list->option_D ?>">
<label for="radio-button-4">
<span class="frb-title"><?php echo $list->option_D ?></span>
<span class="frb-description"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
}
}
?>
<div class="panel-footer rowpadding">
<div class="row">
<div class="col-md-6">
<button type="submit" class="btn btn-sm btn-block ">
<span class="fa fa-send"></span>
submit </button>
</div>
</div>
</div>
</form>
Is there anything that I am missing?
Your problem is that you are re-using the names and the IDs of your inputs. Names and IDs have to be unique for the HTML to be valid, and to work as you intend it to. You can have the input-names as HTML arrays instead, and group by that.
Using the $key of the array, you can define a unique name for each your group of answers. We also use this to define the IDs of your elements, since they must be unique.
Changes made are,
Include the $key in the loop
Adding -<?php echo $key; ?> to all instances where you use the ID of the buttons (and the reference in the label), to ensure all IDs are unique
Using name="answer[<?php echo $key; ?>]" instead of ans1, ans2, ans3, ans4. This ensures that only one radio button can be selected per answer, and that you have one array of answers, each element being the answer of one question.
foreach ($quizList as $key=>$list){
?>
<div class="row rowpadding">
<div class="col-md-8 col-md-offset-2" id="panel1-<?php echo $key; ?>">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<?php echo $list->title; ?>
</h5>
</div>
<div class="panel-body two-col">
<div class="row">
<div class="col-md-6">
<div class="frb frb-danger margin-bottom-none">
<input type="radio" id="radio-button-1-<?php echo $key; ?>" name="answer[<?php echo $key; ?>]" value="<?php echo $list->option_A ?>">
<label for="radio-button-<?php echo $key; ?>">
<span class="frb-title"><?php echo $list->option_A ?> </span>
<span class="frb-description"></span>
</label>
</div>
</div>
<div class="col-md-6">
<div class="frb frb-danger margin-bottom-none">
<input type="radio" id="radio-button-2-<?php echo $key; ?>" name="answer[<?php echo $key; ?>]" value="<?php echo $list->option_B ?>">
<label for="radio-button-2-<?php echo $key; ?>">
<span class="frb-title"><?php echo $list->option_B ?></span>
<span class="frb-description"></span>
</label>
</div>
</div>
<div class="col-md-6">
<div class="frb frb-danger margin-bottom-none">
<input type="radio" id="radio-button-3-<?php echo $key; ?>" name="answer[<?php echo $key; ?>]" value="<?php echo $list->option_C ?>">
<label for="radio-button-3-<?php echo $key; ?>">
<span class="frb-title"><?php echo $list->option_C ?></span>
<span class="frb-description"></span>
</label>
</div>
</div>
<div class="col-md-6">
<div class="frb frb-danger margin-bottom-none">
<input type="radio" id="radio-button-4-<?php echo $key; ?>" name="answer[<?php echo $key; ?>]" value="<?php echo $list->option_D ?>">
<label for="radio-button-4-<?php echo $key; ?>">
<span class="frb-title"><?php echo $list->option_D ?></span>
<span class="frb-description"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
}
Now, when you submit the form, the selected answers will be in an array where the name is answer. So you will have to do something like
foreach ($_POST['answer'] as $key=>$value) {
// $key is the same key from the loop above
// $value is the value of the selected radio button
}
Radio buttons are tied together by name. In your foreach(), you keep repeating the same names for each set of question answers. (You're also repeating the same ID, which is bad form, but won't break your script).
You need to restructure your radio buttons so that each group of buttons (that belong together) have the same name. And that name has to be unique per group.
A simplified example:
<form>
<p>These belong together, and all have the name "gender":</p>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<p>These belong together, and all have the name "team":</p>
<input type="radio" name="team" value="blue"> Blue<br>
<input type="radio" name="team" value="red"> Red<br>
</form>
An even more simplified answer
foreach($quizList as $key => $list){ ?>
<form>
<input type="radio" id="radio-button-1" name="answer[<?php echo $key;?>]" value="<?php echo $list->option_A ?>"> <!-- answer_0 -->
<input type="radio" id="radio-button-1" name="answer[<?php echo $key;?>]" value="<?php echo $list->option_B ?>"> <!-- answer_0 -->
</form>
Then in php you should get something like this:
$_POST['answer'] = [
'0' => 'foo'
//'1' => 'biz' ....
];
With Ajax
One note with numbered keys. IF you use AJAX (if not you can basically ignore this) you may lose numeric indexes when converting to and from JSON, for example imagine we expect this:
$_POST['answer'] = [
'0' => 'foo'
'2' => 'biz' ....
];
When that is encoded in Json it will likly be something like this (where did the keys go)
'{"answer":["foo", "biz"]}`
Then when PHP converts that back we have lost our keys. And we we'll have something like this:
$_POST['answer'] = [
0 => 'foo'
1 => 'biz' ....
];
This is also true of any array function that doesn't preserve keys, sort etc. The easy solution here is to just prefix the key with something like a or _ even. Then they will be strings and translate to objects in the JSON. In PHP you could still match these like this:
if("a$id" == $post_id){}
if(substr($post_id,1) == $id){}
//remove all prefixes
print_r(array_combine(preg_replace('/^a/', '', array_keys($answers)),$answers));
//it feels wrong but if you have to append you can do this
var_dump((int)'2a' == 2); //true so your key would be 2a because how PHP converts strings to ints.
And so on.
Hope it helps!
I am building a application form and I want to add a field for visitors to select a date and time. How would I be able to add that to the drop down field that I have added so far. I thinking for a calendar and time dropdown would work for this type of form? I have added the div tag below.
<div class="col-md-12 vehicle-assessment">
<h6>Hirer Details </h6>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Full Name</label>
<input type="text" class="form-control" name="tia_lineholder_text" id="tia_lineholder_email">
</div>
</div>
If you really want to use a dropdown menu this would be done like this assuming you have a list of DateTime objects. Time would be done in a similar way.
<div class="col-md-12 vehicle-assessment">
<h6>Hirer Details </h6>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Full Name</label>
<input type="text" class="form-control" name="tia_lineholder_text" id="tia_lineholder_email">
</div>
<div class="form-group">
<label>Date</label>
<select id="date">
<option value="">--Please choose an option--</option>
<?php
// Assuming $dates is a list of DateTime Objects
foreach $date in $dates {
echo "<option value='" . $date->getTimestamp() . "'>" . $date->format('Y-m-d') . "</option>";
}
?>
</select>
</div>
</div>
But I'd suggest using the inputs time and date. If you have specific time frames you want people to insert this can be added by min and max. If you need additional constraints you could alway write some JS-Code to enforce no sunday or something like that.
<div class="col-md-12 vehicle-assessment">
<h6>Hirer Details </h6>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Full Name</label>
<input type="text" class="form-control" name="tia_lineholder_text" id="tia_lineholder_email">
</div>
<div class="form-group">
<label>Date</label>
<input type="date" name="date"
value="2018-07-22"
min="2018-01-01" max="2018-12-31" />
</div>
<div class="form-group">
<label>Date</label>
<input type="time" name="time"
min="0:00" max="24:00" required />
</div>
</div>
You can use jQuery datepicker
http://jqueryui.com/datepicker/
or you can use
<input type="date" name="date" />
but the last solution wont work for all browsers, if you want to use cross browser than you should use datepicker plugin or any other plugins available on internet
I have the following code for a form in my site for reservations, but the email I'm getting has all the information of the form cramped up, and need to separate each field in a new line. Must be pretty easy for anyone, I'm just not good at code.
<form <?php echo !empty($post_options['id']) ? ' id="'.esc_attr($post_options['id']).'"' : ''; ?> data-formtype="<?php echo esc_attr($post_options['layout']); ?>" method="post" action="<?php echo esc_url($post_options['action'] ? $post_options['action'] : admin_url('admin-ajax.php')); ?>">
<?php jarvis_sc_form_show_fields($post_options['fields']); ?>
<div class="sc_form_info">
<div class="sc_form_item sc_form_field none"><input type="text" name="eventname" value="<?php echo (!empty($eventname)) ? esc_attr($eventname) : esc_html__('Any', 'jarvis'); ?>"></div>
<div class="sc_form_item sc_form_field label_over"><input type="text" name="username" placeholder="<?php esc_attr_e('Name', 'jarvis'); ?>"></div>
<div class="sc_form_item sc_form_field label_over"><input type="text" name="email" placeholder="<?php esc_attr_e('E-mail', 'jarvis'); ?>"></div>
<div class="sc_form_item sc_form_field label_over"><input type="number" name="number" min="1" max="1000" placeholder="<?php esc_attr_e('Number of people', 'jarvis'); ?>"></div>
</div>
<div class="sc_form_item sc_form_field date_time">
<div class="sc_form_item sc_form_item_date sc_form_field label_top">
<div class="sc_form_date_wrap icon-calendar-light">
<input placeholder="Date" class="js__datepicker" type="text" >
</div>
</div>
<div class="sc_form_item sc_form_item_time sc_form_field label_top">
<div class="sc_form_time_wrap icon-clock-empty">
<input placeholder="Time" class="js__timepicker" type="text" >
</div>
</div>
</div>
<div class="sc_form_item sc_form_button"><button class="sc_button sc_button_style_border gradient_bd hover"><?php esc_html_e('Book the table', 'jarvis'); ?></button></div>
<div class="result sc_infobox"></div>
</form>
Help is appreciated. ;)
add a <br> to add line breaks and start at a new line.
The HTML element produces a line break in text (carriage-return). It
is useful for writing a poem or an address, where the division of
lines is significant.
See the example below
<p>
Hi <br>
i <br>
am using multiple <br>
breaks <br>
</p>
Hope this helps!
i have a radio button question that have yes or no answers . i need to show and hide the next fields depend on the radio button answer , if yes show the field if no keep them hide .
here is my code
<?php
if(form_error('HSC'))
echo "<div class='form-group has-error' >";
else
echo "<div class='form-group' >";
?>
<label for="HSC" class="col-sm-2 control-label">
<?=$this->lang->line("student_have_hs")?>
</label>
<div class="col-sm-3">
<input type="radio" name="HSC" value="Yes">Yes<br> <input type="radio" name="HSC" value="No"> No<br>
</div>
<span class="col-sm-4 control-label">
<?php echo form_error('HSC'); ?>
</span>
</div>
<?php
if(form_error('student_date_of_graduate'))
echo "<div class='form-group has-error' >";
else
echo "<div class='form-group' >";
?>
<label for="student_date_of_graduate" class="col-sm-2 control-label">
<?=$this->lang->line("student_date_of_graduate")?>
</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="student_date_of_graduate" name="student_date_of_graduate" value="<?=set_value('student_date_of_graduate')?>" >
</div>
<span class="col-sm-4 control-label">
<?php echo form_error('student_date_of_graduate'); ?>
</span>
</div>
<?php
if(form_error('schoolname'))
echo "<div class='form-group has-error' >";
else
echo "<div class='form-group' >";
?>
<label for="name_id" class="col-sm-2 control-label">
<?=$this->lang->line("student_schoolname")?>
</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="schoolname" name="schoolname" value="<?=set_value('schoolname')?>" >
</div>
<span class="col-sm-4 control-label">
<?php echo form_error('schoolname'); ?>
</span>
</div>
<?php
if(form_error('specialty'))
echo "<div class='form-group has-error' >";
else
echo "<div class='form-group' >";
?>
<label for="specialty" class="col-sm-2 control-label">
<?=$this->lang->line("student_specialty")?>
</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="specialty" name="specialty" value="<?=set_value('specialty')?>" >
</div>
<span class="col-sm-4 control-label">
<?php echo form_error('specialty'); ?>
</span>
</div>
<?php
if(form_error('average'))
echo "<div class='form-group has-error' >";
else
echo "<div class='form-group' >";
?>
<label for="average" class="col-sm-2 control-label">
<?=$this->lang->line("student_average")?>
</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="average" name="average" value="<?=set_value('average')?>" >
</div>
<span class="col-sm-4 control-label">
<?php echo form_error('average'); ?>
</span>
</div>
any one can help please because i dont have too many experience with javascript
Here is basic example by using javascript:
Radio Buttons:
<input type="radio" name="HSC" value="Yes" onChange="getValue(this)">Yes<br>
<input type="radio" name="HSC" value="No" onChange="getValue(this)"> No<br>
Here, i am using onchange() event for value changes.
Your Div:
<div id="yourfield" style="display:none;">
Hide Me: Place your all four fields here
student_date_of_graduate ,
average ,
schoolname and
specialty
</div>
You need a identifier id="yourfield" for perform changes like show and hide the specific div.
Script:
<script type="text/javascript">
function getValue(x) {
if(x.value == 'No'){
document.getElementById("yourfield").style.display = 'none'; // you need a identifier for changes
}
else{
document.getElementById("yourfield").style.display = 'block'; // you need a identifier for changes
}
}
</script>
Simple javascript function, which only use to show or hide your div according to radio button value.
Use jQuery :
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'your input id') {
$('#div id').show();
}
else {
$('#div id').hide();
}
});
});
I have a form which is posted via php and if I get a error it highlights only the input field red. What I would like to do or know if there is a way to do is highlight the whole div field which contains the select field and everything and show that this whole div has a error.
Here is my html code.
<div class="form-group">
<div class="<?php if(form_error('fullname')!= null){echo ' has-error';} ?>">
<label class="col-md-4 control-label">
<?php echo lang("full_name"); ?>
</label>
<div class="col-md-8">
<input type="text" name="fullname" class="form-control" value="<?php if (isset($userinfo['Fullname'])) {echo $userinfo['Fullname'];} ?>" placeholder="<?php echo lang(" fullname "); ?>">
</div>
</div>
</div>
Right now it only highlights input field but I want it to highlight the whole div form-group.
Since you are using bootstrap, you could try this. Please change
<div class="form-group">
to
<div class="form-group alert alert-danger">
Try this.
<div class="form-group <?php if(form_error('fullname')!= null){echo ' bg-danger';} ?>">
<div class="<?php if(form_error('fullname')!= null){echo ' has-error';} ?>">
<label class="col-md-4 control-label">
<?php echo lang("full_name"); ?>
</label>
<div class="col-md-8">
<input type="text" name="fullname" class="form-control" value="<?php if (isset($userinfo['Fullname'])) {echo $userinfo['Fullname'];} ?>" placeholder="<?php echo lang(" fullname "); ?>">
</div>
</div>
</div>
What I have done is used, .bg-danger, one of the Bootstrap Contextual Classes based on the same if condition you have to apply the has-error class.