Select show hide div after specific values input - javascript

I'm basically trying to
Show upload div when status input valued="Tidak aktif"
Hide upload div when status input valued ="Aktif"
This is my code
<h2>EDIT STATUS PEGAWAI</h2>
<?php
$ambildata = $koneksi -> query ("SELECT * FROM diniyah WHERE ID ='$_GET[id]'");
$pecahdata = $ambildata -> fetch_assoc();
echo "<pre>" ;
print_r($pecahdata);
echo "</pre>";
?>
<h2>GANTI STATUS PEGAWAI : </h2>
<form method="post" enctype="multipart/form-data">
<select class="form-control form-control-lg" name="STATUS" id="STATUS">
<option value="Aktif">AKTIF</option>
<option value="Tidak Aktif">TIDAK AKTIF</option>
<div class="form-group" style="display:none;">
<input type="file" name="uploaddiniyah" class="form-control">
<button class="btn btn-primary" name="ubah">Konfirmasi</button>
</div>
</form>
<?php
if (isset($_POST['Tidak Aktif'])){
include'upload.php';
}else{
include'home.php';
}
?>
<?php
if (isset($_POST['ubah'])) {
$uploaddiniyah = true;
$namafoto = $_FILES ['uploaddiniyah']['name'];
$lokasifoto = $_FILES ['uploaddiniyah']['tmp_name'];
move_uploaded_file($lokasifoto, "../fotodokumen/".$namafoto);
//jk foto dirubah
$koneksi->query("UPDATE diniyah SET status='$_POST[STATUS]' WHERE ID='$_GET[id]'");
$update_gambar=mysqli_query($koneksi,"UPDATE diniyah SET uploaddiniyah='$namafoto' WHERE ID='$_GET[id]'");
echo "<div class='alert alert-info'> Data Tersimpan</div>";
}
?>
Is there a mistake on my code?

You can use basic js for do that like:
let status = document.getElementById('STATUS');
let upload = document.getElementById('upload');
status.onchange = function()
{
if(this.value === "Tidak Aktif"){
upload.style.display = 'block';
}else{
upload.style.display = 'none';
}
}
<select class="form-control form-control-lg" name="STATUS" id="STATUS">
<option value="Aktif">AKTIF</option>
<option value="Tidak Aktif">TIDAK AKTIF</option>
</select>
<div class="form-group" id='upload' style="display:none;">
<input type="file" name="uploaddiniyah" class="form-control">
</div>

Related

Hide/ unhide text fields based on user type using javascript?

