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.
Related
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>
I'm currently using Selectize.js with a 'select' item and multiple options. My html is something like:
<div class="form-group">
<label for="record-genre">Genre(s):</label>
<select name="record_genre" id="record-genre" class="form-control multi-selectize" multiple="multiple" placeholder="Enter genre(s)">
<?php foreach ($record_genre_opts as $key => $val): ?>
<option value="<?php echo $key; ?>" <?php echo (in_array($key, $record_genre)) ? "selected" : ''; ?>
<?php echo set_select('record_genre', $val); ?>
>
<?php echo $val; ?>
</option>
<?php endforeach;?>
</select>
</div>
So far so good. The items are being loaded correctly and until this point everything works great. The issue is that when the form is submitted only the last value selected is the one that is available, so if I selected multiple items I'm getting just one:
["record_genre"]=> string(1) "1"
Here's my JS setup:
$('.multi-selectize').each(function(){
//console.log($(this))
$(this).selectize({})
})
Any suggestions?
Thanks.
My mistake. The name of the select item should be record_genre[] since it is declared as a multiple select instead of just record_genre.
I have added a "how did u reach us" drop down in my onepage checkout.
When I press the Place Order without select any option in the Drop Down I must get the error message "There is a required field".
But now the REQUIRED options are not working as required.
Customers can place order even if there is no selection in the drop down.
I think, When pressing Place Order button it's not checking for the required fields or it's considering the blank options as a value.
This is the code.
<?php
$survey_question_Status = Mage::getStoreConfig('grizzly_ordersocial/social/enable_social',Mage::app()->getStore());
$survey_question = Mage::getStoreConfig('grizzly_ordersocial/social/survey_question',Mage::app()->getStore());
?>
<form action="" class="where-did-you-hear" id="checkout-agreements" onsubmit="return false;">
<?php if($survey_question_Status && isset($survey_question_Status)) { ?>
<div class="buttons-set">
<ul class="form-list">
<li>
<fieldset>
<ul>
<li>
<label class="commentlabel required-entry" for="ordercomment-comment">
<?php echo $survey_question; ?> <em>*</em></label>
<div class="input-box required-entry">
<select class="validate-select" id="socialtype" name="socialtype" title="<?php echo $survey_question ?>">
<option value=""><?php echo $this->__("- Select -");?></option>
<option value="Friend/Relative/Acquaintance"><?php echo $this->__("Friend/Relative/Acquaintance");?></option>
<option value="Google search"><?php echo $this->__("Google search");?></option>
<option value="Gumtree Advert"><?php echo $this->__("Gumtree Advert");?></option>
<option value="Facebook"><?php echo $this->__("Facebook");?></option>
<option value="Other"><?php echo $this->__("Other");?></option>
</select>
</div>
</li>
</ul>
</fieldset>
</li>
</ul>
</div>
</form>
<?php } ?>
I think the Place Order button rules is making the issue.
Plz have a look at the onepage/review/button.phtml
<p class="required"><?php echo $this->__('* Required Fields') ?></p>
<button type="submit" title="<?php echo $this->__('Place Order') ?>" class="button btn-checkout" onclick="review.save();"><span><span><?php echo $this->__('Place Order') ?></span></span></button>
Remove the value="" attribute from the first <option> element
add this script at the end of page and pass form id checkout-agreements and field you want to required add class="required-entry"
<script type="text/javascript">
//< ![CDATA[
var customForm = new VarienForm('checkout-agreements');
//]]>
</script>
Hi can some one help me to my problem.
I have a html and php function here all i want to to is to echoed a select value not the option value
here is my code
Ouput: Patrick or any for the name when I select and send the button
<?php if(isset($_REQUEST['send'])){echo $_POST['test'];}?>
<form method="post">
<select name="test"><option value="1">Patrick</option><option value="2">Maria</option><option value="3">Fe</option></select><input type="submit" name="send" value="submit">
</form>
specify the value in option like this "1_Patrick"
<?php if(isset($_REQUEST['send'])){
$value = explode('_',$_POST['test']);
echo $value[1];
}
?>
<form method="post">
<select name="test"><option value="1_Patrick">Patrick</option><option value="2_Maria">Maria</option><option value="3_Fe">Fe</option></select><input type="submit" name="send" value="submit">
</form>
<?php if(isset($_REQUEST['send'])){echo $_POST['test'];}?>
change the value of your option to you want to display
<form method="post">
<select name="test">
<option value="Patrick">Patrick</option>
<option value="Maria">Maria</option>
<option value="Fe">Fe</option>
</select>
<input type="submit" name="send" value="submit">
</form>
//change the $row['id'] to $row['name']
<?php $q = mysql_query("select * from name");?>
while($row = mysql_fetch_assoc($q)){
echo '<option value='.$row['name'].'>'.$row['name'].'</option>' ;
}
// ok you want to used the id in option value.in your submit code get the name for table check bellow code
<?php if(isset($_REQUEST['send'])){$id=$_POST['test'];
$q = mysql_query("select * from name where id=$id");
$row = mysql_fetch_assoc($q);
echo $row['name'];
}
?>
<?php $q = mysql_query("select * from name");
while($row = mysql_fetch_assoc($q)){
echo '<option value='.$row['id'].'>'.$row['name'].'</option>' ;
}?>
The value of the select will be whatever option is selected. If I select Maria, you will see 2 displayed.
<table cellpadding="3" cellspacing="3" align="center" width="50%">
<tr>
<td>
<select name="user" id="user_id" onChange="selectuser()">
<option value="0">Select User</option>
<option value="1">Patrick</option>
<option value="2">Maria</option>
<option value="3">Fe</option>
</select>
</td>
</tr>
</table>
<script language="javascript">
function selectuser()
{
var name = $("#user_id option:selected").text();
alert(name);
}
when you post any form then data contained in the value attribute of the field will get posted.
So you can change the value data to the desired value, like value="Patrik"
As you said that there is purpose behind adding numeric data to value then my suggestion would be add this numeric data to some other custom attribute like data-customid="1" etc and change value="Patrick"
You can add custom attribute in option value.
Refer this link for details.
pure js:
DEMO
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('select').addEventListener('change', function() {
alert(this.options[this.selectedIndex].innerText);
}, false);
}, false);
I have two dropdown boxes for car makes and models, when a make is selected i need all its models to show in the next box. As of now using the following code the models show up when the dropdown is clicked.
window.onmousedown = function(e){
this.id = e.target.id;
if(this.id == "vehicle_makes"){
var make = document.getElementById("vehicle_makes").value;
ajaxCall(make);
}
}
However i need the javascript to trigger when an option from the dropdown is selected rather than when the drop down is opened.
here also is the html - with some php
<div class="vehicle-search-wrap">
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
<div>
<select id="vehicle_makes" name="s">
<?php
foreach($makes as $make){ //put all makes in dropdown
echo "<option value='". $make ."'>". $make ."</option>";
}
?>
</select>
<select id="model_drop" name="vmodels">
<?php
//nothing to start
?>
</select>
<input type="submit" value="Search Vehicle" />
</div>
</form>
</div>
use the onchange event of selectbox.
here is a demo
Try this:
<select name="Pizza" size="5"
onchange="myFunctionHere()">
<option value="P101">Pizza Napoli</option>
<option value="P102">Pizza Roma</option>
</select>