Develop Reference

display data on another form after selecting the option

how, after I choose the option and then it will appear #formid where the form is filled in by the $stock as selected in the option section
<div class="form-group">
<label for="exampleFormControlSelect1">Nama Item</label>
<select class="form-control" id="exampleFormControlSelect1" name="itemId">
<option selected>Choose</option>
<?php $no=1; while($row = $result->fetch_object() ) {
$stock = $row->stock;
$i_name = $row->i_name;
$id = $row->id;
?>
<option value="<?php echo $id; ?>"><?php echo $i_name; ?></option>
<?php } ?>
</select>
</div>
the form that will appear after selecting the option
<div class="form-group">
<label>Stock</label>
<input class="" type="number" name="" value="<?php echo $stock;?>">
</div>
I am new in php and javascript, can you write with a neat code & easy to understand, thank you :)

If I understand you correctly, you want to show the second div onSelect of the first one.
Because of the fact, that you use bootstrap I assume
that you have already included jQuery if not you have to do that for this example.
You have to add this JavaScript on your page.
<script>
$( document ).ready(function() {
$( "#exampleFormControlSelect1" ).change(function() {
$("#secondDiv").show();
});
});
</script>
And you need an id on your div.
<div id="secondDiv" class="form-group">
<label>Stock</label>
<input class="" type="number" name="" value="<?php echo $stock;?>">
</div>

You will need javascript for this if you want the data to appear without the page reloading.
First we make Javascript Function that takes your option id and passes it to your input value.
funcction chooseOption(clicked.id){
document.getElementById('myInput').value = clicked_id;
}
HTML and PHP we need to add a different id for each option. The best way it to pass the option name you want for each. We also added our onclick function to the options.
<div class="form-group">
<label for="exampleFormControlSelect1">Nama Item</label>
<select class="form-control" id="exampleFormControlSelect1" name="itemId">
<option selected>Choose</option>
<?php $no=1; while($row = $result->fetch_object() ) {
$stock = $row->stock;
$i_name = $row->i_name;
$id = $row->id;
echo "<option onclick=\"chooseOption(this.id);\" id=\"".$stock."\" value=\"".$id."\">".$i_name."</option>";
<?php } ?>
</select>
</div>
Added an id to your input so javascript can send the data to it.
<div class="form-group">
<label>Stock</label>
<input id="myInput" class="" type="number" name="" value="">
</div>

show data in dropdown based on first dropdown selected data

I have two dropdowns. If I select data from first dropdown then related data (based on selected data) from second dropdown should be show. I have a code. But it is not working. Thankyou in advance.
My dropdowns are: From here I select data from one dropdown.
<form class="form-inline" method="post" autocomplete="off">
<div class="vali-form">
<div class="col-md-6 form-group2">
<?php
include("connection.php");
$query1=mysql_query("select * from corporate_company ORDER BY c_name") or die (mysql_error());
?>
<label class="control-label">Select Company</label>
<select required name='cname1' id="cname1">
<option>Select</option>
<?php
while($row11=mysql_fetch_array($query1))
{
?>
<option value="<?php echo $row11['id'];?>"><?php echo $row11['c_name'];?></option>
<?php
}
?>
</select>
</div>
<div class="col-md-6 form-group2">
<label class='control-label'>Select Test</label>
<select id="selecttest1" name="selecttest1">
<option>Select</option>
</select>
</div>
<div class="clearfix"> </div>
</div>
<button type="submit" class="btn btn-default btn-send" name="submittestrelation">Submit</button>
</form>
My script is:
<script type="text/javascript">
$(document).ready(function(){
$("#cname1").is(function(){
var cnamee1 = $(this).val();
$.ajax({
type: "POST",
url: "process-request.php",
data: "cname12="+cnamee1,
}).done(function(data){
$("#selecttest1").html(data);
});
});
});
process-request.php is:
<?php
include("connection.php");
if(isset($_POST["cname12"])){
$cname1 = $_POST["cname12"];
$query1=mysql_query("select * from corporate_details where c_name='$cname1'") or die (mysql_error());
if($cname1 !== 'Select'){
echo"<option>Select test</option>";
while($value = mysql_fetch_array($query1)) {
?>
<option value="<?php echo $value['id'];?>"><?php echo $value['c_branch'];?></option>
<?php
}
}
}
?>

How do i append the PHP code to the Javascript append function under <script> tag

