Develop Reference

How to set flaskform field value by javascript

I have a JavaScript calender that when a user clicks on a date, the date is submitted together with other fields when the User submits the FlaskForm for validation.
I've managed to obtain the date dynamically, but when I set the date as the FlaskForm field value, the form validates but the date field comes out empty.
How can I properly submit the dynamic date data to FlaskForm using JavaScript?
Python
if createslot_form.validate_on_submit():
slot = Slot(
start_time=str(createslot_form.start_time.data),
end_time=str(createslot_form.end_time.data),
quantity=int(createslot_form.quantity.data),
date=str(createslot_form.date.data),
room_id=int(room_id)
)
db.session.add(slot)
db.session.commit()
print('slot has been added')
return redirect(url_for('edit_room', room_id=room_id))
return render_template('room.html', room=room, createslot_form=createslot_form, created_slots_json=created_slots_json, room_link=str(room_link))
Javascript
function new_event(event) {
if ($(".active-date").length != 0) {
var day = $(".active-date")[0].innerText;
var month = $(".active-month")[0].innerText;
var year = $(".year")[0].innerText;
var click_date = day + ' ' + month + ' ' + year;
console.log($(".form-control")[0]);
$(".form-control")[0].value = click_date;
$(".form-control")[0].placeholder = click_date;
}
}

Output ASP.NET model in JavaScript

