I have a form that uses JavaScript for displaying a div depending on what radio button was chosen. Now in my other form for the update, i'd applied the same java script but made few changes on displaying directly the div without clicking the radio button but it didn't work. How to do it correctly. Any help is much appreciated.
<script type="text/javascript">
function payment() {
if (document.getElementById('installmentCheck').checked) {
document.getElementById('installment').style.display = "block";
document.getElementById('full').style.display = "none";
}else if (document.getElementById('fullCheck').checked) {
document.getElementById('full').style.display = "block";
document.getElementById('installment').style.display = "none";
}
}
</script>
<div class="col-lg-6 ">
<div class="form-group">
<label class="control-label">
Payment Scheme :
</label>
<div class="input-group ">
<?php
if ($scholarship->scholarship_payment != 'Full') {
echo '<input type="radio" onclick="javascript:payment();" name="choosePaymentScheme" id="installmentCheck" value="Installment" checked > Installment    ';
echo '<input type="radio" onclick="javascript:payment();" name="choosePaymentScheme" id="fullCheck" value="Full"> Full';
}else{
echo '<input type="radio" onclick="javascript:payment();" name="choosePaymentScheme" id="installmentCheck" value="Installment" > Installment    ';
echo '<input type="radio" onclick="javascript:payment();" name="choosePaymentScheme" id="fullCheck" value="Full" checked> Full';
}
?>
</div>
</div>
<div id="installment" style="display:none">
<div class="form-group">
<input type="text" name="Install" >
</div>
</div>
<div id="full" style="display:none">
<div class="form-group">
<input type="text" name="full" >
</div>
</div>
</div>
If I understood you correctly, you could remove the display:none CSS from the bottom <div>s conditionally:
<div id="installment" <?php if($scholarship->scholarship_payment == 'Full'){ echo 'style="display:none"' } ?>>
<div class="form-group">
<input type="text" name="Install" >
</div>
</div>
<div id="full" <?php if($scholarship->scholarship_payment != 'Full'){ echo 'style="display:none"' } ?>>
<div class="form-group">
<input type="text" name="full" >
</div>
</div>
Or, alternatively, switch id and name in one box:
<div id="<?php if($scholarship->scholarship_payment != 'Full'){ echo 'installment' } else { echo "full" } ?>">
<div class="form-group">
<input type="text" name="<?php if($scholarship->scholarship_payment != 'Full'){ echo 'Install' } else { echo "full" } ?>" >
</div>
</div>
Related
Here is what I want to do: I have a form on which I have a checkbox. When that checkbox is checked I want some additional fields to show and when it is not checked I want those fields not to show. Also after the form is submitted and there is some kind of error (for example the person has not confirmed that they are not a robot) I want the checkbox to remain checked if it was previously checked (and of course the additional fields still to be showed if it is checked).
I tried a couple of different approaches:
Using data-toggle
Using a JavaScript on click function of the checkbox
Using jQuery prop method
Using jQuery :checked selector
(Reference for 3. and 4. https://www.tutorialrepublic.com/faq/how-to-check-a-checkbox-is-checked-or-not-using-jquery.php)
An occurring problem with all of the methods was that after submitting the form with errors then the additional fields would not be shown even though the checkbox was checked.
<div class="form-group">
<label for="additionalFields" class="checkbox-inline ml-1 mb-0">Show additonal fields</label>
<input class="align-middle" type="checkbox" name="additionalFields" value="additionalFields" data-toggle="collapse" data-target="#fields" <?php if (isset($_POST['additonalFields'])) echo 'checked="checked"'; ?>>
</div>
<div class="form-group collapse in row" id="fields">
<div class="col-sm-6">
<label class="form-control-label ml-1 mb-xs-form" for="fieldOne">Field 1:</label>
<input class="form-control" type="text" id="fieldOne" name="fieldOne" maxlength="100" placeholder="Field 1"
<?php
if ($_POST && ($suspect || $errors || !($response->success))) {
echo 'value="' . htmlentities($fieldOne) . '"';
}
?>>
</div>
<div class="col-sm-6">
<label class="form-control-label ml-1 mt-3 mt-sm-0" for="fieldTwo">Field 2</label>
<input class="form-control" type="text" id="fieldTwo" name="fieldTwo" maxlength="100" placeholder="Field 2"
<?php
if ($_POST && ($suspect || $errors || !($response->success))) {
echo 'value="' . htmlentities($fieldTwo) . '"';
}
?>>
</div>
</div><!-- form-group -->
The above code is using data-toggle. When using JavaScript or jQuery I was using display: none; and display: flex; to show and hide the additional fields.
I do not see any jQuery but I assume you mean
$(function() {
$("[name=additionalFields]").on("change",function() {
$($(this).data("target")).toggle(this.checked);
}).trigger("change"); // initialise on load
})
on html reloading, you need manually predefined what js event did if you click the checkbox.
if you mean using data-toggle is using bootstrap accordion, then you need to add class 'show' to event data target to make that extra input field showed.
so try this:
<div class="form-group">
<label for="additionalFields" class="checkbox-inline ml-1 mb-0">Show additonal fields</label>
<input class="align-middle" type="checkbox" name="additionalFields" value="additionalFields" data-toggle="collapse" data-target="#fields" <?php if (isset($_POST['additonalFields'])) echo 'checked="checked"'; ?>>
</div>
<div class="form-group collapse in row <?php if (isset($_POST['additonalFields'])) echo 'show'; ?>" id="fields">
<div class="col-sm-6">
<label class="form-control-label ml-1 mb-xs-form" for="fieldOne">Field 1:</label>
<input class="form-control" type="text" id="fieldOne" name="fieldOne" maxlength="100" placeholder="Field 1"
<?php
if ($_POST && ($suspect || $errors || !($response->success))) {
echo 'value="' . htmlentities($fieldOne) . '"';
}
?>>
</div>
<div class="col-sm-6">
<label class="form-control-label ml-1 mt-3 mt-sm-0" for="fieldTwo">Field 2</label>
<input class="form-control" type="text" id="fieldTwo" name="fieldTwo" maxlength="100" placeholder="Field 2"
<?php
if ($_POST && ($suspect || $errors || !($response->success))) {
echo 'value="' . htmlentities($fieldTwo) . '"';
}
?>>
</div>
I have very simple form. I have one dropdown menu where default is text selected. I want show file uploading box only if we select image or video from dropdown menu. Its HTML/PHP page. I have tried to put javascript in my body tag but its not working.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$('#faq_type').on('change', function () {
$("#upload").css('display', (this.value == '1' || this.value == '2') ? 'block' :
'none');
});
</script>
my dropdown form is like this
<div class="col-md-6">
<select name="faq_type" id="faq_type" class="select2" required>
<option value="0" <?php if($row['type'] == "0") echo "selected"; ?>>Text</option>
<option value="1" <?php if($row['type'] == "1") echo "selected"; ?>>Image</option>
<option value="2" <?php if($row['type'] == "2") echo "selected"; ?>>Video</option>
</select>
</div>
My full page is like this
<?php include("includes/header.php");
require("includes/function.php");
require("language/language.php");
require_once("thumbnail_images.class.php");
if(isset($_POST['submit']) and isset($_GET['add']))
{
$picture_name=rand(0,99999)."_".$_FILES['picture_name']['name'];
$pic1=$_FILES['picture_name']['tmp_name'];
$tpath1='images/'.$picture_name;
copy($pic1,$tpath1);
$thumbpath='images/thumbs/'.$picture_name;
$obj_img = new thumbnail_images();
$obj_img->PathImgOld = $tpath1;
$obj_img->PathImgNew =$thumbpath;
$obj_img->NewWidth = 100;
$obj_img->NewHeight = 100;
if (!$obj_img->create_thumbnail_images())
{
echo $_SESSION['msg']="Thumbnail not created... please upload image again";
exit;
}
$data = array(
'question' => $_POST['question'],
'answer' => $_POST['answer'],
'type' => $_POST['faq_type'],
'picture_name' => $picture_name
);
$qry = Insert('faq',$data);
$_SESSION['msg']="10";
header( "Location:faq.php");
exit;
}
if(isset($_GET['faq_id']))
{
$qry="SELECT * FROM faq where id ='".$_GET['faq_id']."'";
$result=mysqli_query($mysqli,$qry);
$row=mysqli_fetch_assoc($result);
}
if(isset($_POST['submit']) and isset($_POST['faq_id']))
{
if($_FILES['picture_name']['name']!="")
{
$img_res=mysqli_query($mysqli,'SELECT * FROM faq WHERE id='.$_GET['faq_id'].'');
$img_res_row=mysqli_fetch_assoc($img_res);
if($img_res_row['picture_name']!="")
{
unlink('images/thumbs/'.$img_res_row['picture_name']);
unlink('images/'.$img_res_row['picture_name']);
}
$picture_name=rand(0,99999)."_".$_FILES['picture_name']['name'];
$pic1=$_FILES['picture_name']['tmp_name'];
$tpath1='images/'.$picture_name;
copy($pic1,$tpath1);
$thumbpath='images/thumbs/'.$picture_name;
$obj_img = new thumbnail_images();
$obj_img->PathImgOld = $tpath1;
$obj_img->PathImgNew =$thumbpath;
$obj_img->NewWidth = 100;
$obj_img->NewHeight = 100;
if (!$obj_img->create_thumbnail_images())
{
echo $_SESSION['msg']="Thumbnail not created... please upload image again";
exit;
}
$data = array(
'question' => $_POST['question'],
'answer' => $_POST['answer'],
'type' => $_POST['faq_type'],
'picture_name' => $picture_name
);
$faq_edit=Update('faq', $data, "WHERE id = '".$_POST['faq_id']."'");
}
else
{
$data = array(
'question' => $_POST['question'],
'answer' => $_POST['answer'],
'type' => $_POST['faq_type']
);
$faq_edit=Update('faq', $data, "WHERE id = '".$_POST['faq_id']."'");
}
if ($faq_edit > 0)
{
$_SESSION['msg']="11";
header( "Location:add_faq.php?faq_id=".$_POST['faq_id']);
exit;
}
}
?>
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$('#faq_type').on('change', function () {
$("#upload").css('display', (this.value == '1' || this.value == '2') ? 'block' :
'none');
});
</script>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="page_title_block">
<div class="col-md-5 col-xs-12">
<div class="page_title">Add FAQ</div>
</div>
</div>
<div class="clearfix"></div>
<div class="card-body mrg_bottom">
<form class="form form-horizontal" action="" method="post" enctype="multipart/form-data" onsubmit="return checkValidation(this);">
<input type="hidden" name="faq_id" value="<?php echo $_GET['faq_id'];?>" />
<div class="section">
<div class="section-body">
<div class="form-group">
<label class="col-md-3 control-label">FAQ Type :-</label>
<?php if(isset($_GET['faq_id'])) {?>
<div class="col-md-6">
<select name="faq_type" id="faq_type" class="select2" required>
<option value="0" <?php if($row['type'] == "0") echo "selected"; ?>>Text</option>
<option value="1" <?php if($row['type'] == "1") echo "selected"; ?>>Image</option>
<option value="2" <?php if($row['type'] == "2") echo "selected"; ?>>Video</option>
</select>
</div>
<?php } else {?>
<div class="col-md-6">
<select name="faq_type" id="faq_type" class="select2" required>
<option value="0">Text</option>
<option value="1">Image</option>
<option value="2">Video</option>
</select>
</div>
<?php }?>
</div>
<div class="form-group" id="upload" style="display: none">
<label class="col-md-3 control-label">Select File :-</label>
<div class="col-md-6">
<div class="fileupload_block" >
<input type="file" name="picture_name" value="fileupload" id="fileupload">
<?php if(isset($_GET['faq_id']) and $row['picture_name']!="") {?>
<div class="fileupload_img"><img type="image" src="images/<?php echo $row['picture_name'];?>" alt="category image" /></div>
<?php } else {?>
<div class="fileupload_img"><img type="image" src="assets/images/add-image.png" alt="category image" /></div>
<?php }?>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label class="control-label">Question :-</label>
</div>
<div class="col-md-6">
<textarea name="question" id="question" rows="1" class="form-control" ><?php if(isset($_GET['faq_id'])){echo $row['question'];}?></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label class="control-label">Answer:-</label>
</div>
<div class="col-md-6">
<textarea name="answer" id="answer" rows="1" class="form-control" data-emojiable="true"><?php if(isset($_GET['faq_id'])){echo $row['answer'];}?></textarea>
</div>
</div>
<div class="form-group"> </div>
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<button type="submit" name="submit" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
<?php include("includes/footer.php");?>
Let me know if someone can correct, whats wrong in this.
I have a foreach that loops through and javascript that toggles days of the week and then a checkbox that toggles the times to - from. Although, if there are two of these the toggle only works for the top one.
I am trying to figure out how to have each toggle separate on each div. I think I need to use parent but im not too sure. Also this is an edit, so I need to have the values displayed on each one if selected.
$('input[id="specificTime"]').on('switchChange.bootstrapSwitch', function(event, state) {
$("#specific_on").toggle();
console.log(state); // true | false
});
$('#MonChecked').click(function() {
$("#MonTimes").toggle(this.checked);
});
$('#TueChecked').click(function() {
$("#TueTimes").toggle(this.checked);
});
$('#WedChecked').click(function() {
$("#WedTimes").toggle(this.checked);
});
$('#ThuChecked').click(function() {
$("#ThuTimes").toggle(this.checked);
});
$('#FriChecked').click(function() {
$("#FriTimes").toggle(this.checked);
});
$('#SatChecked').click(function() {
$("#SatTimes").toggle(this.checked);
});
$('#SunChecked').click(function() {
$("#SunTimes").toggle(this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" style="height:30px">
<div class="col-md-3 topPadding">
Specific Times
</div>
<div class="col-md-9" style="height:30px">
<!-- <input type="checkbox" class="make-switch" data-on-label="All Times" data-off-label="Specific Times" value="time" name="specificTime" data-size="small"> -->
<input type="checkbox" class="make-switch" data-on-label="All Times" data-off-label="Specific Times" value="time" id="specificTime" name="specificTime" data-size="small">
</div>
</div>
<hr>
<div id="specific_on" style="display:none">
<div class="row">
<div class="col-md-12">
<?php foreach ($week_days as $day) {
$sday = substr($day,0,3);
?>
<div class="row">
<div class="col-md-1">
<input type="checkbox" class="form-control input-sm" id="<?php echo $sday?>Checked" name="day[]" value="<?php echo $sday?>" data-size="small">
</div>
<div class="col-md-2 topPadding">
<?php echo ucfirst($day) ?>
</div>
<div id="<?php echo $sday?>Times" style="display:none;">
<div class="col-md-2 topPadding2">
<input type="text" class="form-control timepicker form-filter input-sm" id="timepicker" required readonly name="<?php echo $sday?>_time_from" placeholder="From">
</div>
<div class="col-md-2 topPadding2">
<input type="text" class="form-control timepicker form-filter input-sm" id="timepicker" required readonly name="<?php echo $sday?>_time_to" placeholder="To">
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</div> <!-- End of specific_on -->
I am dragging data from a database and want to display different disabled form fields dependant on the selected radio button.
I have tried using onload="javascript:...." but it's not working.
HTML:
<fieldset>
<legend>Employment/Education Details</legend>
<div class="input-wrapper">
<label>Are you?<br>
<input type="radio" onload="javascript:employmentCheck();" name="employment_status" value="employed" id="employed" <?php if
($employment_status=="employed") echo "checked"; ?> disabled><label for="employed">Employed</label>
<input type="radio" onload="javascript:employmentCheck();" name="employment_status" value="self_employed" id="self_employed" <?php if
($employment_status=="self_employed") echo "checked"; ?> disabled><label for="self_employed">Self Employed</label>
<input type="radio" onload="javascript:employmentCheck();" name="employment_status" value="student" id="student" <?php if
($employment_status=="student") echo "checked"; ?> disabled><label for="student">Student</label>
<input type="radio" onload="javascript:employmentCheck();" name="employment_status" value="other" id="other" <?php if
($employment_status=="other") echo "checked"; ?> disabled><label for="other">Other</label>
</label>
</div>
<div id="college_nus" style="display:none">
<div class="row">
<div class="large-6 columns">
<div class="input-wrapper">
<label>College or NUS Number
<input type="text" name="college_nus" value="<?php echo $college_nus; ?>" disabled>
</label>
</div>
</div>
</div>
</div>
<div id="employment_details" style="display:none">
<div class="row">
<div class="large-6 columns">
<div class="input-wrapper">
<label>Employer Name
<input type="text" name="employment_company" value="<?php echo $employment_company; ?>" disabld>
</label>
</div>
</div>
<div class="large-6 columns">
<div class="input-wrapper">
<label>Job Title
<input type="text" name="employment_title" value="<?php echo $employment_title; ?>" disabled>
</label>
</div>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<div class="input-wrapper">
<label>Employment Address
<textarea name="employment_address" rows="4" value="<?php echo $employment_address; ?>" disabled></textarea>
</label>
</div>
</div>
<div class="large-6 columns">
<div class="input-wrapper">
<label>
Occupation
<input type="text" value="<?php echo $occupation; ?>" disabled>
</label>
</div>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<div class="input-wrapper">
<label>Employment Email
<input type="text" name="employment_email" value="<?php echo $employment_email; ?>" disabled>
</label>
</div>
</div>
<div class="large-6 columns">
<div class="input-wrapper">
<label>Employment Phone
<input type="text" name="employment_phone" value="<?php echo $employment_phone; ?>" disabled>
</label>
</div>
</div>
</div>
</div>
</fieldset>
Javascript:
function employmentCheck() {
if (document.getElementById('student').checked) {
document.getElementById('college_nus').style.display = 'block';
}
else document.getElementById('college_nus').style.display = 'none';
if (document.getElementById('employed').checked || document.getElementById('self_employed').checked) {
document.getElementById('employment_details').style.display = 'block';
}
else document.getElementById('employment_details').style.display = 'none';
}
Can anyone help please?
I changed the function to window.onload and it worked fine. Here is a plunker.
https://plnkr.co/edit/Pz2rKRg9geglgKhdJM4H?p=preview
Here is the function
window.onload = function(){
if (document.getElementById('student').checked) {
console.log("student");
document.getElementById('college_nus').style.display = 'block';
}
else {
document.getElementById('college_nus').style.display = 'none';
}
if (document.getElementById('employed').checked || document.getElementById('self_employed').checked) {
console.log("employed");
document.getElementById('employment_details').style.display = 'block';
}
else {
document.getElementById('employment_details').style.display = 'none';
}
}
I don't think there is an event of onload defined on the radio button object.
Thanks
Paras
I have a table named order_master which stores the order_id column. I also have another table order_details having the columns order_id (FK), vendor, purchase_date, delivery_date, and person_name which stores the details of the order corresponding to the order_id from the order_master table.
I want to display a form wherein a button add new item will be displayed. On clicking this button each time, a new block of fields (like vendor, purchase_date, delivery_date, person_name) will be displayed. The user can click the above button and enter as many items as he wants on the same order_id. And when he submits the form, the items on this form must be entered in the database.
How to achieve this?
actually i am using codeigniter framework (MVC architecture). Here i am attaching the view and js file.
<?php echo form_open(); ?>
<div id="emp"></div>
<div class="box">
<div>
</div>
<div class="col-lg-12" style="padding-top: 2%;margin-bottom: 3%" id="form-box">
<div class="col-lg-6 form-group">
<select name="item[]" id="item" class="form-control">
<option value="">--Select Item--</option>
<?php foreach ($items as $item) { ?>
<option value="<?php echo $item["id"]; ?>"><?php echo $item["name"]; ?></option>
<?php } ?>
</select>
</div>
<div class="col-lg-6 form-group">
<select name="vendor[]" id="vendor" class="form-control">
<option value="">--Select Vendor--</option>
<?php foreach ($vendors as $vendor) { ?>
<option value="<?php echo $vendor["id"]; ?>"><?php echo $vendor["name"]; ?></option>
<?php } ?>
</select>
</div>
<div class="col-lg-4 form-group">
<input type="text" name="po_date[]" id="po_date" class="form-control date" placeholder="Purchase Date">
</div>
<div class="col-lg-4 form-group">
<input type="text" name="quantity[]" id="quantity" class="form-control number" placeholder="Item Quantity Individual">
</div>
<div class="col-lg-4 form-group">
<input type="text" name="unit_price[]" id="unit_price" class="form-control number" placeholder="Unit Price" style="text-align: left;">
</div>
<div class="col-lg-4 form-group">
</div>
<div class="col-lg-12 col-md-12 col-sm-12 form-group">
<textarea name="description[]" id="description" class="form-control"></textarea>
</div>
<div class="col-lg-12 col-md-12 col-sm-12" style="height: 3px;background-color: grey"></div>
<div class="col-lg-12 col-md-12 col-sm-12 form-group" id="messageBox">
</div>
</div>
</div>
<a id="add_item" class="col-lg-12" href="">Add new item</a>
<div class="col-lg-12 col-md-12 col-sm-12 text-center form-group">
<input type="button" value="Add Purchase Order" id="addpurchaseOrderBtn" class="btn btn-primary">
</div>
<?php echo form_close(); ?>
**JS File**
$("#main_content").css('minHeight', '400px');
$(document).ready(function() {
$('#add_item').click(function() {
var def_ht = $("#main_content").height() + 300;
$("#main_content").css('minHeight', def_ht);
$("#form-box").clone(true).appendTo("#form-box");
return false;
});
$("#addpurchaseOrderBtn").click(function() {
focusId = null;
var isvalid = false;
if(validateDropDown('item')){
isvalid = true;
}
if(validateDropDown('vendor')){
isvalid = true;
}
if(validatDate('po_date')){
isvalid = true;
}
if(validateTextbox('quantity')){
isvalid = true;
}
if(validateTextbox('unit_price')){
isvalid = true;
}
if(validateTextbox('description')){
isvalid = true;
}
if(isvalid){
focusId.focus();
$("#messageBox").html('<div class="alert alert-danger">There are some error in your submission. Please try again.</div>');
}else{
$("#addPurchaseFrm").submit();
}
});
});
This code works but i am unable to validate all the elements(items) in the form.
You can try the following structure-
<form name="addItem" method="post" action="addItem.php" class="insertItem">
<div class="itemAdd">
<input type="text" name="vendor" >
<input type="text" name="purchase_date" >
<input type="text" name="delivery_date" >
<input type="text" name="person_name" >
</div>
<input type="submit" name="submit" value="Add Item" class="btn btn-primary additem">
$("document").ready(function(){
$(".additem").click(function(){
$(".insertItem").append($(".itemAdd").html);
});
});
Then on addItem.php, you can execute the insert query to insert this data into your database