My Script file is
<script type="text/javascript">
$(document).ready(function(){
$(".select2").select2();
var MaxInputs = 50; //maximum input boxes allowed
var InputsWrapper = $("#overall_wrapper"); //Input boxes wrapper ID
var AddButton = $("#AddMoreFileBox"); //Add button ID
var x = InputsWrapper.length; //initlal text box count
var FieldCount=1; //to keep track of text box added
$(AddButton).click(function (e) //on add input button click
{
if(x <= MaxInputs) //max input box allowed
{
FieldCount++; //text box added increment
//add input box
$(InputsWrapper).append('<div class="repeat_element" id="row_'+FieldCount+'"><div class="col-sm-1" id="row1_'+FieldCount+'"><input type="text" class="form-control" name="s_no[]" value="'+FieldCount+'" /></div><div class="col-sm-2" id="row1_'+FieldCount+'"><select class="form-control select2" name="part_no[]" id="part_no" onchange="choose_parts(this.value);" required><option value="">Please Select</option></select></div><div class="col-sm-3" id="row1_'+FieldCount+'"><input type="text" class="form-control" name="part_desc[]" value="" /></div><div class="col-sm-1" id="row1_'+FieldCount+'"><input type="text" class="form-control" name="part_mrp[]" value="" /></div><div class="col-sm-1" id="row1_'+FieldCount+'"><input type="text" class="form-control" name="req_qty[]" value="" /></div><div class="col-sm-1" id="row1_'+FieldCount+'"><input type="text" class="form-control" name="instock[]" value="" /></div><div class="col-sm-2" id="row1_'+FieldCount+'"><select class="form-control" name="billing_type[]"><option value="Cash">Cash</option><option value="Credit">Credit</option></select></div><div class="col-sm-1" id="row1_'+FieldCount+'"><div onclick="hiding('+FieldCount+')" class="removeclass"><div class="btn btn-danger" id="AddMoreFileBox"><i class=" fa fa-minus-circle" title="Delete"></i> </div></div></div>');
$(".select2").select2(); // Reinitialize the select2 again when the div is appended
x++; //text box increment
}
return false;
});
});
</script>
And i have a page where i call this Add button jquery and i get the second row fine but i am unable to call the PHP functions like foreach,if into the append script.
My doubt is that when i click on the plus sybmol i have called the select2 JS and it comes fine but i need to call the PHP function into it for looping of option value in the <select>.
I need to generate dynamic options in this selected tag under my JS
<select class="form-control select2" name="part_no[]" id="part_no" onchange="choose_parts(this.value);" required><option value="">Please Select</option></select>
My PHP function for getting the
function getAllActiveSpare($id)
{
$query="";
$conn=connectToDB();
if(func_num_args()==1)
{
$query="SELECT * FROM `spare` WHERE `id`='".$id."' AND `status`='1' AND `delete_status`='0'";
}
else
{
$query="SELECT * FROM `spare` WHERE `delete_status`='0' AND `status`='1' ORDER BY `id` DESC ";
}
$results = $conn->query($query);
$counts = $results->num_rows;
if($counts==0)
{
return false;
}
else
{
$rows=[];
while($row = $results->fetch_assoc())
{
$rows[] = $row;
}
return $rows;
}
}
I need to append this part alone in the JS Select TAG under append function.
<?php $parts_number = getAllActiveSpare();
if($parts_number==false)
{
?>
<option value="">No Parts Created Yet</option>
<?php
}
else
{
?>
<option value="">Please Select</option>
<?php
foreach ($parts_number as $key => $single_parts) {?>
<option value="<?php echo $single_parts['ref_part_no']; ?>"><?php echo $single_parts['ref_part_no']; ?></option>
<?php
}
}
?>
</select>
This above things alone i have tried. Can anyone help me with this . I was struck up for the past two Days.

It seems you do not understand the difference between PHP and JavaScript, or the difference between the server and client side.
Difference between Javascript and PHP
To solve your problem, you probably need to use Ajax.
https://stackoverflow.com/a/23740549/851885

I am trying achive validation for dropdown error is form is sumbmitting without validation

