We Keep Coding

Using Jquery to change form based on user input

I have a form with a select tag. I need my form to change based on the selection from the user. I am given to believe that the easiest way to do this is to use JQuery.
Here is my code:
<div class="form-group">
<label for="category" >Category</label>
<select id="category" name="category" class="form-control">
<option value="0" >Select Category</option>
<?php
$sql_cat= "SELECT * FROM category";
$result = mysqli_query($conn,$sql_cat);
$cat_items="";
if($result) {
while($cats = $result->fetch_assoc()) {
echo '<option value="'.$cats['id'].'" >'.$cats['cat_name'].'</option>';
}
} else {
echo '';
}
?>
</select>
</div>
<div id="addhtml"></div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#category").change(function() {
alert("event triggered");
var val = $(this).val();
if (val == "number" || val == "symbol") {
$("#addhtml").html(<?php include("html/form_number.html"); ?>);
} else if (val == "letter") {
$("#addhtml").html(<?php include("html/form_letter.html"); ?>);
} else {
$("#addhtml").html(<?php include("html/form_other.html"); ?>);
}
});
});
</script>
Note: the php while statement just sets up the current three options of "number", "symbol" or "letter" with ids of 1,2 and 3 respectively
When I change the category, it does not trigger the jquery.change()
I would like to code the form without using the addhtml div but am willing to use it if necessary.
Questions:
Is the reason the change function is not being triggered because I am using php to set the values of the select options?
If so how can I resolve?
If not, why isn't it being triggered?
How can I accomplish my goal of not using the addhtml div?
Is there a better way to accomplish what I am going for?
Thanks in advance.
EDIT:
Answers to initial questions: As stated by bistoco, php is pre compiled by the server and sent in as html so the issue is not from using php to set the values of the select tag.
I have now determined that it is due to the content of my php include files. I have determined that it registers the change event and loads the content just fine if my file is simple like this:
"<div><label>New Number</label></div>"
but if I add any white space or \n characters for human readability like this:
"<div>
<label>New Number</label>
</div>"
Not only does it not work, but it also completely skips the change event.
New Questions: Does the jquery html function have a list of illegal characters that would cause it to fail? Why is it not even registering the change function when it doesn't like the contents of my php include file?

First thing that you must understand is that php runs on the server, all the output is rendered and sent as html code to the browser, and is not available there.
That said, you have at least 2 options :
1.- echo all form options, each one inside a div, that you can hide/show based on the selected choice.
<div class="form-group">
<label for="category" >Category</label>
<select id="category" name="category" class="form-control">
<option value="0" >Select Category</option>
<?php
$sql_cat= "SELECT * FROM category";
$result = mysqli_query($conn,$sql_cat);
$cat_items="";
if($result) {
while($cats = $result->fetch_assoc()) {
echo '<option value="'.$cats['id'].'" >'.$cats['cat_name'].'</option>';
}
} else {
echo '';
}
?>
</select>
<!-- ECHOING ALL FORM OPTIONS -->
<div class="option-form" id="form-option-symbol"><?php include("html/form_number.html"); ?></div>
<div class="option-form" id="form-option-letter"><?php include("html/form_letter.html"); ?></div>
<div class="option-form" id="form-option-other"><?php include("html/form_other.html"); ?></div>
</div>
<style>
div.option-form {
display:none; /* HIDE ALL DIVS BY DEFAULT */
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#category").change(function() {
// HIDE ALL DIVS
$('div.option-form').hide();
var val = $(this).val();
if (val == "number" || val == "symbol") {
$('form-option-symbol').show();
} else if (val == "letter") {
$('form-option-letter').show();
} else {
$('form-option-other').show();
}
});
});
</script>
2.- Using a template system or load partial html pieces with ajax.

PHP Is a pre-processor so adding later into the website is useless. Just create your form with either setting its html or by using .prepend() or .append() with your form elements.
<form class="myform">
</form>
and in jquery
$('.myform').html('<input type="submit">');
or
$('.myform').append('<input type="submit"');
EDIT :
Read your code wrong looked up
<?php include('test.html'); ?>
don't think that would work.

