I have incorporated this simple datetimepicker : http://trentrichardson.com/examples/timepicker/#rest_examples
So it looks
<?php $tabname = "brightness"; ?>
<script type="text/javascript">
$('#datumstartbrightness').timepicker();
</script>
...
<input type="text" name="datumstart<?php echo $tabname; ?>"
id="datumstart<?php echo $tabname; ?>"/>
...
With this code it works and datetimepicker appears !
But with this ...
<?php $tabname = "brightness"; ?>
<script type="text/javascript">
$('#datumstart<?php echo $tabname; ?>').timepicker();
</script>
...
<input type="text" name="datumstart<?php echo $tabname; ?>" id="datumstart<?php echo $tabname; ?>"/>
...
DateTimePicker doesn't appear. What can be wrong with this line
$('#datumstart').timepicker();
You need to do the ready-state first before you can call jQuery-Functions: So try this:
<script type="text/javascript">
$(function() {
$('#datumstart<?php echo $tabname; ?>').timepicker();
});
</script>
Related
standard input, select box and multiple select box can also get the desired value, it works.. but how can i get the value with jquery in this code snippet?
<script>
$(document).ready(function(){
jQuery('#checkboxesmarka').change(function(){
var id=jQuery('#checkboxesmarka').val();
alert(id);
});
});
</script>
<div id="checkboxesmarka">
<?php
while($markacek=$markasor->fetch(PDO::FETCH_ASSOC)) { ?>
<label for="<?php echo "marka".$markacek['marka_id'] ?>">
<input type="checkbox" id="<?php echo "marka".$markacek['marka_id'] ?>" name="marka_id[]" value="<?php echo $markacek['marka_id'] ?>" /><?php echo $markacek['marka_name'] ?> </label>
<? } ?>
</div>
$(function(){
$('#checkboxesmarka').click(function(){
var valSelected = [];
$(':checkbox:checked').each(function(i){
valSelected[i] = $(this).val();
});
console.log(valSelected);
});
});
In console all selected value
When the user submits the form, the result should be displayed without page refreshing. The PHP script is also in the same HTML page.
What is wrong withe $.post jQuery?
<!--
Submit form without refreshing
-->
<html>
<head>
<title>My first PHP page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#btn").click(function(event) {
var myname = $("#name").val();
var myage = $("#age").val();
$.post(
"23.php", $("#testform").serialize()
);
});
});
</script>
</head>
<body>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" id="testform">
<!-- $_SERVER['PHP_SELF'] array -->
Name:
<input type="text" name="name" id="name" />Age:
<input type="text" name="age" id="age" />
<input type="submit" name="submit" id="btn" />
</form>
</body>
</html>
<?php
if ( isset($_POST['submit']) ) { // was the form submitted?
echo "Welcome ". $_POST["name"] . "<br>";
echo "You are ". $_POST["age"] . "years old<br>";
}
?>
You need to use event.preventDefault in your javascript
$("#btn").click(function(event){
event.preventDefault();
var myname = $("#name").val();
var myage = $("#age").val();
$.post(
"23.php", $( "#testform" ).serialize()
);
});
Yes, you need e.preventDefault. Also, I think these var myname and myage variables are unnecessary since you're serializing the entire form in $.post.
Try this:
$(document).ready(function() {
$("#btn").click(function(e) {
e.preventDefault();
$.post(
"23.php", $("#testform").serialize()
);
});
});
Hope this helps.
Peace! xD
This is my finalized complete code after following your all suggestions. But it is still refreshing when getting results. Let's see if I have made any further error in the code. Thanks for your all helps.
UPDATE! - All these HTML and PHP scripts resides in the same file called 23.php
<!--
Submit form without refreshing
-->
<html>
<head>
<title>My first PHP page</title>
<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#btn").click(function(event){
event.preventDefault();
var myname = $("#name").val();
var myage = $("#age").val();
yourData ='myname='+myname+'&myage='+myage;
$.ajax({
type:'POST',
data:yourData,//Without serialized
url: '23.php',
success:function(data) {
if(data){
$('#testform')[0].reset();//reset the form
alert('Submitted');
}else{
return false;
}
};
});
});
});
</script>
</head>
<body>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" id="testform"> <!-- $_SERVER['PHP_SELF'] array -->
Name: <input type="text" name="name" id="name"/>
Age: <input type="text" name="age" id="age"/>
<input type="submit" name="submit" id="btn"/>
</form>
</body>
</html>
<?php
if ( isset($_POST['submit']) ) { //was the form submitted?
echo "Welcome ". $_POST["name"] . "<br>";
echo "You are ". $_POST["age"] . "years old<br>";
}
?>
this jquery script not work when im insert php tag into this,.. can i know what is the problem..
<script language="javascript">
$("#openmsg_<?php echo $id; ?>").click(function(){
$("#toggleText_<?php echo $id; ?>").toggle(800);
})
</script>
this is my jquery code to toggle
<form action="my_messages.php" method="POST" name="<?php echo $msg_title; ?>">
<input type="button" name="openmsg" id="openmsg_<?php echo $id; ?>" value="<?php echo $msg_title; ?>" onClick="javascript:toggle<?php echo $id; ?>();" />
<input type="submit" name="setopened_<?php echo $id; ?>" value="I have read this" />
</form>
<div id="toggleText_<?php echo $id; ?>" style="display:none;">
<?php echo $msg_body; ?>
</div>
Update your code like this :
$("#openmsg_"+).click(function(){
$("#toggleTextuserid_"+).toggle(800);
})
Try this:
<script language="javascript">
var id = <?php echo $id?>;
$("#openmsg_" + id + "").click(function(){
$("#toggleTextuserid_" + id + "").toggle(800);
})
</script>
I’m using below a simple Jquery code to call a PHP page and get the button information back in a div:
<head>
<script>
$(document).ready(function(){
$('#myButtons input:radio').change(function() {
var buttonValue = $("#myButtons input:radio:checked").val();
$("#myDiv").load('myPHPfile.php', {selectedButtonValue : buttonValue});
});
});
</script>
</head>
<body>
<div id="myButtons">
<input type="radio" name="category" value="10" />ButtonA
<input type="radio" name="category" value="20" />ButtonB
</div>
<div id="myDiv">Click the button to load results</div>
</body>
myPHPfile.php
<?php
if( $_REQUEST["selectedButtonValue"] )
{
$buttonPHP = $_REQUEST['selectedButtonValue'];
echo "Value button is ". $buttonPHP;
}
?>
How can I get the PHP information inside JavaScript, as follows:
alert(<?php echo('buttonPHP'); ?>);
Note: The following code shows the alert box message, but I can’t use it since I need the $buttonPHP value:
$("#myDiv").load('myPHPfile.php', {selectedButtonValue : buttonValue}, function(data){ alert(data); });
I’ve tried $_SESSION in myPHPfile.php, and also all jQuery AJAX functions: load(), get(), post() and the ajax() method, none of them is giving the PHP value inside JavaScript.
I looked all over but I couldn’t find an answer.
You would be better with an $.ajax request. Don't echo the 'Value of button is' part, just echo the actual value. For example:
$.ajax({
url: "myPHPfile.php",
context: document.body
}).done(function(data) {
var buttonValue = data;
// Whatever you want to do with the data goes here.
});
See the jQuery docs http://api.jquery.com/jQuery.ajax/
Alternatively, if you are generating the page with PHP, just echo the PHP variable into the JavaScript
<script>
...
var buttonValue = "<?php echo $buttonPHP; ?>";
...
</script>
Encode it in JSON instead of trying to echo the data :
<?php
if( $_GET["selectedButtonValue"] )
{
$buttonPHP = $_GET['selectedButtonValue'];
header('Content-Type: application/json');
echo json_encode($buttonPHP);
}
?>
Then use jquery get json to grab the data
$.get('myPHPfile.php?selectedButtonValue='+buttonvalue, function(data){
console.log(data);
});
Try:
alert('<?php echo $buttonPHP; ?>');
As a temporary solution, you could quickly merge both into a dirty code like this:
index.php:
<?php
$buttonPHP = "10"; //Set up your default button variable
if( $_REQUEST["selectedButtonValue"] == 10 )
{
echo "Selected button value: 10"; //You can also print $_REQUEST["selectedButtonValue"] here directly, but what's the point if you can select it from DOM through jQuery?
exit;
} else if ($_REQUEST["selectedButtonValue"] == 20) {
echo "Selected button value: 20";
exit;
}
?>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
var buttonValue = <?php echo $buttonPHP ?>; //Duplicate default value from PHP to JS
$(document).ready(function(){
$('#myButtons input:radio').change(function() {
var buttonValue = $("#myButtons input:radio:checked").val();
$("#myDiv").load('index.php', {selectedButtonValue : buttonValue});
});
});
</script>
</head>
<body>
<div id="myButtons">
<input type="radio" name="category" value="10" />ButtonA
<input type="radio" name="category" value="20" />ButtonB
</div>
<div id="myDiv">Click the button to load results</div>
</body>
</html>
index.php rendered in browser:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
var buttonValue = 10; //Duplicate default value from PHP to JS
$(document).ready(function(){
$('#myButtons input:radio').change(function() {
var buttonValue = $("#myButtons input:radio:checked").val();
$("#myDiv").load('index.php', {selectedButtonValue : buttonValue});
});
});
</script>
</head>
<body>
<div id="myButtons">
<input type="radio" name="category" value="10" />ButtonA
<input type="radio" name="category" value="20" />ButtonB
</div>
<div id="myDiv">Click the button to load results</div>
</body>
</html>
EDIT: Stored session
<?php
session_start();
if (isset($_REQUEST['selectedButtonValue'])) {
$_SESSION['selectedButtonValue'] = $_REQUEST['selectedButtonValue'];
echo $_REQUEST['selectedButtonValue'];
exit;
} else if (!isset($_SESSION['selectedButtonValue'])) {
$_SESSION['selectedButtonValue'] = 10;
}
?>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
var buttonValue = <?php echo $_SESSION['selectedButtonValue']; //Get input value from session ?>;
$(document).ready(function(){
$('#myButtons input:radio').change(function() {
var buttonValue = $("#myButtons input:radio:checked").val();
$("#myDiv").load('index.php', {selectedButtonValue : buttonValue});
});
});
</script>
</head>
<body>
<div id="myButtons">
<input type="radio" name="category" value="10" />ButtonA
<input type="radio" name="category" value="20" />ButtonB
</div>
<div id="myDiv"><?php echo $_SESSION['selectedButtonValue']; //Get input value from session ?></div>
</body>
</html>
Also make sure you filter the $_REQUEST variable, because as of now, it will print anything. See http://en.wikipedia.org/wiki/Cross-site_scripting for details.
I'm trying to compute a value from 2 given values quantity and price. I used the keyup event in jquery to compute the total from the current value of the qty and price.
How will I be able to reference the current textbox which initiates the keypress event. And put the corresponding total to the assigned box.
Do you know of any jquery plugins that will make it easier for me to achieve the result.
<script type="text/javascript">
$(function(){
$('input[name^=qty]').keyup(function(){
var curprice=$('input[name^=price]').val();
var curqty=$('input[name^=qty]').val();
var curtotal=curprice * curqty;
$('input[name^=comp]').val(curtotal);
});
});
</script>
</head>
<body>
<?php
for($a=0;$a<=5;$a++){
?>
Price:<input type="text" name="<?php echo 'price'.$a; ?>" value="<?php echo $a; ?>"/>
Quantity:<input type="text" name="<?php echo 'qty'.$a; ?>" value="<?php echo $a; ?>"/>
Computed:<input type="text" id="<?php echo 'a'.$a; ?>" name="<?php echo 'comp'.$a ?>" value="" />
<?php
echo "<br/>";
}
?>
</body>
</html>
Heres a screenshot.
If you need more details, feel free to ask, thanks.
<script type="text/javascript">
$(function(){
$('input[name^=qty]').keyup(function(){
var parentDiv = $(this).closest('div');
var curprice=parentDiv.find('input[name^=price]').val();
var curqty= this.value;
var curtotal=curprice * curqty;
parentDiv.find('input[name^=comp]').val(curtotal);
});
});
</script>
</head>
<body>
<?php
for($a=0;$a<=5;$a++){
?>
<div>
Price:<input type="text" name="<?php echo 'price'.$a; ?>" value="<?php echo $a; ?>"/>
Quantity:<input type="text" name="<?php echo 'qty'.$a; ?>" value="<?php echo $a; ?>"/>
Computed:<input type="text" id="<?php echo 'a'.$a; ?>" name="<?php echo 'comp'.$a ?>" value="" />
</div>
<?php
echo "<br/>";
}
?>
</body>
</html>
notice all the changes against your current code.
Here's something else. It uses regex to get the number part of the element's name, and assumes that something named priceX and compX are the related inputs.
$("input[name^=qty]").keyup(function() {
var i = /^qty(\d+)$/.exec($(this).attr('name'))[1],
price = parseFloat($("input[name=price" + i + "]").val()),
qty = parseInt($("input[name=qty" + i + "]").val(), 10);
$("input[name=comp" + i + "]").val(price * qty);
});
Example: http://jsfiddle.net/AHUHu/