Setting Date Picker With JavaScript And PHP - javascript

I'm trying to set a date picker with JS like any other <input> value.
This HTML line works, but I need to set the value with Java.
<input Id="BirthDate" name="BirthDate" type="date" required value="<?php echo $BirthDate ?>" >
However when I try to use the .value attribute the date picker stays blank.
<input Id="BirthDate" name="BirthDate" type="date" required >
Currently I am using this script to set the picker, This function runs as soon as the page loads the body.
function StartUp() {
document.getElementById("BirthDate").value = "<?php echo $BirthDate ?>";
}
</script>
What am I doing wrong?
And what else could I try to use?

I have it working no, something was being difficult with the syntax of the php.
changing:
document.getElementById("BirthDate").value = "<?php echo $BirthDate ?>";
To:
document.getElementById("BirthDate").value = "<?php echo($BirthDate); ?>";
Adding () parentheses around my variable and a ; semicolon after the command fixed my issue.

Related

Auto Submit form just once

I have configured the javascript code to do auto submit but what I want is that if the authentication fails, I do not do the autosubmit again.
My code is the following:
Form:
<?php echo form_open($this->uri->uri_string(), array('class' => 'login-form')); ?>
<div class="form-group">
<label for="email"><?php echo _l('clients_login_email'); ?></label>
<input type="text" autofocus="true" class="form-control" name="email" id="email">
<?php echo form_error('email'); ?>
</div>
<div class="form-group">
<label for="password"><?php echo _l('clients_login_password'); ?></label>
<input type="password" class="form-control" name="password" id="password">
<?php echo form_error('password'); ?>
</div>
<?php echo form_close(); ?>
Javascript
<script type="text/javascript">
window.onload=function(){
var auto = setTimeout(function(){ autoRefresh(); }, 100);
function submitform(){
document.forms["login-form"].submit();
}
function autoRefresh(){
clearTimeout(auto);
auto = setTimeout(function(){ submitform(); autoRefresh(); }, 10000);
}
}
</script>
How can I do it?
I believe your problem lies in array('class' => 'login-form').
Looking at the documentation for document.forms, you access the forms with ID.
I am not familiar with code-igniter; however, your code tells me that you are probably setting the class for a form. You would need to set the id for a form.
For preventing the auto-submit from running twice. From what I see, I suspect that you are getting a normal HTML form at the end. When you submit a HTML form it would make a trip to the server and when it comes back it should reload the page (unless you make it an asynchronous form).
Since the page is reloading, the window.onload would be run every time. To prevent this you would have to use a true-false flag some wheres.
Here are some potential solutions:
You could try looking into accessing url parameters from JavaScript. Some quick searching shows that this is a lot more complex than I'd expect though...
Alternatively, you could move the JavaScript code into a <script> block and echo out a script block from PHP. If you are going with this option you should look into using addEventListener method instead of accessing onload directly. PHP would make it much easier to accessing URL parameters by using $_GET or $_POST.
A second alternative would be to echo out a <input type="hidden"> that holds the true/false value and then access the value using JavaScript.
Once you can use your flag, you just need to check the flag in order to decide whether or not to auto-submit or not.
if (myFlag){
//submit form
}else{
//don't submit form
}
This true-false value is not sensitive data so it should be safe to place it as a GET parameter.

jQuery datepicker field value not showing