Instead of
$("#addhtml").html(<?php include("html/form_number.html"); ?>);
and such, try
$("#addhtml").html("<?php include("html/form_number.html"); ?>");
so that the html will be treated as a string.
Also make sure the form files don't have tags such as html, head, and body, and only contain the actual form.
EDIT: I just saw that #nnnnnn already stated this, gotta give credit where credit is due

I think you might just need to change your variable "val" declaration to get your code to work.
I don't think
var val = $(this).val();
will work. Based on the comparison you are making, I believe it should be:
var val = $(this).children("option:selected").text();
which will allow you to get the text value of the select element's selected option.

Using JQuery for refreshing page but not getting desire results

I am using Jquery for refreshing page i it is refreshing but when i select one option from my category it is refreshing and then my selected category be disappear but i want when i select any one option the page will be refresh but my selected option will also be the same which i selected hope you guys will understand my problem.
$(function() { $('select[name="cat"]').change(function() { location.href = 'insert_book.php?cat=' + $(this).find('option:selected').val(); }); });
<select id="rf" name="cat">
<option value='null'>Select your Desire</option>
<?php
include('includes/db.php');
$c_query="select * from categories";
$c_run=(mysql_query($c_query));
while($c_row=mysql_fetch_array($c_run)){
$c_id=$c_row['p_id'];
$c_title=$c_row['p_title'];
echo "<option value='$c_id'>$c_title</option>";
}
?>
</select>

Change your refresh code to this:
$(function() {
$('select[name="cat"]').change(function(ev) {
location.href = 'insert_book.php?cat=' + $(ev.currentTarget).val();
});
});
Also move this JS code after the HTML code for the select element or wrap it with $(document).ready() like this:
$(document).ready(function(){
$('select[name="cat"]').change(function(ev) {
location.href = 'insert_book.php?cat=' + $(ev.currentTarget).val();
});
});
Now in the loop code:
$selectedCategory = array_key_exists('cat', $_GET) ? $_GET['cat'] : 0;
while($c_row=mysql_fetch_array($c_run)){
$c_id=$c_row['p_id'];
$c_title=$c_row['p_title'];
echo "<option value='$c_id'".($selectedCategory == $c_id ? " selected='selected'" :"").">$c_title</option>";
}
Finally:
As Chris Baker mentioned stop using mysql_ and use mysqli_ or PDO.

option onChange on currentpage using database information

I've written a query that takes the usernames from the database and puts them in s like this:
<?php
$username_set = get_all_usernames();
while ($username = mysql_fetch_array($username_set)){
echo "<option>" . $username['username'] . "" . "</option>";
}
?>
That works fine but now I want to add a onchange function to my tags. I've done it like this:
<select name="user_result" onChange="top.location.href = this.form.user_result.options[this.form.user_result.selectedIndex].value,'_self';">
That works fine too, it is redirecting to the selected option. But I want to select a option and stay at the same page and display the (coming) information that username contains. But for now printing the username below the would be good enough.

If you want to execute code on change of a select, it's easy to include this in a javascript function. Not sure if you want the javascript or the jquery solution, so I'll include them both.
Plain javascript:
function show_user(data) {
var el = document.getElementById("show_username").innerHTML = data;
}
jQuery solution:
function show_user(data) {
$("#show_username").html(data);
}
Then you call this function on the select change:
<select name="user_result" onchange="show_user(this.options[this.selectedIndex].value);">
<option>--select a user--</option>
<option>username</option>
<option>username 2</option>
</select>
<div id="show_username">this will update to the selected user name</div>
jsfiddle for plain javascript: http://jsfiddle.net/CwFs5/
jsfiddle for jquery: http://jsfiddle.net/5PuX3/

How to show dropdown selected data in textbox

