var document.getElementById("title").value; issue - javascript

Hi I have a form but when it submits, all the fields are blank. What am I doing wrong here?
<form><p>
Remind me about: <input type="text" id="title"><br>
Where: <input type="text" id="where">
Notes: <input type="text" id="notes"><br>
Start Date and Time: <input type="datetime" id="startDate" placeholder="October 13, 1975 11:10:00">
End Date and Time: <input type="datetime" id="endDate" placeholder="October 13, 1975 11:15:00"><br>
<input type="submit" onclick="calendarDemoAdd(this.form)"></p>
</form>
and the Javascript:
var startDate = new Date(document.getElementById("startDate").value);
var endDate = new Date(document.getElementById("endDate").value);
var title = document.getElementById("title").value;
var where = document.getElementById("where").value;
var notes = document.getElementById("notes").value;
var calSuccess = function(message) { alert("Success: " + JSON.stringify(message)); };
var calError = function(message) { alert("Error: " + message); };
function calendarDemoAdd() {window.plugins.calendar.createEvent(title,
where,notes,startDate,endDate,calSuccess,calError);
}

You have failed to give the input elements name attributes.
Only controls with names can be successful.
It is possible (although it would fail to follow the principles of Progressive Enhancement and Unobtrusive JavaScript) to replace the data collection and encoding functionality of the <form> with JavaScript, but there is no sign that the JS you have is doing that.

Looks like name attribute is missing for all the input fields
<form><p>
Remind me about: <input type="text" name="title" id="title"><br>
Where: <input type="text" name="where" id="where">
Notes: <input type="text" name="notes" id="notes"><br>
Start Date and Time: <input type="datetime" name="startDate" id="startDate" placeholder="October 13, 1975 11:10:00">
End Date and Time: <input type="datetime" name="endDate" id="endDate" placeholder="October 13, 1975 11:15:00"><br>
<input type="submit" onclick="calendarDemoAdd(this.form)"></p>
</form>

The actual fix was
function calendarDemoAdd() {
var title = document.getElementById("title").value;
var where = document.getElementById("where").value;
var notes = document.getElementById("notes").value;
window.plugins.calendar.createEvent(title,where,notes,startDate,endDate,calSuccess,calError);
}
The reason is that the variables were populated before the function was run.

Related

Disable Weekends

Hello I wish you could help block weekends with type date
I have type date:
input class="form-control" type="date" id="date1" min="2021-01-01" name="calendario"
This is not my code this is your answer by user: 1444609
code written by: user:1444609
const picker = document.getElementById('date1');
picker.addEventListener('input', function(e){
var day = new Date(this.value).getUTCDay();
if([6,0].includes(day)){
e.preventDefault();
this.value = '';
alert('Weekends not allowed');
}
});
<input id="date1" size="60" type="date" format="MM/DD/YYYY" placeholder="MM/DD/YYYY" />

How do I render a two worded value into the value attribute of an input tag (Express-Handlebars)

