I'm using datepicker with the following script:
<?php print "$test_date" ?> --> returns 2014,10,25
<script>
$(function() {
$("#mydate").datepicker({
onSelect: function(dateText, inst) {
var dateAsString = dateText;
var date = $('#mydate').val();
var datex = date.replace(/[/]/g,"-"); // 01-01-2013 01:21
$('#mydatex').val(datex);
}
})
.datepicker("setDate",new Date());
//.datepicker("setDate","<?php echo $test_date; ?>"; --> this doen't work
// returns blank date
});
</script>
the default date is set to the current date. Is there a way to dynamically set the default date with a variable passed into my form from php? i.e When I render the form I pass into it $test_date which = "2014,12,25"
and here's the top of the form:
<form name="myForm" action="createevent.php" onsubmit="return validateForm()" method="get">
<h1 style="color:blue;">Skipper Input Page</h1>
<div class="skipperinput"">
<input type="text" id="mydate" name="mydate" value= ""/><br>
<label>Date</label>
<input type="hidden" id="mydatex" name="mydatex"/>
.datepicker("setDate", new Date("<?php echo $new_default_date; ?>"));
Related
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>";
}
?>
Well i'm working on a small php script and in the admin panel i've added a page to manage comments. Following is the html markup for comment:
<form name="form" action="">
<tr>
<td>COMMENT ID</td><td><button value="0" name="choice">Delete</button><button value="1" name="choice">Accept</button></td>
</form>
For every comment i'm posting this info to a file comment.php using the following jquery code:
<script type="text/javascript">
$(document).ready(function(){
$("#form").submit(function(){
$.get("response.php", $(this).serialize(), function(a){
$("#info").html(a)
});
return false
})
});
</script>
My issue is i can't get the choice Value using this code $_REQUEST['choice'] because both <button>s have the same name and this is the same thing for forms. How can i fix this ?
The are some mistakes on your code:
1) You forgot to put the id attribute that your JS is calling
<form name="form" action="">
Change it to this:
<form name="form" action="" id="form">
Since it has the same name, use the .click() event instead.
Complete Code:
<form name="form" action="" id="form">
<table>
<tr>
<td>COMMENT ID</td>
<td>
<button value="0" name="choice">Delete</button>
<button value="1" name="choice">Accept</button>
<input type="hidden" name="id" value="100">
</td>
</tr>
</table>
</form>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button[name='choice']").click(function(e){
var form_data = {};
form_data.choice = $(this).val();
form_data.id = $(this).siblings('input[name="id"]').val();
e.preventDefault(); // stops the normal submission
$.post("index.php", form_data, function(a){
console.log(a); // check the values on browser console
});
});
});
</script>
On your PHP:
if(isset($_POST['choice'])) {
$action = $_POST['choice'];
$data = $_POST;
// its inside $_POST['id'];
echo json_encode($data);
exit;
}
Sample Output
You can do this by binding the ajax request to the button.click() instead of form.submit()
$(function(){ // $(document).ready() shorthand
$("button[name=choice]").click(function(){
var data = 'choice='+ $(this).val() + '&' + $(this).closest('form').serialize();
$.get("response.php", data, function(a){
$("#info").html(a)
});
return false
})
});
I'm trying to pass javascript array to php using ajax and jQuery.
I have simple page that contains a series of numbers that I've made selectable via jQuery UI (see below) When I select a group of numbers, I use array.push to add those numbers to an array called "shift". Here's the question: What's the simplest way to send this array to PHP? Will it remain an array after it comes over? I'm new to coding and would appreciate any help I can get. After a lot of research, here's what I've tried. Oh, I've managed to figure out how to submit the form to PHP, it's the jQuery UI array that i'm stuck on.
here's my main.php
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class = "container">
<form action="post.php" method="post" id="add">
<input type="text" class="leader" name="name" placeholder="Leader">
<input type="text" class="date" name="date" placeholder="date">
<input type="text" class="time" name="time" placeholder="time">
<input type="text" class="score" name="score" placeholder="score">
<input type="submit" id="btn" value="send" />
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.4.custom.js"></script>
<script src="globe.js"></script>
<ul id ="hours_zoned">
<li class="nine">9</li>
<li class="ten">10</li>
<li class="eleven">11</li>
<li class="twelve">12</li>
<li class="one">1</li>
<li class="two">2</li>
<li class="three">3</li>
<li class="four">4</li>
<li class="five">5</li>
<li class="six">6</li>
<li class="seven">7</li>
<li class="eight">8</li>
<li class="nine">9</li>
</ul>
</div>
</body>
</html>
here's my post.php
<html>
<body>
/* I'm using all of these echoes to verify that the data is coming
over. Only "shift" fails to come over */
NAME <?php echo $_POST["name"]; ?><br>
DATE <?php echo $_POST["date"]; ?><br>
TIME <?php echo $_POST["time"]; ?><br>
SCORE: <?php echo $_POST["score"]; ?><br>
SHIFT: <?php echo $_POST["shift"]; ?>
<?php
include("db.php");
$name = $_POST["name"];
$date = $_POST["date"];
$time = $_POST["time"];
$query = "INSERT INTO leaders (name, shift_date, shift_time) VALUES ('$name', '$date', '$time')";
$result = $db->query($query);
?>
</body>
</html>
here is my globe.js
var shift = []; //create array to store zoned hours
$(function() {
$( "#hours_zoned" ).selectable();
$( "#hours_zoned" ).on('click', 'li', function() {
$(this).addClass("clicked ui-selected");
$( this ).css( "background-color", "#e74c3c" );
$( this ).selectable({ disabled: true });
var floorTime = $(this).text(); // get the value of the hour that was clicked
shift.push(floorTime); // add that hour to the floorTime
});
/*$('#add').on('submit', function() {
var name = $('.leader').val(); */
$('#btn').on('submit', function() {
$.ajax({
type: 'POST',
url: 'post.php',
data: shift,
success: function(msg) {
alert(msg);
}
});
});
return false;
});
You are only sending the key
data: shift,
according to the docs - Object must be Key/Value pairs. (https://api.jquery.com/jQuery.ajax/)
try
data: {shift: shift},
so it is now
$('#btn').on('submit', function() {
$.ajax({
type: 'POST',
url: 'post.php',
data: {shift: shift},
success: function(msg) {
alert(msg);
}
});
return false;
});
EDIT: Your ajax function was a bit jacked up. Fixed that for you also. See new code.
Your ajax submit isn't running. Add return false; to prevent the main form from submitting. I'm thinking the easiest way to add the array would be to insert it into a hidden input immediately after being pushed in your jQuery function. Then you would just serialize the form data and send it all in your ajax function. See below:
New form:
<form action="post.php" method="post" id="add">
<input type="text" class="leader" name="name" placeholder="Leader">
<input type="text" class="date" name="date" placeholder="date">
<input type="text" class="time" name="time" placeholder="time">
<input type="text" class="score" name="score" placeholder="score">
<input type="hidden" class="shift" name="shift">
<input type="submit" id="btn" value="send" />
</form>
New function:
var shift = []; //create array to store zoned hours
$(function() {
$( "#hours_zoned" ).selectable();
$( "#hours_zoned" ).on('click', 'li', function() {
$(this).addClass("clicked ui-selected");
$( this ).css( "background-color", "#e74c3c" );
$( this ).selectable({ disabled: true });
var floorTime = $(this).text(); // get the value of the hour that was clicked
shift.push(floorTime); // add that hour to the floorTime
$("#add .shift").val(shift); // add shift array to hidden input in form
});
/*$('#add').on('submit', function() {
var name = $('.leader').val(); */
$('#add').submit(function() {
$.ajax({
type: 'POST',
url: 'post.php',
data: $("#add").serialize(),
success: function(msg) {
alert(msg);
}
});
return false; // you need this to prevent the other form submission
});
return false;
});
Untested, but that should get you going in the right direction.
Just wanna add to the answers given here..
You also need to check if the items selected are in array already (prevent duplicate).. so to do that you can do it like this
*code is taken from Matt answer
if($.inArray(floorTime, shift) === -1) {
shift.push(floorTime);
$("#add .shift").val(shift);
}
Try parse_str().
$array = parse_str( $_POST['data'] );
I want to update a forms textfield with the date and time when a user clicks the button. Cant seem to get it to work.
<form id="form1" action="http://google.com">
<input id="textField1" type="text" value="0" align="right" size="13"/><br>
<input id="button1" type="button" value="1" onclick="display()">
</form>
<script type="text/javascript">
function display()
{
document.getElementById("textField1").value = "<?php echo datetime() ?>";
}
</script>
You can use Date.toString for this
function display() {
var date = new Date();
document.getElementById("textField1").value = date.toString();
}
JSFiddle
How do I get my date to display like this: "yy-mm-dd" inside my date input textbox after I have selected a date?
Information is reading from a database.
So I need it saved in a database again.
JavaScript:
<script>
$(document).ready(function() {
$("#from").datepicker();
});
</script>
Html code:
<div class="field">
<label>Date</label>
<input type="text" name="date" value="<?php value('date'); ?>" id="from" />
<?php if(isset($errors['date'])) { ?>
<div class="error"><?php echo $errors['date']; ?></div>
<?php } ?>
</div>
Things that I have tried:
http://docs.jquery.com/UI/Datepicker#option-dateFormat
http://docs.jquery.com/UI/Datepicker/formatDate
jQuery UI DatePicker - Date Format
jquery ui datepicker date format
Define the format during initialization
$("#from").datepicker({
dateFormat: 'yy-mm-dd'
});
The value is updated as well. See an example.