I have a field on which I have implemented jQuery Datepicker but if I assign a value on that field its shows in the chrome's developer tool...
But its not showing on the front end.
I know we can set a default date like this with the datepicker option setDate:
$( ".datepicker" ).datepicker("setDate", '29-10-2016');
But the date is coming from database and I cannot hard code it... So is there any way I can add a value and it will show up on front end unless user changes and set another date?
<input type="text" name="date" id="date" class="datepicker" value="25-10-2016">
This problem happen because javascript require date input in format "yyyy-MM-dd", regardless format you use to display the value.
So your code should be like this :
<input type="text" name="date" id="date" class="datepicker" value="2016-10-25">
or
<input type="text" name="date" id="date" class="datepicker" value="<?php echo date_format($date,"Y-m-d"); ?>">
I found a way but still doesn't feel its the correct way, but for now this will do the trick for me.
I'm posting this answer to help other and will wait and see anyone else come up with the best and efficient solution for this question.
Since I'm using PHP so I just put this on my page to set the date for that field. I can add more lines if I have more date fields in my page...
<script>
$(function(){
$('#date').datepicker('setDate', '<?php echo $date; ?>');
});
</script>
If you are not getting value from $('#date').val() then there is problem in back end , date is not coming from back-end. If there is value in input field like
<input type="text" name="date" id="date" class="datepicker" value="25-10-2016">
Then you can use below code .
$(function(){
$( ".datepicker" ).datepicker({dateFormat: "dd-mm-yy"} );
$( ".datepicker" ).datepicker("setDate",$('#date').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text" name="date" id="date" class="datepicker" value="25-10-2016">
Mine situation was my date input didn't show the date value I picked after submit, but the date value can be seen in Chrome Developer tool, so I solved this problem by getting the input value before setting datepicker, then adding the value after.
$( function() {
var ddate = document.getElementById("date").value?document.getElementById("date").value:'';
$("#date").datepicker();
$("#date").datepicker("option", "dateFormat", "yy/mm/dd");
$("#date").val(ddate);
} );

Options for auto setting a date input field

When presenting a user with a date input form
<input type="date" class="form-control" name="date" value="{{ old('date') }}">
Most of the time although not always the user needs to enter todays date.
What are my options for setting the default value to todays date.
Im using Blade, PHP, Bootstrap, Laravel, CSS, HTML
If any of them resources have something to handle this.
Thanks in advance for any feedback it's appreciated.
You can use PHP to echo the date:
<?php $today = date("m/d/Y"); ?>
<input type="date" class="form-control" name="date" value="<?php echo $today; ?>">
This will echo a date in the format of Month/Date/Year, e.g. 12/31/2000
The documentation here explains in more detail on how to format the date
The function old() takes a second parameter, the default. Using the link provided by user Chris, it looks like you want the format d/m/Y. With that in mind, the following should do the trick.
{{ old('date', date('d/m/Y')) }}

Indirect Population of Textarea in HTML Form Using PHP

I am working on an "Update User Data" form, which should reflect the initially entered information stored in the database into the textarea, and can be changed if the user wishes to. While I'm doing so, I have a concern - is directly writing value = <?php //some code ?> the safest bet?
I was trying to invoke a function to place my PHP code in that instead, but apparently it's just displaying the function's name.
Here's my code snippet:
<div>Date of Birth: </div>
<input id="dob" type="date" onFocus="emptyElement('status')" value="reflect_data('dob');">
where the function reflect_data is defined as -
function reflect_data(elem) {
//query and some code to access the data and store into $member
if (elem == "dob") {
echo $member['DOB'];
exit();
}
NOTE : A newbie to PHP, any advice would be welcome. Thanks. :)
You use php code in a JS function. That won't work that way and is impractical. Simple:
<input id="dob" type="date" onFocus="emptyElement('status')" value="<?php echo htmlspecialchars($member['DOB']); ?>">
is the best solution.

Store a session variable in html/javascript

I'm trying to grab a session variable in my javascript, but have some problems getting it right..
I didn't get that to work, so instead i tried to store it in a hidden variable in HTML first, but i dont know how to store a session variable there..
Can anyone guide me to the right path?
The code (HTML file): ($_SESSION["price1"] is equal to "20.00")
<input type="hidden" id="price" value="$_SESSION["price"]"/>
The code in javascript:
var sessionValue = document.getElementById("price").value;
What to do?
you missed PHP tags <?php and echo, change to:
<input type="hidden" id="price" value="<?php echo $_SESSION["price"]; ?>"/>
What everyone bellow mentioned is perfectly true, inside HTML you can just wrap stuff in <?php echo $_SESSION['price']; ?> and it will work (notice the <?php tags)
However, the right way to do this -- considering you want to pass a PHP variable (in your case a session variable) to javascript is to directly insert it into a javascript variable instead of accessing the DOM. This way, you also have it instantly and don't have to wait for the DOM to be loaded
<script>
var price = '<?php echo $_SESSION["price"]; ?>';
alert('The price is: ' + price);
</script>
This line:
<input type="hidden" id="price" value="$_SESSION["price"]"/>
Should be:
<input type="hidden" id="price" value="<?php echo $_SESSION["price"];?>"/>
You are missing the php tags
change,
<input type="hidden" id="price" value="$_SESSION["price"]"/>
To,
<input type="hidden" id="price" value='<?php echo $_SESSION["price"]; ?>'/>
Grab your session variable in JavaScript using this:
var my_session_price = "<?php echo $_SESSION["price"]; ?>";

Categories