I am trying to access the input of a questionnaire but document.getElementById ("something"). value is returning an empty string.
This is the file submit_event.html
<!Doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="js/jquery.js" type="text/javascript" language="javascript"></script>
<script src="js/submit_event.js" type="text/javascript" language="javascript"></script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>
<script src="js/app.js" type="text/javascript" language="javascript"></script>
<script>
$(function(){
$("#header").load("header_organization.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
<div id="header"></div>
<!-- Submit form -->
<div class="form">
<form class="event-form">
<input class="normal" id="title" type="text" placeholder="title"/>
<input class="normal" id="date" type="date" placeholder="date"/>
<input class="small" id="hour" type="text" placeholder="hour"/>
<input class="small" id="place" type="text" placeholder="place"/>
<textarea id="brief_description" placeholder="brief description" rows="2" ></textarea>
<textarea id="detailed_description" placeholder="detailed description" rows="6" ></textarea>
<input class="normal" id="contact_email" type="text" placeholder="contact email"/>
<input class="normal" id="contact_phone_number" type="text" placeholder="contact phone number"/>
<a class="standard_text">Upload a cover image </a>
<input class="normal" id="imageUrl" type="file" name="pic" accept="image/*"/>
<button id="publish_button">publish </button><br>
<button id="cancel_button">cancel</button>
</form>
</div>
<div id="footer"></div>
</body>
</html>
This is the file submit_event.js [UPDATED]
$(document).ready(function() {
//Load the header and executes onHeaderLoad()
$("#header").load("header_organization.html", onHeaderLoad);
});
//FUNCTIONS -- FUNCTIONS -- FUNCTIONS -- FUNCTIONS -- FUNCTIONS
//Executed after the header is loaded
function onHeaderLoad(){
//Check if the log out button is pressed.
checkSignOutButton();
//Assign username on header
assignUsernameOnHeader();
//Check if the publish button is pressed
checkPublishButton();
}
//Check if the log out button is pressed.
function checkSignOutButton(){
var signoutButton = document.getElementById("logout_button");
signoutButton.onclick = function(){
firebase.auth().signOut().then(function() {
window.location = "login.html";
}, function(error) {
alert(error);
});
}
}
//Check if the publish button is pressed
function checkPublishButton(){
var publish_button = document.getElementById("publish_button");
publish_button.onclick = postNewEvent();
}
//Assign username on header
function assignUsernameOnHeader(){
//Check if a user is logged in.
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
var username = document.getElementById('username');
var username_obtained;
//Get the name of the user.
if (user!=null) {
username_obtained = user.displayName;
} else {
alert("Something went wrong.");
}
//Assign it to the header.
username.innerHTML = username_obtained;
//If the user is not logged in,
//returns it to the login page.
} else {
window.location = "login.html";
}
});
}
//Post a new event into the firebase database
function postNewEvent(){
//Check if a user is logged in.
firebase.auth().onAuthStateChanged(function(user) {
//Declare firebase data-base
var database = firebase.database();
//Get user's id
var user_id = firebase.auth().currentUser.uid;
//Get user's total event created counter
return database.ref('users/' + user_id).once('value').then(function(snapshot) {
return snapshot.val().total_event_created;
}).then(function(counter) {
//Increase the total_event_counter by one
var counter = counter +1;
database.ref('users/'+user_id+'/total_event_created').set(counter);
//Get input from form
var title = document.getElementById("title").value;
console.log('title', title);
var date = document.getElementById("date").value;
var hour = document.getElementById("hour").value;
var place = document.getElementById("place").value;
var brief_description = document.getElementById("brief_description").value;
var detailed_description = document.getElementById("detailed_description").value;
var contact_email = document.getElementById("contact_email").value;
var contact_phone_number = document.getElementById("contact_phone_number").value;
var imageUrl = document.getElementById("imageUrl").value;
//Post event into firebase database
database.ref('events/' + user_id + '/' + counter).set({
title: title,
date: date,
hour: hour,
place: place,
brief_description: brief_description,
detailed_description: detailed_description,
contact_email: contact_email,
contact_phone_number: contact_phone_number,
imageUrl: imageUrl
});
});
});
}
The line that says console.log ('title', title) of the postNewEvent () function is the one that returns the empty string. And that in that place of the program where I should receive the input values.