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.
Related
I am trying to figure out how I can make my form submit load the results of the desired field into the existing page instead of refreshing, I have this segment.
<form action="post.php" method="post">
<div class="form-group">
<select class="form-control" id="inputState" name="inputState" style="width: 100%">
<option selected>
Choose...
</option>
<option value="account">
The Accounts
</option>
<option value="cape">
The Capes
</option>
</select>
</div><input type="submit">
</form>
The above code works flawlessly other than the fact that it opens a new url, I am wondering how I can load this php on the same page after submitting the form.
print $our_submit = $_POST["inputState"];
I've looked over all the posts related to AJAX but for my example, I've not been able to get anything to work.. thanks in advance for help, still new to this.
try with below code and remove action name like action=""
if(isset($_POST["inputState"])){
$our_submit = $_POST["inputState"];
print_r($our_submit);
}
In form action like action="<?php echo $_SERVER['PHP_SELF'];?>"
if(isset($_POST["inputState"])){
$our_submit = $_POST["inputState"];
print_r($our_submit);
}
Try to submit then you get form data
If you don't want to refresh the page after form submission, you needt to send your date with AJAX.
The simple way is using Jquery
Try this code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="post.php" method="post">
<div class="form-group">
<select class="form-control" id="inputState" name="inputState" style="width: 100%">
<option selected>
Choose...
</option>
<option value="account">
The Accounts
</option>
<option value="cape">
The Capes
</option>
</select>
</div>
<input type="submit" class="send-data">
</form>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function() {
$('.send-data').click(function(e) {
e.preventDefault();
var url = $('form').attr('action');
var data = {
'inputState' : $('#inputState').val()
};
if (data.inputState != '') {
$.post(url, data, function(Response) {
// Work if your response here
console.log(Response);
});
}
});
});
</script>
</body>
</html>
PHP Code
<?php
if (isset($_POST['inputState']) && !empty($_POST['inputState'])) {
echo $_POST['inputState'];
return true;
}
echo 'Please Choose a state ...';
?>
I have two dropdowns with the data in the second dropdown dependent on what is selected in the first dropdown. I'm using Ajax/JQuery and it works fine if I comment out the include file that has my site template code for the sidebar of every page on my site. With that include file in the code though, it doesn't work. Instead of populating the second dropdown, it has an empty list. When I inspect the element using the browser's development tools, the code from the the head tag is being replicated there instead of the code populating the list options. So I guess my question is if there is some potential conflict between HTML, PHP, and Ajax/JQuery? I should also note that even if I place all the HTML in the file instead of calling the include library for the sidbar, it still behaves in the same manner.
Here is the ajax2.js...
$(document).ready(function() {
$("#country").change(function() {
var country_id = $(this).val();
if(country_id != "") { $.ajax({
type:"POST",
url:"sample.php",
data:{c_id:country_id},
success:function(response) {
var resp = $.trim(response);
$("#state").html(resp);
}
});
} else {
$("#state").html("<option value=''>------- Select --------</option>");
}
});
});
Here is the Ajax/JQuery source files from the head tag...
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ajax2.js"></script>
And finally, here is the HTML with the code for the two dropdowns (sample.php)...
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<title>Sample</title>
<link href="../../sample.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ajax2.js"></script>
</head>
<body>
<?php include("../includes/sidebar.php"); ?><?php
//MySql DB Info
include("../includes/db_connect7.php");
if (isset($_POST['c_id'])) {
$title = mysql_real_escape_string($_POST['c_id']);
echo "title = $title";
$sql = "select * from TW_Picks where title='$title'";
$res = mysql_query($sql);
if(mysql_num_rows($res) > 0) {
echo "<option value=''>------- Select --------</option>";
while($row = mysql_fetch_assoc($res)) {
echo "<option value=\"$row[name]\">$row[pick]</option>";
}
}
} else {
?>
<div align="center">
<font face="Verdana, Arial, Helvetica, sans-serif" size="5"><strong>SAMPLE</strong></font> </div>
<p> </p>
<center>
<form action="<?php echo $PHP_SELF ?>" method="post">
<br><br>
<select name="country" id="country">
<option>Select Fed</option>
<option value="USA">USA</option>
<option value="CAN">CAN</option>
<option value="MEX">MEX</option>
</select>
<br><br>
<select name="state" id="state">
<option>Select Title</option>
</select>
<br><br> <br><br><br>
<input name="addnew" type="submit" value="Add New">
<br><br>
</form>
</center>
<?php
} ?>
<br><br><br><br><br><br><br>
<p> </p>
</body>
</html>
The sample.php file also includes the header file. When you fetch sample.php using jQuery, it send back the header code as well. Make your your sample.php file only returns required HTML.
if (isset($_POST['c_id'])) {
// what you are doing here should work okay
} else {
// Put the includes here
include("../includes/sidebar.php");
}
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 want to get a form input value from a php file to a javascript one, like this:
PHP file:
<html>
<head>
<meta charset = "UTF-8">
<title> Search Customer by Field </title>
<script type="text/javascript" src="../lib/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../src/search-by-invoice-no.js"></script>
<table id="results" border="1"></table>
</head>
<body>
<?php
if( isset($_GET["invoiceNo"]) && "" != $_GET["invoiceNo"])
{
}
else
{
?>
<form id = "form1">
Invoice Number <input id="invoice" name="invoiceNo" type="text" value="<?=isset($_GET['invoiceNo'])? $_GET['invoiceNo'] :""?>">
<br/>
<input id="submit_btn" type="submit">
</form>
<?php
}
?>
</body>
</html>
JS file:
$(document).ready(function() {
var invoiceNo = $('#invoice').val(); //Returns undefined
alert(invoiceNo);
//etc...
Why this behaviour? I tried saveral other methods but all of them failed.
Your if/else structure makes no sense. If $_GET['invoiceNo'] exists and isn't empty, then you do your if logic, so the form is never created. But then, in your form, you check to see if $_GET['invoiceNo'] exists. It never will, except if it's empty, so what's the point of using it there?
You have a couple errors: inverted if/else is the reason you are not getting a value and among other things you are missing a parenthesis on your php output inside the input and input elements should end with />
<html>
<head>
<meta charset = "UTF-8">
<title> Search Customer by Field </title>
<script type="text/javascript" src="../lib/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../src/search-by-invoice-no.js"></script>
</head>
<body>
<?php
if( isset($_GET["invoiceNo"]) && "" != $_GET["invoiceNo"])
{ ?>
<form id = "form1" action='mypage.php' method='GET'>
Invoice Number <input id="invoice" name="invoiceNo" type="text" value="<?php echo (isset($_GET['invoiceNo']))? $_GET['invoiceNo'] :""; ?>" />
<br/>
<input id="submit_btn" type="submit" />
</form>
<?php
}
else
{
?>
<p>No value received</p>
<input id="invoice" name="invoiceNo" type="hidden" value="0" />
<?php
}
?>
</body>
</html>
Also, you don't even need to check if it is set as you already do, so something like
Invoice Number <input id="invoice" name="invoiceNo" type="text" value="<?php echo $_GET['invoiceNo']; ?>" />
Will work fine too
EDIT
<html>
<head>
<meta charset = "UTF-8">
<title> Search Customer by Field </title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(document).ready(function(){
var invoice = $('#invoice').val();
if(invoice == 0)
{
alert('No value was passed');
}
else
{
alert(invoice);
}
});
</script>
</head>
<body>
<?php
if( isset($_GET["invoiceNo"]) && "" != $_GET["invoiceNo"])
{ ?>
<form id = "form1" action='mypage.php' method='GET'>
Invoice Number <input id="invoice" name="invoiceNo" type="text" value="<?php echo $_GET['invoiceNo']; ?>" />
<br/>
<input id="submit_btn" type="submit" />
</form>
<?php
}
else
{
?>
<p>No value received</p>
<input id="invoice" name="invoiceNo" type="hidden" value="0" />
<?php
}
?>
</body>
</html>