i have a form that users can fill out and i need the users to be able to generate a pdf with their results using query string
example
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<form id="form">
<select name="test" id="test">
<option id="op1" value="1">1234</option>
<option id="op2" value="2">2134</option>
</select>
</form>
click here
</body>
Thanks!
HTML:
click here
jQuery
$(document).ready(function(){
$('#pdf_a').click(function(){
$(this).attr('href', 'url.pdf?'+$('#form').serialize());
});
});
Example:
http://jsfiddle.net/NeL5X/
This will take the values opt1 and opt2 and put it in the url as opt1=x&opt2=y.
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#my_link").click(function(){
opt1 = $("#opt1").val(); // Stores the value of id-opt1 in the variable opt1
opt2 = $("#opt2").val(); // Stores the value of id-opt2 in the variable opt2
url = "url.pdf?opt1=" + opt1 + "&opt2=" + opt2; // Takes the above variables and creates the query to send to your file.
window.location = url;
});
});
</script>
</head>
<body>
<form id="form">
<select name="test" id="test">
<option id="op1" value="1">1234</option>
<option id="op2" value="2">2134</option>
</select>
</form>
<a id="my_link"> click here</a>
</body>
Related
I'am using CKEditor and i have problem with upload into database. First of all I want take the value from textarea id (I dont want use textarea name but the id) and give the value in the hidden input.
HTML & Jquery (test.php)
<!DOCTYPE html>
<html>
<head>
<!-- CKEditor full package v4.7.3 -->
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<!-- Jquery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<form action="test2.php" method="POST" target="_blank">
<textarea id="description-down1"></textarea>
<script type="text/javascript">CKEDITOR.replace("description-down1")</script>
<br><br>
<input type="submit" name="save-button" value="Insert">
<!-- #3 take the value via name into php -->
<input type="hidden" name="insert-variable-value-name" id="insert-variable-value-id">
</form>
<script type="text/javascript">
$(document).ready(function(){
//#1 take value from textarea "id"
var data = // what code write here?
//#2 put the value of textarea into hidden input
document.getElementById('insert-variable-value-id').value = data;
});
</script>
</body>
</html>
PHP (test2.php)
<?php
//connection
$conn = new mysqli("localhost", "root", "", "test_engine");
// call the value from the hidden input
$description = $_POST['insert-variable-value-name'];
// Insert data
$insert_data = "INSERT INTO test (description)
VALUES('$description')";
$conn->query($insert_data);
?>
var data = CKEDITOR.instances['description-down1'].getData();
You need to remeber to set hidden input value before form submit or update that field in some interval.
Thanks Bart for the help. I find here the answer. First runs the code, then submit.
Previus Code:
<body>
<form action="test2.php" method="POST" target="_blank">
<textarea id="description-down1"></textarea>
<script type="text/javascript">CKEDITOR.replace("description-down1")</script>
<br><br>
<input type="submit" name="save-button" value="Insert">
<!-- #3 take the value via name into php -->
<input type="hidden" name="insert-variable-value-name" id="insert-variable-value-id">
</form>
<script type="text/javascript">
$(document).ready(function(){
//#1 take value from textarea "id"
var data = // what code write here?
//#2 put the value of textarea into hidden input
document.getElementById('insert-variable-value-id').value = data;
});
</script>
</body>
Edited Code:
<body>
<!-- Create form id='form-id' -->
<form action="test2.php" method="POST" target="_blank" id='form-id'>
<textarea id="description-down1"></textarea>
<script type="text/javascript">CKEDITOR.replace("description-down1")</script>
<br><br>
<!-- Create submit id='save-button' -->
<input type="submit" name="save-button" value="Insert" id='save-button'>
<!-- #3 take the value via name into php -->
<input type="hidden" name="insert-variable-value-name" id="insert-variable-value-id">
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#save-button').click(function(e){
//Stop
e.preventDefault();
//The code
//#1 take value from textarea "id"
var data = CKEDITOR.instances['description-down1'].getData();
//#2 put the value of textarea into hidden input
document.getElementById('insert-variable-value-id').value = data;
//Proceed the submit
$('#form-id').submit();
});
});
</script>
</body>
I use dropdown list with PHP to retrieve data from my sql database, It exists on this link.
It worked well but when I change the menu style what I want, does not work.
this menu code is what I want:
<select name="parent_cat" id="parent_cat" data-native-menu="false" class="filterable-select" data-iconpos="left">
I think the problem exists because the menu shows in popup : `#&ui-state=dialog`
but I do not know how to solve this problem.
this full HTML code :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dependent DropDown List</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#parent_cat").change(function() {
$(this).after('<div id="loader"><img src="img/loading.gif" alt="loading subcategory" /></div>');
$.get('loadsubcat.php?parent_cat=' + $(this).val(), function(data) {
$("#sub_cat").html(data);
$('#loader').slideUp(200, function() {
$(this).remove();
});
});
});
});
</script>
</head>
<body>
<form method="get">
<label for="category">Parent Category</label>
<select name="parent_cat" id="parent_cat" data-native-menu="false" class="filterable-select" data-iconpos="left">
<?php while($row = mysql_fetch_array($query_parent)): ?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['category_name']; ?></option>
<?php endwhile; ?>
</select>
<br/><br/>
<label>Sub Category</label>
<select name="sub_cat" id="sub_cat"></select>
</form>
</body>
</html>
Please help
in my code i am creating a drop down box and storing the changed value of the drop down in hidden variable.
<!DOCTYPE html>
<html>
<head>
<style>
div { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<select id="sweets">
<option>Chocolate</option>
<option selected="selected">Candy</option>
<option>Taffy</option>
<option selected="selected">Caramel</option>
<option>Fudge</option>
<option>Cookie</option>
</select>
<input type="hidden" id="inputfield">
<div></div>
<script type="text/javascript">
$(document).ready(function() {
$("#sweets").change(function() {
var var_name = $(this).val();
$('input[id=inputfield]').val(theValue);
}
});
});
});
</script>
</body>
</html>
<?php
if(isset($_POST['form']))
echo $_POST['inputfield'];
?>
once the combo box is changed the php should get the hidden field value and i ve to perform db transaction. again i need to load another drop down box based on the selected value.. Can you guide me
You can bypass all the horse trading with the hidden field and send it to php directly via ajax.
$(document).ready(function() {
$("#sweets").change(function() {
$.post('myphpfile.php', {sweet : $(this).val() });
});
});
myphpfile.php will receive the value as a post with the name of 'sweet'
Unless I'm misunderstanding, shouldn't
$('input[id=inputfield]').val(theValue);
be
$('input[id=inputfield]').val(var_name);
?
You can wrap the select and hidden elements in form element adding a post method and action attribute. Give the hidden field a name as in name="hidden field"
this way you can access it in the post variable.
<form action="currentpage.php" method="post">
<select id="sweets">
<option>Chocolate</option>
<option selected="selected">Candy</option>
<option>Taffy</option>
<option selected="selected">Caramel</option>
<option>Fudge</option>
<option>Cookie</option>
</select>
<input type="hidden" id="inputfield" name="hiddenfield"/>
<input type="submit" value="Submit" name="submit"/>
</form>
When the change event executes to update the hidden field and you submit in php you can do
if(isset($_POST["submit"]))
{
$val = $_POST["hiddenfield"] ;
}
i want to implement a dynamic drop down which will select , batch of students from first drop down and then the corresponding subjects as the options for second drop down ..
this is the code for my Page :
<head>
<link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.min.css" />
<script type="text/javascript" src="jsDatePick.min.1.3.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function(){
new JsDatePick({
useMode:2,
target:"inputField",
dateFormat:"%d-%M-%Y"
});
};
</script>
</head>
<?php
$dept =$_COOKIE[dept];
include_once("../Include/connectdb.php");
include_once("../Include/data_menu.php");
include_once '../Include/pagemaker.php';
?>
<script type="text/javascript">
$(document).ready(function()
{
$(".batch").change(function()
{
var id=$(this).val();
var dataString = 'year_join='+ id;
$.ajax
({
type: "POST",
url: "ajax_subject.php",
data: dataString,
cache: false,
success: function(html)
{
$(".subject").html(html);
}
});
});
});
</script>
</head>
<body>
<br><br><br><br><br>
<fieldset class="cbox"><legend>Batch</legend>
<form name="frm" action=<?php print "edit_attendencePHP_NEW.php"; ?> method="GET"
id="content">
<br><br>
<div style="margin:80px">
<label>Batch :</label> <select name="batch">
<option selected="selected">--Select Batch--</option>
<?php
$result = mysql_query("select distinct year_joining from student_profile
order by year_joining ")or die(mysql_error());
while($year = mysql_fetch_assoc($result)){
if($year[year_joining]!="" && $year[year_joining]>"2008"){
print "<OPTION value='$year[year_joining]'>$dept $year[year_joining]</OPTION>";
} }
?>
</select>
<label>Subject :</label> <select name="subject" class="subject">
<option selected="selected">--Choose Subject--</option>
</select>
Date :<input type="text" size="12" id="inputField" name="date"/>
<input class="bluebutton" type="submit" value="Go">
</form><br>
<label class="comment">select a batch frm the list and press "Go"</label>
</fieldset>
the second ajax page works fine ... as i tested that with ($_GET)
this is wat with $_GET[year_join] ( view source code ) shows ...
ajax_subject.php
<option value="ENGG.MATHS-I">ENGG.MATHS-I</option><option value="COMPUTER PROGRAMMING
LAB">COMPUTER PROGRAMMING LAB</option><option value="WORKSHOPS">WORKSHOPS</option>
<option value="ENGG.PHYSICS">ENGG.PHYSICS</option><option
value="ENGG.CHEMISTRY">ENGG.CHEMISTRY</option><option ...........
Everything else seems fine ..
Right now it looks like no change event, which leads to the AJAX request, is being fired because your batch select element does not have a class of batch, only a name of batch. That is what you intended with $(".batch").change(function(){} right? Once you change, I would put an alert or console log in your callback function just to make sure it is even firing.
Why I do not get any printing on the screen (m1, m2 or m3)?
i.e. how can I pass JavaScript var to PHP Session.
<?php session_start(); ?>
<html>
<head>
<script type="text/javascript">
function disp_text()
{
var p = document.myform.mylist.value;
<?php $_SESSION['color'] ?> = p;
<?php echo $_SESSION['color'] ?>;
}
</script>
</head>
<body>
<FORM NAME="myform">
<SELECT NAME="mylist" onChange="disp_text()">
<OPTION VALUE="m1">Red
<OPTION VALUE="m2">Blue
<OPTION VALUE="m3">Green
</SELECT>
</FORM>
Thanks for any help.
And another one for the count... JavaScript runs on the user's computer, PHP runs on the server. View the page source (right-click, View Source) and you will see exactly why it doesn't work:
<script type="text/javascript">
function disp_text()
{
var p = document.myform.mylist.value;
= p;
;
}
</script>
The only way to get JS variables into PHP is via a form (which I am using loosely to include AJAX).
Try this
<html>
<head>
<script type="text/javascript">
function disp_text()
{
var e = document.getElementsByName("mylist")[0];
var p = e.options[e.selectedIndex].value;
sessionStorage.color = p;
document.write(p);
}
</script>
</head>
<body>
<FORM NAME="myform">
<SELECT NAME="mylist" onChange="disp_text()">
<OPTION VALUE="m1">Red</OPTION>
<OPTION VALUE="m2">Blue</OPTION>
<OPTION VALUE="m3">Green</OPTION>
</SELECT>
</FORM>
</body>
</html>
index.php:
<script type="text/javascript">
var time = "OK then, let's do this!";
sessionStorage.setItem("time", time);
window.location.href = "test.php";
</script>
test.php
<script type="text/javascript">
var time = sessionStorage.getItem("time");
console.log(time);
<?php $abc = "<script>document.write(time)</script>"?>
</script>
<?php
echo $abc;
?>