Actually I'm working on an old existing ASP.NET project.
My task is to add an first date of the week output to the calendar week output.
Example:
The data comes from an ASP.NET model.
Actually it works like this:
function SetCalendarWeeks(data) {
$("#calendarWeek1").text("KW "+data.Week1.Number);
$("#calendarWeek2").text("KW "+data.Week2.Number);
$("#calendarWeek3").text("KW "+data.Week3.Number);
$("#calendarWeek4").text("KW "+data.Week4.Number);
$("#calendarWeek5").text("KW "+data.Week5.Number);
if (!data.MonthHas6Weeks) {
$(".collapsable").hide();
$(".dummyColumn").show();
if (data.HideLastInputbox) {
$("#planned10").hide();
} else {
$("#planned10").show();
}
} else {
$("#calendarWeek6").text("KW " + data.Week6.Number);
$(".collapsable").show();
$(".dummyColumn").hide();
$("#planned10").show();
if (data.HideLastInputbox) {
$("#planned12").hide();
} else {
$("#planned12").show();
}
}
What I tried is to add this:
document.getElementById("calendarWeek1").innerHTML = "KW "+data.Week1.Number+" <span class='firstDate'>"+data.Week1.FirstDate+"</span>";
But I got this:
Can someone help me out?

You need to convert your date returned by your model to a JavaScript date.
Date returned by your model is in the following format:
/Date(1475272800000)/
I made a function to convert your date; if the parameter short is true the date is converted to the format DD.MM.YYYY:
function ConvertDate(d, short) {
var regex = /-?\d+/;
var match = regex.exec(d);
var date = new Date(parseInt(match[0]))
if (short) {
date = ("0" + date.getDate()).slice(-2) + "." + ("0" + (date.getMonth() + 1)).slice(-2) + "." + date.getFullYear();
}
return date;
}
So you can use the function like this:
ConvertDate(data.Week1.FirstDate, true)
The full line:
document.getElementById("calendarWeek1").innerHTML = "KW "+data.Week1.Number+" <span class='firstDate'>"+ConvertDate(data.Week1.FirstDate, true)+"</span>";

function ConvertToDate(){
var rawDate = $("#rawDate").val();
var myDate = new Date(Number(rawDate));
$("#myDate").val(myDate);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
input: <input type="text" id="rawDate" value="1482706800000" /> <button onclick="ConvertToDate()">Convert</button>
<br /><br />
output: <input type="text" id="myDate" value="" readonly />
convert your data to date in javascript:
var myDate = new Date(data.Week1.FirstDate);

Javascript Default Values reset on page reload

I am new to the javascript/aspx world and most of my programming was done through trial and error and lots of internet searching, but i've hit upon a problem i cannot find a solution for.
I have a popup page that has 2 input boxes, and i have managed to add default values to both of these input boxes, for dates, like so:
$(window).load(function () {
var now = new Date();
var month = (now.getMonth() + 1);
var day = now.getDate();
if (month < 10)
month = "0" + month;
if (day < 10)
day = "0" + day;
$('#FNewDate').val('01/' + month + '/' + now.getFullYear());
$('#TNewDate').val(day + '/' + month + '/' + now.getFullYear());
}
now, if the user has entered a new date and hits the submit button, the page posts and reloads with the calculated results displayed to the user AND THE DEFAULT VALUES again, but not with the new dates the user has entered, and i need it to stay with the entered information.
I have tried playing around with static members but i have not been able to get it to work.
Here is the button action:
<asp:Button ID = "Calculate" runat = "server"
style="width:40% ; font:15px arial" Text = "Calculate" onclick="Calculate_Click" />
any help on the above would be appreciated, and pls include code in your replies...
Thnks

You should change your default value setters to add
if ($('#FNewDate').val().length() != 0)
To only set the value in case the value coming from server is empty.
Then in your input
<input type="text" id="FNewDate" value="<%=someObject.getSomeDate()%>"/>

popualte textbox from values on screen with javascript

how can I use the values from the code below:
<html:select property="state" >
<html:option value="0">Select State</html:option>
<html:optionsCollection name="InputForm" property="stateList" label="label" value="value" />
</html:select>
to populate a textbox with whatever the selected value is for the state with a javascript onchange event? for example if texas is the selected state I want Texas to be written in the textbox and if I change the value to Colorado I would like Colorado and Texas to both show in the textbox. I am currently getting an undefined value in the textbox. I am using the following javascript code:
function displayState(obj, state) {
var theId = obj.id.substring(obj.id.indexOf('_') + 1);
var text = document.getElementById('text' + '_' + theId);
var textVal = text.value;
var stateSelect = document.getElementById('stateCode' + '_' + theId);
var stateSelectStr = new String(stateSelect.value);
var stateSelectSplit = stateSelectStr.split(',');
var stateSelectValue = stateSelectSplit[0];
var stateSelectLabel = stateSelectSplit[1];
if (stateSelectValue == '51') {
stateSelectLabel = '';
}
if (stateSelectValue != '00') {
textVal = textVal != '' ? eval('text.value=\'' + textVal + ', '
+ stateSelectLabel + '\'')
: eval('text.value=\'' + stateSelectLabel + '\'');
}
}

First off, start using jQuery (or equivalent), it will make your life much easier. Second, why are you using eval? You already have the text element; just build the appropriate string and set the value. See here for an example.
But again, using something like jQuery makes this laughably easy--I can't recommend using a library for simple DOM manipulation like this.
See here for a comparison between raw JS and JQ.

Update 2nd Textbox Based On Popup Calendar Selection

I am using the JavaScript-based popup calendar from dynamic drive named
"Xin's Popup Calendar" and it works perfectly. But, I want to be able to
adjust the date of a 2nd textbox based on the selection.
For example, I want to be able to automatically adjust it to +1 month of
whatever date was selected in the popup. How can I do that?
Here is an example:
<input type="text" name="firstinput" size=20>
<small>Select Date</small>
<p>
<input type="text" name="secondinput" size=20>
<small>Select Date</small>
</p>
If the firstinput date is 3/21/10, I want the secondinput to change to 4/21/10 at the same time.

There are two parts to this: (1) a function to add a month to a data and (2) the change event handler to the textbox. This solution is very specific to the Xin Pop Up Calendar.
function addMonth(d,month){
t = new Date (d);
t.setMonth(d.getMonth()+ month) ;
if (t.getDate() < d.getDate())
{
t.setDate(0);
}
return t;
}
$("input[name='firstinput']").change(function(){
var dt = $(this).val();
var yr = dt.substring(0,4);
var mo = dt.substring(5,7);
var dy = dt.substring(8,10);
var firstDate=new Date();
firstDate.setFullYear(yr,mo-1,dy);
var secondDate = addMonth(firstDate,1);
$("input[name='firstinput']").val(secondDate.getFullYear() + "/" + secondDate.getDate() + "/" + secondDate.getMonth()+1);
});