So I am rendering the handlebars page with the following code
router.get("/update", function(req, res) {
mysql.pool.query("SELECT * FROM workouts WHERE id = ?",[req.query.id], function(err, rows, fields) {
if (err) {
console.log(err)
} else {
let parsedData = JSON.parse(JSON.stringify(rows))
for (let data of parsedData) {
if (data.lbs == 1) {data.lbs = "lbs"}
else {data.lbs = "kg"}
let formattedDate = (new Date(data.date)).toISOString().split('T')[0];
data.date = formattedDate
data.name = String(data.name)
}
let format = {
input: parsedData
}
console.log("FORMAT", format)
res.render("update", format)
}
})
})
The format variable has the following data in it
FORMAT { input:
[ { id: 48,
name: 'teddy burger',
reps: 22,
weight: 45,
date: '2020-12-08',
lbs: 'kg' } ] }
My handlebars page is below
<h1 id="test123">Update This Entry!</h1>
{{#each input}}
<form class="update-form" name="update" value="update" id="fitness-form">
<input id="hidden-id" value={{this.id}} hidden>
<label for="name">Name</label>
<input id="name2" type="text" value={{this.name}} required><br>
<label for="reps">Reps</label>
<input id="reps2" type="number" value={{this.reps}} required><br>
<label for="weight">Weight</label>
<input id="weight2" type="number" value={{this.weight}} required><br>
<label for="date">Date</label>
<input id="date2" type="date" value={{this.date}} required><br>
<label for="unit">Unit</label>
<input id="unit2" type="text" value={{this.lbs}} placeholder="lbs or kg" required><br>
<input id="submitUpdate" type="submit">
</form>
{{/each}}
When I open the page in the browser though, it seems like anytime I pass in a name that is more than one word, it only grabs the first word and then the second one gets placed outside of the value like in the image below. Any suggestions? Thanks!!
Your value should have quotation marks " and "
value="{{this.name}}"

SOLVED (sloved by creating a new firebase project with a new database )- javascript wont write data in firebase realtime database

i have been trying to store data on firebase using javascript through html input form
this is my html form
i have tried every possible solution but it simply wont write even though the same code worked before on the same database
so my question is what is the wrong with my code and why it suddenly stopped working
<form action="" method="post" id="myform"><br>
<input id="tournumber" type="text" placeholder="tour number" /><br> <br>
<input id="tname" type="text" placeholder="name" /> <br><br>
<input id="arname" type="text" placeholder="email" /> <br><br>
<input id="enname" type="text" placeholder="date" /> <br><br>
<input id="duration" type="text" placeholder="national Id" /><br><br>
<input id="guide" type="text" placeholder="national Id" /> <br><br>
<input id="date" type="text" placeholder="national Id" /> <br><br>
<br><br>
<button id = 'submit' type="submit">Submit</button>
</form>
and this is my js script
function sub()
{
var tournumber= document.getElementById('tournumber').value;
var tname= document.getElementById('tname').value;
var arname= document.getElementById('arname').value;
var ename= document.getElementById('enname').value;
var duration= document.getElementById('duration').value;
var guide= document.getElementById('guide').value;
var tdate= document.getElementById('date').value;
var artype = "test";
var entype = "Guided by a guide";
savedata(tournumber, tname, arname, ename, duration, guide, tdate, artype, entype);
}
function savedata(tournumber, tname, arname, ename, duration, guide, tdate, artype, entype)
{
var tourRef = firebase.database().ref('tours/Available_tours')
.child(parseInt(tournumber))
.set({dayAR:arname, dayEN:ename, duration:duration,
guide:guide, tourDate:tdate, tourName:tname, typeAR:artype, typeEN:entype});
}
I believe that your problem is caused by method="post" in that when you click the Submit button, the browser submit's the form to the new path specified by action="" (which resolves to the same page).
Removing the method="post" and changing the onclick from the <a> to the form's onsubmit handler yields the following code:
<form action="#" onsubmit="return sub(this)" id="myform"><br>
<input id="tournumber" type="text" placeholder="tour number" /> <br><br>
<input id="tname" type="text" placeholder="name" /> <br><br>
<input id="arname" type="text" placeholder="email" /> <br><br>
<input id="enname" type="text" placeholder="date" /> <br><br>
<input id="duration" type="text" placeholder="national Id" /> <br><br>
<input id="guide" type="text" placeholder="national Id" /> <br><br>
<input id="date" type="text" placeholder="national Id" /> <br><br>
<br><br>
<button id="submit" type="submit">Submit</button>
</form>
By passing in the form using return sub(this), you can eliminate many document.getElementById(id) calls and replace them with form[id].
function sub(form) {
var tournumber = form['tournumber'].value;
var tname = form['tname'].value;
var arname = form['arname'].value;
var ename = form['enname'].value;
var duration = form['duration'].value;
var guide = form['guide'].value;
var tdate = form['date'].value;
var artype = "test";
var entype = "Guided by a guide";
savedata(tournumber, tname, arname, ename, duration, guide, tdate, artype, entype);
return false; // tell form to stay on this page
}
Other suggested changes
In your savedata() function, you should return the Promise returned by set() so that you can handle any errors.
function savedata(tournumber, tname, arname, ename, duration, guide, tdate, artype, entype)
{
return firebase.database().ref('tours/Available_tours')
.child(parseInt(tournumber))
.set({dayAR:arname, dayEN:ename, duration:duration,
guide:guide, tourDate:tdate, tourName:tname, typeAR:artype, typeEN:entype});
}
// e.g. savedata(...).then(() => console.log('saved successfully'), (err) => console.error('save failed: ', err))
I'd avoid calling a function with so many arguments as adding or removing data entries could be a pain in the future, and instead opt to pass an object instead.
function sub(form) {
var tournumber = form['tournumber'].value;
var newData = {
dayAR: form['arname'].value,
dayEN: form['enname'].value,
duration: form['duration'].value,
guide: form['guide'].value,
tourDate: form['date'].value,
tourName: form['tname'].value,
typeAR: "test",
typeEN: "Guided by a guide"
};
savedata(tournumber, newData);
return false; // tell form to stay on this page
}
function savedata(tournumber, data)
{
return firebase.database().ref('tours/Available_tours')
.child(parseInt(tournumber))
.set(data);
}
You have to write this information to a specific document with and ID.
For example:
function savedata(SOME_ID,tournumber, tname, arname, ename, duration, guide, tdate, artype, entype)
{
var tourRef = firebase.database().ref('tours/Available_tours/'+SOME_ID)
.child(parseInt(tournumber))
.set({dayAR:arname, dayEN:ename, duration:duration,
guide:guide, tourDate:tdate, tourName:tname, typeAR:artype, typeEN:entype});
}
You can find more about this here: https://firebase.google.com/docs/database/web/read-and-write

How can i update the text of more than one label with the same class name using the input blur event

I am working in a project and i have to update the text of a label when the focus is losed in the input
This is the html part:
<input id="FirstName" name="FirstName" type="text" value="" class="inputName"/>
<input id="MidName" name="FirstName" type="text" value="" class="inputName"/>
<input id="LastName" name="FirstName" type="text" value="" class="inputName"/>
<p class="passengerTitle1">hola</p>
<input id="FirstName" name="FirstName" type="text" value="" class="inputName"/>
<input id="MidName" name="FirstName" type="text" value="" class="inputName"/>
<input id="LastName" name="FirstName" type="text" value="" class="inputName"/>
<p class="passengerTitle1">hola</p>
and the js code of firing the blur event of the inputs is:
$(document).ready(function () {
fullName = '';
$(".inputName").blur(
function (event) {
var name = $(this).val();
fullName += name+ ' ';
$(".passengerTitle1").text(fullName);
}
);
});
I get the following result:
the text of both labels: Phellip E. Summer Edgar B. Thompson
But the expected result is :
for the first label Phellip E. Summer
for the second label Edgar B. Thompson
this is the jsfiddle link:jsfiddle lin
I wonder for a little help because it a very important project and don't want to miss the deadline of the project.
cheers.
As others have proposed solutions by changing the html, I'm proposing a solution to implement this without changing the html (if you want to stick to your current html).
Use .nextAll() and .first() like this:
$(this).nextAll(".passengerTitle1").first().text(fullName);
Implemented on your fiddle: JSFiddle
But you also have another problem, where you are not properly setting the fullName variable.
Again, if you don't want to change the html, you could solve it using .prev() like this:
JSFiddle
You may need to make some changes in your html.
I hope this is what you want to achieve.
$(".inputName").on("blur", function() {
var inputName = $(this).parent(".passengerInfo").children(".inputName");
var outputName = "";
$(inputName).each(function() {
outputName += $(this).val() + " ";
})
$(this).parent(".passengerInfo").children(".passengerTitle1").text(outputName)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="passengerInfo">
<input id="FirstName" name="FirstName" type="text" value="" class="inputName" />
<input id="MidName" name="FirstName" type="text" value="" class="inputName" />
<input id="LastName" name="FirstName" type="text" value="" class="inputName" />
<p class="passengerTitle1">hola</p>
</div>
<div class="passengerInfo">
<input id="FirstName" name="FirstName" type="text" value="" class="inputName" />
<input id="MidName" name="FirstName" type="text" value="" class="inputName" />
<input id="LastName" name="FirstName" type="text" value="" class="inputName" />
<p class="passengerTitle1">hola</p>
</div>
$(document).ready(function () {
$(".inputName").blur(
function (event) {
var titel = getPassengerTitel($(this)); // find the titel element
var fullName = getName(titel); // read Fullname by titel element
titel.html(fullName);
}
);
});
function getName(passengerTitelElem){
var last = passengerTitelElem.prev();
var middel = last.prev();
var first = middel.prev();
var name ='';
if(first.val()) name += first.val() + ' ';
if(middel.val()) name += middel.val() + ' ';
if(last.val()) name += last.val() + ' ';
return name;
}
function getPassengerTitel(e) {
var next = e.next();
if(next.attr('class') == 'passengerTitle1') {
return next;
}
return getPassengerTitel(next);
}

Replace text in form using javascript

I have a form that has several fields. The first field is called subject. What I want to do is disable the ability for the user to type in the field, but it still show, and the text they enter into three other fields show up with spaces between the variables in the first field. Example: In this scenario: "Second_Field: John" "Third_Field: Doe" "Forth_Field: New part" then on first field, subject, it will show: John Doe New Part
Thanks for any help.
You can try the following:
<!-- HTML -->
<input type="text" id="subject" disabled="disabled">
<input type="text" id="field1">
<input type="text" id="field2">
<input type="text" id="field3">
// JavaScript
var fields = [];
for (var i = 1; i <= 3; i++) {
fields.push(document.getElementById("field" + i).value);
}
document.getElementById("subject").value = fields.join(" ");
Try this:
<script>
function UpdateText()
{
document.getElementById("subject").value =document.getElementById("Field1").value + " " + document.getElementById("Field2").value + " " + document.getElementById("Field3").value;
}
</script>
<input type="text" id="subject" disabled="disabled"/>
<input type="text" id="Field1" onchange="UpdateText()";/>
<input type="text" id="Field2" onchange="UpdateText()";/>
<input type="text" id="Field3" onchange="UpdateText()";/>
HTML:
<form>
<p><input id="subject" name="subject" disabled size="60"></p>
<p><input id="Second_Field" class="part">
<input id="Third_Field" class="part">
<input id="Fourth_Field" class="part"></p>
</form>
​
JavaScript:
var updateSubject = function() {
var outArray = [];
for (var i=0;i<parts.length;i++) {
if (parts[i].value !== '' ) {
outArray.push(parts[i].value);
}
}
document.getElementById('subject').value = outArray.join(' ');
};
var parts = document.getElementsByClassName('part');
for (var i=0;i<parts.length;i++) {
parts[i].onkeydown = updateSubject;
}
​

Categories

Resources