my form consists this below div:
$("#signup").click(function()
{
$("#showMessage").html('');
if($("#accountType").val()=='')
{
$("#accountType").css({"border-style": "solid", "border-color": "red" });
$("#showMessage").html('Please Select Account Type');
$("#accountType").focus();
return false;
}
else
{
$("#accountType").css({"border-style": "solid","border-color": "#E9E9E9"});
}
}
<form method="post" id="SignUpForm" class="form-horizontal text-center">
<div class="form-group">
<label for="accountType" class="col-sm-4 control-label">Select Account Type</label>
<div class="col-sm-8">
<select class="form-control" id="accountType">
<option>- Select -</option>
<?php
$query = mysql_query("SELECT * FROM r_participant_type")or die(mysql_error());
while ($result = mysql_fetch_assoc($query)) {
?>
<option value='<?php echo $result['id_participant_type'] ?>' s><?php echo $result['name'] ?></option>
<?php } ?>
</select>
</div>
</div>
</form>
I have few different fields like email and password but this dropdown validation is not working when calling it by id please help me out from this.

Actually i am fetching values in botoom feilds but i am getting it by doing this
<option value="0" >- Select -</option>

How to grey out part of a form? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am creating a site where students can see statistics about professors.
Here is the code of the form
<?php
$pageName = "statisitcsForm.php";
$pageTitle = "Statistics Form";
include("../inc/config.php");
require(SITE_ROOT . "inc/db.php");
include(SITE_ROOT . "inc/header.php");
try {
$results = $db->query("
SELECT *
FROM professors
ORDER BY professorLastName");
$results2 = $db->query("
SELECT *
FROM majors
ORDER BY majorID");
} catch (Exception $e) {
echo "Data could not be retrieved from the database.";
exit;
}
$professors = $results->fetchAll(PDO::FETCH_ASSOC);
$majors = $results2->fetchAll(PDO::FETCH_ASSOC);
?>
<div id="statisticsFormBody">
<form action="../php/statistics.php" method="post">
<div class="form-div">
<h3><label for="major"> First Select Major: </label> <br></h3>
<select class="form-input" id="major" name="major">
<?php
foreach ($majors as $major) { ?>
<option value="<?php echo $major['majorID']; ?>"> <?php echo $major['majorName'] ?> </option>
<?php
} ?>
?>
</select>
</div>
<div class="form-div">
<h3><label for="prof"> Then Select Professor: </label> <br></h3>
<select class="form-input" id="prof" name="prof">
<?php
foreach ($professors as $prof) { ?>
<option
value="<?php echo $prof['professorID']; ?>"> <?php echo $prof['professorLastName'] . ' ' . $prof['professorFirstName'] ?> </option>
<?php
} ?>
?>
</select>
</div>
<div class="form-div">
<input type="submit" class="form-btn" id="Go" name="Go" value="Go">
<button type="reset" class="form-btn"> Clear</button>
</div>
</form>
</div>
<?php include SITE_ROOT . "inc/footer.php"; ?>
How do I get the second select to show only professors from the majorID that the user chooses in the first select?
professor.majorID references majors.majorID in database.
Perhaps a solution using jquery (AJAX)?

Thanks for improving your question. One approach you could take is to add a class to each professor option which indicates which majorID it's associated with like this:
<div class="form-div">
<h3><label for="prof"> Then Select Professor: </label> <br></h3>
<select class="form-input" id="prof" name="prof">
<?php foreach ($professors as $prof) { ?>
<option class="major-<?php echo $prof['majorID']; ?>" value="<?php echo $prof['professorID']; ?>"> <?php echo $prof['professorLastName'] . ' ' . $prof['professorFirstName'] ?> </option>
<?php } ?>
</select>
</div>
Then use jQuery to bind a javascript change event to the first select and add/remove options as needed:
<script>
$( document ).ready(function() {
profOptions = $("#prof option"); // store all options as a jQuery object
$("#major").trigger("change"); // trigger change on first select
});
$("#major").on("change", function() { // this event will fire anytime first select is changed
var majorID = this.value; // get value of first select
$("#prof option").remove(); // remove all professor options
profOptions.each( function() { // iterate through options
if ($(this).hasClass("major-" + majorID)) { // check if option has matching classname
$("#prof").append($(this)); // append option to second select
}
});
});
</script>

You can do it like this:
Example JsFiddle
<body>
<form>
<select id="major">
<option>Choose Major</option>
<option>Major1</option>
<option>Major2</option>
</select><br/>
<select id="profs" disabled>
<option>Choose Prof</option>
<option>Prof1</option>
<option>Prof2</option>
</select>
</form>
</body>
$('#major').on('change', function(){
if($('#major')[0].selectedIndex != 0){
$('#profs').prop("disabled", false);
} else {
$('#profs').prop("disabled", true);
}});

use ajax methods from jQuery to get list of professors, and set/unset "disabled" attribute of element in callback-function of ajax-query.