When the form page is loaded, it automatically pulls the type of user account from the DB into a text field called, check_type. I want to hide/ unhide a text field based on user account type. If it is an Admin account then show textfield1, and for any other account, type hide textfield1.
Here is the code I wrote; but, it is not working. Maybe, I have used incorrect syntax.
<?php
// Include config file
require_once "config.php";
$sql="SELECT * FROM users WHERE username = '$user' ";
$result = mysqli_query($mysqli,$sql);
while($row = mysqli_fetch_array($result)) {
$type = $row['acct_type'];
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hide/ Unhide</title>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
var check_type = document.getElementById("check_type");
var atype = document.getElementById("atype");
if(check_type == 'Admin')
{
atype.style.display = "block";
}
else
{
atype.style.display = "none";
}
});
</script>
</head>
<body>
<form>
<div>
<input name="check_type" id="check_type" type="hidden" value="<?php echo $type; ?>">
</div>
<div class="form-group">
<label>Account Type</label>
<select type="text" name="atype" id="atype" class="form-control" value="<?php echo $atype; ?>">
<option value="<?php echo $atype; ?>" selected><?php echo $atype; ?></option>
<option value="User">User</option>
<option value="Admin">Admin</option>
</select>
<span></span>
</div>
<div>
<input type="submit" id="submit" value="Submit"/>
</div>
</form>
</body>
</html>
You need to check the value of check_type. But it depends on what types of the element you are using for check_type. If its input type then value otherwise innerHTML
UPDATED
Type: Admin
$(document).ready(function() {
// Input Type
var check_type = document.getElementById("check_type");
var textfield1 = document.getElementById("atype");
if(check_type.value == 'Admin') {
textfield1.style.display = "block";
} else {
textfield1.style.display = "none";
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div>
<input name="check_type" id="check_type" type="hidden" value="Admin">
</div>
<div class="form-group">
<label>Account Type</label>
<select type="text" name="atype" id="atype" class="form-control">
<option value="User">User</option>
<option value="Admin">Admin</option>
</select>
</div>
<div>
<input type="submit" id="submit" value="Submit"/>
</div>
</form>
Type: User
$(document).ready(function() {
// Input Type
var check_type = document.getElementById("check_type");
var textfield1 = document.getElementById("atype");
if(check_type.value == 'Admin') {
textfield1.style.display = "block";
} else {
textfield1.style.display = "none";
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div>
<input name="check_type" id="check_type" type="hidden" value="User">
</div>
<div class="form-group">
<label>Account Type</label>
<select type="text" name="atype" id="atype" class="form-control">
<option value="User">User</option>
<option value="Admin">Admin</option>
</select>
</div>
<div>
<input type="submit" id="submit" value="Submit"/>
</div>
</form>
Just add value in your get element to get the element value try :
check_type.value
<script language="javascript" type="text/javascript">
$(document).ready(function() {
var check_type = document.getElementById("check_type");
var textfield1 = document.getElementById("textfield1");
if(check_type.value == 'Admin')
{
textfield1.style.display = "block";
}
else
{
textfield1.style.display = "none";
}
});
</script>

Retain ajax populated value in dropdown

I have a form where two dropdowns are kept. When the value on first is selected, ajax call is made to show related results as second dropdown list. My issue is when value is selected on second dropdown and form is submitted the second dropdown list(which is being populated on basis of first selection made in first select box) gets empty. I want to retain the value into the second dropdown selected after form submit. Can I have some insight over the same.
<div class="form-group">
<div class="col-md-12">
<div class="col-md-3">
<label for="username" class="control-label">Select Level:</label>
</div>
<div class="col-md-9">
<select name="levels" class="form-control" required="" id = "level">
<?php $fnc->selectBoxsearchLevel("tbl_levels_master","id","level_title", $level_id) ; ?>
</select>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#level").change(function() {
var level_id = $(this).val();
if(level_id != "") {
$.ajax({
url:"get_units.php",
data:{l_id:level_id},
type:'POST',
success:function(response) {
//console.log (response);
var resp = $.trim(response);
$("#unit").html(resp);
}
});
} else {
$("#unit").html("<option value=''>------- Selected --------</option>");
}
});
});
</script>
<div class="form-group">
<div class="col-md-12">
<div class="col-md-3">
<label for="username" class="control-label">Select Unit:</label>
</div>
<div class="col-md-9">
<select name="units" class="form-control" required="" id= "unit">
<option>------- Select --------</option>
</select>
</div>
</div>
</div>
And my get_units.php
<?php
$db = new Database(DB_SERVER, DB_USER, DB_PASS, DB_DATABASE);
$level_id = $_POST['l_id'];
$sql = "select * from tbl where level=$level_id";
$res = $db->query($sql);
echo "<option value=''>------- Select --------</option>";
while($row = mysql_fetch_array($res)) {
echo "<option value='".$row['id']."'>".$row['title']."</option>";
}
?>

Dropdown Onchange and Passing JavaScript Value to PHP

Hello I have a problem on how should I send a JavaScript value to PHP.
Here is my form:
Dropdown Question from database:
fiddle code
<form action="action/survey">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Select Question</label>
<div class="col-sm-10">
<select class="form-control" id="mySelect" onchange="option()">
<?php
$sql = mysqli_query($con,"SELECT *,(SELECT GROUP_CONCAT(answer) AS `option`FROM `survey_anweroptions` WHERE survey_qID = sq.survey_qID) `option` FROM `survey_questionnaire`sq WHERE sq.survey_ID = $id");
while ($q = mysqli_fetch_array($sql)) {
?>
<option value="<?php echo $q[0]?>"><?php echo $q[2]?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label " for=""></label>
</div>
<?php
$sql = mysqli_query($con,"SELECT *,(SELECT GROUP_CONCAT(answer) AS `option`FROM `survey_anweroptions` WHERE survey_qID = sq.survey_qID) `option` FROM `survey_questionnaire`sq WHERE sq.survey_ID = 1 AND survey_qID = 1");
$d1= mysqli_fetch_array($sql);
?>
<div class="form-group">
<label class="control-label col-sm-2" for="">Question</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="" placeholder="" value="<?php echo $d1[2]?>">
</div>
</div>
<?php
$variable = $d1[3];
$z = 1;
$piece = explode(",", $variable);
foreach ($piece as $key => $value) {
?>
<div class="form-group">
<label class="control-label col-sm-2" for="">Option <?php echo $z?> </label>
<div class="col-sm-10">
<input type="text" class="form-control" id="" placeholder="" value="<?php echo $value?>">
</div>
</div>
<?php
$z++;
}
?>
<div class="text-center">
<button type="submit" class="btn btn-default" name="">Update</button>
</div>
</form>
JavaScript:
function option(){
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
What I want is if I select 1 value on the drop-down, the value of option must be sent to a PHP variable in this query:
SELECT *, (
SELECT GROUP_CONCAT(answer) AS `option`
FROM `survey_anweroptions`
WHERE survey_qID = sq.survey_qID
) `option`
FROM `survey_questionnaire`sq
WHERE sq.survey_ID = 1
AND survey_qID = (**the value of option will go here**)
You should use name instead of id. and do print_r($_POST) to check weather post data coming or not. also you dont need javascript for this until you are using ajax to call your php script
like #Coder said you the inputs send to the server with it's name attribute not id attribute
you should change the select element to
<select class="form-control" id="mySelect" name="my_select" onchange="option()">
and retrieve it's value with
$_POST['my_select'] // if you use POST method on form submition
$_GET['my_select'] // if you use GET method on form submition
$_REQUEST['my_select'] // if you accept any method

Issue posting form via AJAX

I have the following form which I then send upon submit via AJAX to insert to a MySQL DB through Ajax. All inputbox in form have their own Id and I get them all in my .php process file except the ones "cas" and "dat" that do not seem to go through the AJAX posting process.
The form:
<form id="form">
<div class="form-group">
<label class="lab" for="nm">id</label>
<input disabled type="text" id="id" name="id" class="form-control" placeholder="Id">
</div>
<div class="form-group">
<input type="text" class="form-control" name="cas" id="cas" value="2">
<input type="text" class="form-control" name="dat" id="dat" value="2017-11-30">
</div>
<div class="form-group">
<label class="lab" for="nm">Product</label> <?php
//// function populate ($sql, $class,$name, $id, $title, $value,$option)
echo populate ("SELECT * FROM product_family order by product_type_id ASC","form-control","nm","nm","Select Product", "product_family", "product_family");?>
</div>
<div class="form-group">
<label class="lab" for="em">Win</label>
<input type="text" id="em" name="em" class="form-control allow_decimal" placeholder="Win">
</div>
<div class="form-group">
<label class="lab" for="hp">Drop</label>
<input type="text" id="hp" name="hp" class="form-control allow_decimal" placeholder="Drop">
</div>
<div class="form-group">
<label class="lab" for="ad">Currency</label> <?php
//// function populate ($sql, $class,$name, $id, $title, $value,$option)
echo populate ("SELECT * FROM currency order by id ASC","form-control","ad","ad","Select Currency", "currency", "currency");?>
</div>
<button type="button" id="save" class="btn btn-success" onclick="saveData()">Save</button>
<button type="button" id="update" class="btn btn-warning" onclick="updateData()">Update</button>
</form>
I then have the following JavaScript code triggering the Insert upon "save data" click in order to post the different inputbox values to my .php processing file:
function saveData(){
var id = $('#id').val();
var name = $('#nm').val();
var email = $('#em').val();
var phone = $('#hp').val();
var address = $('#ad').val();
var casino = $("#cas").val()
var date = $("#dat").val();
$.post('server.php?p=add', {id:id, nm:name, em:email, hp:phone, ad:address, cas:casino, dat:date}, function(data){
viewData()
$('#id').val(' ')
$('#nm').val(' ')
$('#em').val(' ')
$('#hp').val(' ')
$('#ad').val(' ')
})
}
function viewData(){
$.get('server.php', function(data){
$('tbody').html(data)
})
}
Then I try to read my "$_post" values on the PHP side:
if($page=='add'){
try{
$id = $_POST['id'];
$nm = $_POST['nm'];
$em = $_POST['em'];
$hp = $_POST['hp'];
$ad = $_POST['ad'];
$casino_id = $_POST['cas'];
$date = $_POST['dat'];
}
I perfectly get all variables except the dat and cas posts that do no appear in the $_post list. Listing all $_Post the following way:
$myfile = fopen("LOGPOST.txt", "w") or die("Unable to open file!");
foreach ($_POST as $key => $value){
$txt= $txt."{$key} = {$value}//";
gives the following output: id = //nm = F&B Sales//em = 1000//hp = 500//ad = EUR//
What am I doing wrong?

How to pass the value in AJAX without refreshing with validation

Here i want do file validation after that all value pass next page through AJAX so trying like this but i can't get correct answer,suppose select city field and click the button meaans page is refreshing but my condition don't want to refresh the page how can do this?
function validateForm() {
var city = document.forms["myForm"]["city"].value;
if (city == null || city == "") {
document.getElementById("state_err").innerHTML = "Select Your State";
return false;
}
else{
$.ajax({
url:'search_truck.php',
type:'POST',
data : { 'state_id' : city},
success:function(data){
//var res=jQuery.parseJSON(data);// convert the json
console.log(data);
},
});
//return true;
/*var formData = new FormData();
var formData = new FormData($('#newUserForm')[0]);
formData.append('file', $('input[type=file]')[0].files[0]);*/
}
}
<form id="basicForm" method="POST" onsubmit="return validateForm()" name="myForm" enctype="multipart/form-data" >
<div class="col-md-4">
<select name="city" id="city" onchange="getCity(this.value);" class="form-control intro-form-fixer">
<option value="">Select City</option>
<?php
include("dbconfig.php");
$sql = mysql_query("SELECT * FROM state_list");
while($row=mysql_fetch_assoc($sql)){
?>
<option value="<?php echo $row['id'];?>"><?php echo $row['state'];?></option>
<?php } ?>
</select> <span id="state_err"></span>
</div>
<div class="col-md-4">
<select class="form-control intro-form-fixer" autocomplete="off" name="area" id="area" style="width:100%;">
<option value="">Select Area</option>
</select>
</div>
<div class="col-md-2">
<button type="submit" id="btn-submit" class="btn btn-success">SEARCH</button>
</div>
</form>
You want to use preventDefault();
So, get the form on submit and pass the event to the callback. Then call preventDefault() on the variable.
Because you're sending the data to the server, why not validate it there and then return the errors?
$('#basicForm').submit(function (e) {
e.preventDefault();
validateForm();
});
function validateForm() {
var city = document.forms["myForm"]["city"].value;
if (city == null || city == "") {
document.getElementById("state_err").innerHTML = "Select Your State";
return false;
}
else {
$.ajax({
url: 'search_truck.php',
type: 'POST',
data: {'state_id': city},
success: function (data) {
//var res=jQuery.parseJSON(data);// convert the json
console.log(data);
},
});
//return true;
/*var formData = new FormData();
var formData = new FormData($('#newUserForm')[0]);
formData.append('file', $('input[type=file]')[0].files[0]);*/
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="basicForm" method="POST" onsubmit="return validateForm()" name="myForm" enctype="multipart/form-data">
<div class="col-md-4">
<select name="city" id="city" onchange="getCity(this.value);" class="form-control intro-form-fixer">
<option value="">Select City</option>
<?php
include("dbconfig.php");
$sql = mysql_query("SELECT * FROM state_list");
while($row=mysql_fetch_assoc($sql)){
?>
<option value="<?php echo $row['id'];?>"><?php echo $row['state'];?></option>
<?php } ?>
</select> <span id="state_err"></span>
</div>
<div class="col-md-4">
<select class="form-control intro-form-fixer" autocomplete="off" name="area" id="area" style="width:100%;">
<option value="">Select Area</option>
</select>
</div>
<div class="col-md-2">
<button type="submit" id="btn-submit" class="btn btn-success">SEARCH</button>
</div>
</form>

Categories

Resources