I want to show the drop down selected value in textbox.
This is my design.
This is my php code for drop downlist...
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("storedb", $con);
$s=mysql_query("select * from dealerdetail order by Dealer asc ");
?>
Select Dealer Name:
<select name="dealer" id="dealer">
<option value="">---- select Dealer -----</option>
<?php
while($dd=mysql_fetch_array($s))
{
?>
<option value="<?php echo $dd['D_id'] ?>"><?php echo $dd['Dealer'] ?></option>
<?php
}
?>
</select>
Please help.

I think you are looking for
$('#dealer').val(); //return selected value
$( "#dealer option:selected" ).text() // return selected options text

Use the change event and text property of select box to access the value
$('#dealer').change(function () {
$("#idOfTextBox").val($("#dealer option:selected").text());
});

use jquery:
Live demo : http://jsfiddle.net/t6YHK/25/
$('#dealer').change(function () {
$("#your_input_id").val($(this).val());
});

Use this:
$("#dealer").change(function(){
$("textarea").val( $(this).val() );
});

AngularJS
http://angularjs.org/
Scroll down to below the black area.

Seems like you're taking your first steps in web development, and for this, i strictly recommend that you stop using DreamWeaver to learn more about the code and how things go.
Each element in your web page is in the DOM (see HTML Document Object Model). So using native javascript all of your elements using :
document.getElementById("elementId")
And this is ALL what you need. All other solutions using frameworks will use this line of code whether you see this or not.
so for your specific question we will create a javascript function to be used in the event of value change of your dropdown list (assuming your text field's id is myText)
function updateMyText()
{
var dd = document.getElementById("myDropDown");
var ddtext = dd.options[dd.selectedIndex].text;
document.getElementById("myText").value = ddtext;
}
to call it when a dropdown list item is selected you need the attribute onchange
<select name="dealer" id="dealer" onchange='updateMyText()'>

Filter one HTML select dropdown based on another select dropdown

I have a simple PHP script with a form that has two select fields, both of which are simply numerical values. The script also has a maximum for the sum of the two fields. I'm trying to dynamically filter the second drop down, so that a user cannot select more than the maximum. E.g., if my maximum is 10, the first select dropdown would have 1-10 in it. A user selecting 6 would then only be able to select 0-4 in the second select dropdown.
I know this should be reasonably straightforward, but I'm a total JavaScript/jQuery novice. I have searched SO and Google, but I don't understand enough of the examples I've seen to know where to start, let alone figure out how to customise them to my needs. I've provided the code I have already, which clearly doesn't have any of the filtering I need.
Some sample code (assume $maximum defined already):
<script type="text/javascript">
var max = <?php echo $maximum; ?>;
</script>
<select name="dropdown1" id="dropdown1">
<?php
for ($i = 1; $i <= $maximum; $i++)
{
echo '<option value="'.$i.'">'.$i.'</option>';
}
?>
</select>
<select name="dropdown2" id="dropdown2">
<?php
for ($i = 0; $i <= $maximum; $i++)
{
echo '<option value="'.$i.'">'.$i.'</option>';
}
?>
</select>
Thanks in advance.
I now have the following piece of jquery in it's own .js file:
$(document).ready(function() {
// var max ??
$("#dropdown1").change(function() {
var selectedVal = $(this).find("option:selected").val();
$("#dropdown2 option").removeAttr("disabled").removeAttr("selected");
$("#dropdown2 option").each(function() {
if($(this).val() > max - selectedVal*1)
$(this).attr("disabled", "disabled");
});
});
});
However, I'm a bit stuck getting $maximum from my PHP script into the jQuery. I figure I have to create a JavaScript variable, but not quite sure how to pass it to the jQuery. I can figure out how to do it if I had the jQuery embedded in the same PHP script, just by echoing it out, but not quite so sure about passing it as a parameter.

Here is a working fiddle. And, the relevant jQuery code:
$(document).ready(function() {
$("#select1").change(function() {
var selectedVal = $(this).find("option:selected").val();
$("#select2 option").each(function() {
if($(this).val() >= selectedVal)
$(this).attr("disabled", "disabled");
});
});
});

I update code of legendofawesomeness for your case