I have some code which works perfectly in Firefox, but not in IE. The desired solution is that after a user selects a radio button, a dropdown would show up containing options related to the radio button category. However, currently when using IE, when a user selects a radio button it will show the drop down but would have all the options including the ones related to the radio button that is not selected
here is the code:
<!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>Tools</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.chained.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="infratool.js"></script>
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div id="header" style="background-color:#7BD12E">
<h1 align="Center" style="color:#FFF;"></h1>
<!-- end #header --></div>
<form id="form1" name="form1" method="post" action="">
<table width="392" border="0">
<tr>
<td align="center">
<label><input name="Radio1" type="radio" id="Radio1" value="Radio1" onclick="showSelect();" />Radio1</label>
<label><input name="Radio2" type="radio" id="Radio2" value="Radio2" onclick="showSelect();" />Radio2</label>
<input type="radio" name="Radio3" id="Radio3" value="Hidden" style="display:none" checked="checked" />
</td>
</tr>
<tr>
<td align="center"> </td>
</tr>
</form>
<div id="div-id" align="center"><select name="Category" id="Category" class="hide">
<option value=" Radio1 Radio2" selected="selected">--</option>
<option value="1 Radio1">1</option>
<option value="2 Radio1">2</option>
<option value="3 Radio1">3</option>
<option value="4 Radio2">4</option>
<option value="5 Radio2">5</option>
<option value="6 Radio2">6Domain</option>
</select><input type="submit" value="Go" id="submit"/>
</div>
</table>
</div>
</body>
</html>
while here are my java scripts
//Show Select option after clicking Radio button:
function showSelect() {
var select = document.getElementById('Category');
select.className = 'show';
}
//Select option, separates the link from Class
$(function(){
var select = $('#Category'),
options = select.find('option');
$('[type="radio"]').click(function(){
var visibleItems = options.filter('[value*="' + $(this).val() + '"]').show();
options.not(visibleItems).hide();
if(visibleItems.length > 0)
{
select.val(visibleItems.eq(0).val());
}
});
});
$(function() {
$("#submit").hide();
$("#Category").change(function() {
window.location = $(this).val().split(" ")[0];
if(loc)
window.location.href = loc;
})
});
I've tried to use the IE developer tools, but to no avail.
You can't just show/hide <option> elements. You have to actually remove them from the drop-down.
Personally I would suggest cloning the select box when the page loads, and then using that as a base to repopulate the re-filter the original dropdown.
IE will not just let you hide options.
Perhaps you could instead disable the option using:
.prop('disabled', true);
Related
i try to submit some basic data to a PHP script via GET.
Two of my 5 values are populated by a JqueryUI datepicker.
When I check those two input-fields via alert, they show up correctly, however they don't get passed to the PHP script on submit.
Code: JSFiddle
index.php - Note: the addHourOptions() php functions just add some select <option>-fields, nothing fancy.
<?php
include('inc/functions.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Filter</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript" src="js/main.js"></script>
<!--<script language="javascript" type="text/javascript" src="ajax/ajax.js"></script>-->
</head>
<body>
<form id="filter" action="filter.php" method="GET">
<label for="date-from">
from Date: <input id="date-from" type="text" />
</label>
<label for="date-to">
to Date: <input id="date-to" type="text" />
</label>
<label for="time-from">from Time:
<select id="time-from" name="time-from" size="1">
<?php addHourOptions(); ?>
</select>
</label>
<label for="time-to">to Time:
<select id="time-to" name="time-to" size="1">
<?php addHourOptions(); ?>
</select>
</label>
<label for="corps">Corporation:
<select id="corps" name="corps" size="1">
<option value="98256608">Scroll Lock.</option>
<option value="955058602">German Angels</option>
<option value="98323502">Rat der 66er</option>
<option value="98183461">Girl Friends Please Ignore</option>
<option value="98371266">Know your Role</option>
</select>
</label>
<button type="submit" id="filterButton">Filter</button>
<button type="button" id="debug">Debug</button>
</form>
</body>
</html>
main.js
//initialize datepicker: yy-mm-dd / yesterday
$(function(){
$.datepicker.setDefaults(
$.extend($.datepicker.regional[''])
);
$('#date-from').datepicker({dateFormat: 'yy-mm-dd'}).datepicker("setDate", -1);
$('#date-to').datepicker({dateFormat: 'yy-mm-dd'}).datepicker("setDate", "TODAY");
});
// set defaults for time timespan-dropdowns
$(function() {
$('#time-from option[value="19:00"]').attr("selected",true);
$('#time-to option[value="23:59"]').attr("selected",true);
});
$('#debug').click( function() {
alert($('#date-from').val() + " " + $('#date-to').val());
}
filter.php - only displays _GET variables for now, no logic
<?php
foreach($_GET as $key => $param){
echo $key . " => " . $param . "<br />";
}
?>
So there should be 5 lines in the output of filter.php,
one for each form-value. But there are only 3.
Example Output:
time-from => 19:00
time-to => 23:59
corps => 98256608
Can someone please tell me why the two input-fields that contain
my dates just don't get submitted with the rest of the form?
Thanks in Advance
EDIT: I used the search here, and read many questions and answers about it, but nothing seemed to work for me.
<label for="date-from">
from Date: <input id="date-from" type="text" name="date-form" />
</label>
<label for="date-to">
to Date: <input id="date-to" type="text" name="date-to" />
</label>
Create name attribute for them and I think your problem is solved.
I am trying to get the selected drop down printerType to alert user when the printer type value is not selected but only when the user selects request the printertype box shows up. The issue I have is that it doesn't alert the user that it is not filled. The others work fine. I hope this is understanding may be little confusing. the JavaScript code is at the bottom.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Systems Request</title>
<!--bootstrap-->
<link href="Assets/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="../Assets/javascript/html5shiv.min.js"></script>
<script src="../Assets/javascript/respond.min.js"></script>
<![endif]-->
<!--custom css-->
<link rel="stylesheet" type="text/css" media="all" href="Assets/css/style.css">
<link rel="stylesheet" type="text/css" media="all" href="Assets/css/responsive.css">
<script src="Assets/Javascript/jquery-1.11.1.min.js" type=
"text/javascript"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="Assets/javascript/bootstrap.js"></script>
<script src="Assets/Javascript/textboxname_autocomplete.js" type=
"text/javascript"></script>
<style type="text/css">
.dropdown{
width: 292px;
height: 45px;
font-size: 16px;
margin-left: 30px;
margin-bottom: 10px;
background-color: pink;
}
</style>
</head>
<body style="background-image: url('../Systems/Assets/images/background.jpg')">
<?php include("includes/createHeader.php");?>
<section id="container">
<h2>Systems Request</h2>
<form name="systems" id="systems-form" action="Pages/InsertProcess.php" method="post"onsubmit="return formCheck(this);">
<div id="wrapping" class="clearfix">
<section id="aligned">
<label class="label">LanID</label><br><br>
<input type="text" name="lanId" id="lanId" autocomplete="off" tabindex="1" class="txtinput" >
<label class="label">Employee Name</label><br><br>
<input type="text" name="name" id="name" autocomplete="off" tabindex="1" class="txtinput">
<!--manager access db list info located in the includes folder-->
<label class="label">Manager</label><br><br>
<?php include("includes/accessDB_ManagerData.php");?>
<!--department dropdownlist located in the includes folder-->
<label class="label">Department</label><br><br>
<?php include("includes/departmentDropdownList.php");?>
<!--Request Issue list info located in the includes folder-->
<label class="label">Request Issue</label><br><br>
<!-- #start of Request Issues-->
*<select name ="request" id="request" onchange="if (this.selectedIndex==3){this.form['printerType'].style.visibility='visible'}else {this.form['printerType'].style.visibility='hidden'};">
<option value =""><?php echo ' Select Request Issue...'?></option>
<option value ="RESET CASE"><?php echo ' Reset Case'?></option>
<option value ="RESET WM PASSWORD"><?php echo " RESET WM PASSWORD"?></option>
<option value ="REPLACE TONER"><?php echo " REPLACE TONER"?></option>
<option value ="FIX PRINTER"><?php echo " FIX PRINTER"?></option>
<option value ="FIX DEVICES"><?php echo " FIX DEVICE"?></option>
<option value ="SAFETY HIGH REQUEST"><?php echo " SAFETY HIGH REQUEST"?></option>
<option value ="OTHER"><?php echo " OTHER"?></option>
</select><br>
<!-- #end of Request Issues-->*
***<select class="dropdown" style="visibility:hidden;" name="printerType" id="printerType" >
<option Value="">Please select Printer Type</option>
<option Value="FS 4200DN">Kyocera FS4200DN</option>
<option Value="FS 3040MFP">Kyocera FS3040MFP</option>
<option Value="Kyocera ">Kyocera FS1370DN </option>
<option Value="OKI MPS710C">OKI MPS710C</option>
<option Value="OKI MPS711C">OKI MPS711C</option>
<option Value="Sharp MX450N">Sharp MX450N</option>
</select>***
<br/>
<label class="label">Request Description </label><br><br>
<textarea name="request_comments" id="message" placeholder="Enter Description of Issue" tabindex="5" class="txtblock"></textarea>
<input type="submit" name="submit" id="submitbtn" class="btn btn-primary btn" tabindex="7" value="Submit">
<br style="clear:both;">
<?php #Hidden inputs for Status, tech comments, tech completed, tech completed date?>
<input name="status" type="hidden" value="RECEIVED">
<input name="comments" type="hidden" value="No Comment ">
<input name="compUser" type="hidden" value="Unassigned">
<input name="compDt" type="hidden" value="Not Completed">
</section>
</section>
</div>
</form>
</section>
<?php include("includes/footer.php");?>
<script src="Assets/Javascript/gen_validatorv4.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
var frmvalidator = new Validator("systems");
if (document.getElementById('request').selectedIndex==3){
frmvalidator.addValidation("printerType","req","Please enter Printer Type");
}
else{
frmvalidator.addValidation("lanId","req","Please enter LanID");
frmvalidator.addValidation("request_comments","req","Please enter request comments");
}
</script>
</body>
</html>
I had to change a few things like getElementbByName to getElementById. also added a function called updateValidation to add to the onchange part of the selected box and added frmvalidator.clearAllValidations();to the function along with added the two other textboxes lanId and request_comments to the if statement.
<select name ="request" id="request" onchange=" if (this.selectedIndex==3){this.form.printerType.style.visibility='visible'} else {this.form.printerType.style.visibility='hidden'};updateValidation()">
<script type="text/javascript">
function updateValidation (){
frmvalidator.clearAllValidations();
if (document.getElementById('request').selectedIndex==3){
frmvalidator.addValidation("lanId","req","Please enter LanID");
frmvalidator.addValidation("printerType","req","Please enter Printer Type");
frmvalidator.addValidation("request_comments","req","Please enter request comments");
}
else{
frmvalidator.addValidation("lanId","req","Please enter LanID");
frmvalidator.addValidation("request_comments","req","Please enter request comments");
}
}
</script>
As the title suggests I'm trying to show the results of a query and it works properly, but it shows the results automatically beneath the search button, when it should wait for the button to be pressed and then reload the page and show the results. I'm kind of sure that it's a problem with the code but I cannot find where. I know it's a stupid question but all help is appreciated.
Here is my code:
<?php
mysql_connect('localhost', 'root', 'Passw0rd') or die(mysql_error());
mysql_select_db("cvtool") or die(mysql_error());
include("include/session.php");
$username = $_SESSION['username'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!--The viewport tag is used in order to scale the page properly inside any screen size -->
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>CV Tool</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/main.css"/>
<!--Import JQuery from stored file -->
<script src="js/jquery-1.11.1.min.js"></script>
<!--Import JQuery from Google's Content Delivery Network -->
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">-->
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript" src="js/backToTop.js"></script>
</head>
<body>
<!--Big wrapper contains the whole site (header,navigation menu,....,footer-->
<div id="big_wrapper">
<header id="top_header">
<img src="images/cvlogo.png">
</header>
<br>
<nav class="clearfix">
<ul class="clearfix">
<li>Home</li>
<?php
/**
* User has already logged in, so display relavent links, including
* a link to the admin center if the user is an administrator.
*/
if($session->logged_in){
echo "<li>Search</li>"
."<li>My CV(s)</li>"
."<li>My Account</li>"
;
echo "<li>Logout</li>";
}
else
?>
</ul>
Menu
</nav>
<section id="main_section">
<?php
/**
* User not logged in, display the login form.
* If user has already tried to login, but errors were
* found, display the total number of errors.
* If errors occurred, they will be displayed.
*/
if($form->num_errors > 0){
echo "<font size=\"2\" color=\"#ff0000\">".$form->num_errors." error(s) found</font>";
}
?>
<form action="search.php" method="GET" >
<h1>Search for an CV</h1>
<h3>Department</h3>
<br/>
<select id="dropDown">
<option value="">Choose a department</option>
<option value="Comp">Computer Science</option>
<option value="Bus">Business Studies</option>
<option value="Psy" >Psychology</option>
<option value="Eng">English Studies</option>
</select>
<br/>
<h3>Skills</h3>
<br/>
<div id="Comp"class="drop-down-show-hide">
<input type="checkbox" name="whatever" />
Java
<input type="checkbox" name="whatever" />
AI
<input type="checkbox" name="whatever" />
Web Development
</div>
<div id="Bus"class="drop-down-show-hide">
<input type="checkbox" name="whatever" />
Business 1
<input type="checkbox" name="whatever" />
Business 2
<input type="checkbox" name="whatever" />
Business 3
</div>
<div id="Psy"class="drop-down-show-hide">
<input type="checkbox" name="whatever" />
Psychology 1
<input type="checkbox" name="whatever" />
Psychology 2
<input type="checkbox" name="whatever" />
Psychology 3
</div>
<div id="Eng"class="drop-down-show-hide">
<input type="checkbox" name="whatever" />
English Studies 1
<input type="checkbox" name="whatever" />
English Studies 2
<input type="checkbox" name="whatever" />
English Studies 3
</div>
<script>
$(document).ready();
$('.drop-down-show-hide').hide();
$('#dropDown').change(function () {
$(this).find("option").each(function () {
$('#' + this.value).hide();
});
$('#' + this.value).show();
});
</script>
</form>
<form action="search_result.php">
<input type="submit" name="search" id="search" value="Search" />
<div id="search"></div>
<script>
$(document).ready(function(){
$("#dropDown").change(function(){
var data = $(this).val();
$.ajax({
type:'POST',
data:'search_value='+data,
url:'search_result.php',
success:function(data){
$("#search").html(data);
}
});
});
});
</script>
</form>
</section>
<footer id="the_footer">
City CV Tool 2014
</footer>
</div>
</body>
</html>
it's because of this line
$("#dropDown").change(function(){
add a submit button in the form if that's what you want then run the function off that
<input type="submit" value="Submit" />
Edited after rwacarter's correct comments below about accessability
Add an Id to the form tag
<form id="searchformSubmit"
then do
$("#searchformSubmit").on('submit',function(){
this should also work if the user presses the enter key to submit rather then the button provided you have only the one form on the page
The reason why the page is reloading is because any <button> or or <input type='submit'> inside a HTML form will reload the page, unless you have onClick='return false;' on them. I think you need to add:
onClick="startsearch();return false;"
on the submit button. You'll also have to send the form data with it. To do this, make a variable with this:
var form_data = $('#form').serialize();
and send it with:
$.post('search_result.php', {form: form_data}, function(data) {$("#search").html(data);})
Your ajax call (result search) is called when your dropdown change (click, user input, ...), but you should bind the action to your form click
$(document).ready(function(){
$("#search").click(function(){
var data = $("#dropDown").val();
$.ajax({
type:'POST',
data:'search_value='+data,
url:'search_result.php',
success:function(data){
$("#search").html(data);
}
});
});
});
In addition, this is not necessary to specify the action in your form however it will trigger the form action and redirect you to the page search_result.php, I suggest you to update it and set action="#"
I am trying to post the value of a form to php using ajax, I would like to stay on the current page when the form is submitted.
I have tried various methods but am unsure what to do next.
Curently when i click one of the radio values the data gets submitted but the page changes to the php script.
<!doctype html>
<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'>
</script>
<meta charset="utf-8">
<title>TEST</title>
</head>
<body>
<h1>Scores Page</h1>
<form action="updatescore.php" method="post">
<form>
<input type="radio" name="newScore" value="1" >1
<br>
<input type="radio" name="newScore" value="2" >2
<br>
<input type="radio" name="newScore" value="3" >3
<br>
<input type="radio" name="newScore" value="4" >4
<br>
<input type="radio" name="newScore" value="5" >5
<br>
</form>
</body>
<script type='text/javascript'>
$(document).ready(function() {
$('input[name=newScore]').change(function(){
$('form').submit();
});
});
</script>
</html>
$('input[name=newScore]').change(function(){
var xyz = $(this).val();
$.post('updatescore.php', {xyz:xyz}, function(data){
//any operation after submitting data;
});
});
Handle xyz using $_POST['xyz'] in updatescore.php file.
I have the following code:
<!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>
<style type="text/css">
body {background-color:Gray;}
body {text-align:left;}
</style>
<title>My First Project</title>
</head>
<body>
<form>
<table border="1" align="center">
<u><h5>Size</h5></u>
<tr><td><input type="radio" name="size" id="small" />Small</td></tr>
<tr><td><input type="radio" name="size" id="medium" />Medium</td></tr>
<tr><td><input type="radio" name="size" id="large" />Large</td></tr>
</table>
<br />
<script type="text/javascript">
if (document.getElementById('small').checked) {
document.getElementById('total').innerHTML = '$1.00';
}
else {
}
</script>
<div id="total">$0.00</div>
</form>
</body>
</html>
I wanted the script to change the text within div total to $1.00 instead of $0.00 when the radiobutton with id small was checked. However, nothing happens when I select it. What am I missing?
You've to invoke a function on some event -- JS basically runs on events!!
<input type="radio" name="size" id="small" onclick="yourFxn()" />Small</td>
In your script
function yourFxn(){
if (document.getElementById('small').checked) {
document.getElementById('total').innerHTML = '$1.00';
}
else {
}
}
scripts are read sequentially. When your javascript runs, there is no element with id total on the page because it is below the script.
But even if you move the code below, it still won't work because there is no click event atached to the radiobutton. your script only checks if the radiobutton is somehow magically selected on page load and changes the text. for exemple this code will change the text but it requires you to hardcode the checked radiobutton:
<!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>
<style type="text/css">
body {background-color:Gray;}
body {text-align:left;}
</style>
<title>My First Project</title>
</head>
<body>
<form>
<table border="1" align="center">
<u><h5>Size</h5></u>
<tr><td><input type="radio" name="size" id="small" checked="checked" />Small</td></tr>
<tr><td><input type="radio" name="size" id="medium" />Medium</td></tr>
<tr><td><input type="radio" name="size" id="large" />Large</td></tr>
</table>
<br />
<div id="total">$0.00</div>
<script type="text/javascript">
if (document.getElementById('small').checked) {
document.getElementById('total').innerHTML = '$1.00';
}
else {
}
</script>
</form>
</body>
</html>
What I think you really want to do is to attach a "click" EVENT to the radiobutton.
You can read more here:
http://www.w3schools.com/jsref/event_onclick.asp
The reason why you are not getting $1.00 is that - code inside will execute on page load. but what you need is to set the div's value on some event of a radio and NOT ON page load event.
so use your code in some function and call that function on radio button's click event
Here is a working example based on the critical parts of your code: http://jsfiddle.net/9hxDq/
You need to execute your code in response to an event (such as a click, a load event, or in response to an input being clicked)
Some of your markup was invalid (U tag inside of a TABLE)
HTML
<table border="1" align="center">
<tr><td><input type="radio" name="size" id="small" />Small</td></tr>
<tr><td><input type="radio" name="size" id="medium" />Medium</td></tr>
<tr><td><input type="radio" name="size" id="large" />Large</td></tr>
</table>
<input type="button" value="Calculate" onclick="calculate()" />
<div id="total">$0.00</div>
JavaScript
function calculate()
{
if (document.getElementById('small').checked)
{
document.getElementById('total').innerHTML = '$1.00';
}
else
{
alert("not checked!");
}
}
Tie the click event on the radio button to your code via:
var small = document.getElementById('small');
if (small.addEventListener) {
small.addEventListener('click', calc, false);
} else if (small.attachEvent) {
small.attachEvent('onclick', calc);
}
function calc() {
if (document.getElementById('small').checked) document.getElementById('total').innerHTML = '$1.00';
};
jsFiddle example.
The reason it isn't updating is because the script appears in the code before the <div id='total'>. And, more importantly, because the script gets executed immediately when it appears in the page, so it is run before the total element is added to the DOM.
To fix this, you need to either move the script lower in your HTML code, or make the script run only after the page has finished loading. The first of those options is a quick fix to get you up and running; the latter is probably the more recommended option.
To get it to run only after the page has finished loading, wrap it into a function, and use the onload event on the page to trigger it. Alternatively, if you're using JQuery, add it as a $(document).ready() function.