I have created two pages, one with a text box to input data that should be stored in Firebase and another that should display that stored data, but i am having issues with some of the data not being stored, and none of the data being displayed on the second page. The HTML for the text box is as follows:
<form>
<div class="post-title">
<input type="text" placeholder="Post Title">
</div>
<div class="post-content">
<textarea type="text" placeholder="Post Content"></textarea>
</div>
<button type="submit" class="submit">Submit</button>
</form>
The HTML for the page that should display the data is:
<div class="result">
<h4 class="postTitle">Paragraph 1</h4>
<p class="postContent">Welcome to my test blog. This is a paragraph.</p>
<div class="postDate">
<p>Date of post: </p>
<p class="postDate2">date</p>
</div>
</div>
The javascript that should transfer data from the text box to my Firebase :
var url = "https://blog-posts.firebaseio.com/";
var firebaseRef = new Firebase(url);
function funct1(event)
{
var title = $("#post-title").text();
var post = $("#post-content").text();
var date = Date();
firebaseRef.push({Title: title, Content: post, Date: date});
event.preventDefault();
}
var submit = document.getElementsByTagName('button')[0];
submit.onclick = funct1;
And the javascript that should retrieve data from my Firebase and display it (Note, both javascript extracts are from the same .js file, i seperated them for readability):
firebaseRef.on('child_added', function(snapshot) {
var message = snapshot.val();
});
$("postTitle").replaceWith(title);
$("postContent").replaceWith(post);
$("postDate2").replaceWith(date);
The Date/Time seems to copy to my Firebase, but if i enter something in either text box and click submit, the data is not stored in my Firebase. Also nothing including the Date/Time is being changed on the page that should display the data.
I think your issue may be fairly straight forward here.
Update your form HTML to this -
<form>
<div class="post-title">
<input id="post-title" type="text" placeholder="Post Title">
</div>
<div class="post-content">
<textarea id="post-content" type="text" placeholder="Post Content"></textarea>
</div>
<button type="submit" class="submit">Submit</button>
</form>
Where you have the following -
var title = $("#post-title").text();
var post = $("#post-content").text();
change to
var title = $("#post-title").val();
var post = $("#post-content").val();
It looks as though you are new to jquery as well, so you may want to also read this to help you understand how to get values, and work with selectors, etc.
Hope this helps!
Related
I am playing around with some HTML and JavaScript with the end goal of creating a simple website that displays the current weather. I haven't used API's before and I have limited knowledge of JavaScript so this might be a very bad question. Can I change the endpoint address based on a user input?
I have written some front-end which displays a simple form.
<section id="weather">
<div id="nav">
<div id="locate">
<div id="container">
<form action="index.js">
<label for="location">Location:</label>
<input type="text" id="location" name="location" required>
<input type="submit" value="Let's Go!">
</form>
</div>
</div>
<div id="output">
<div id="container">
<!-- Output of API -->
</div>
</div>
</div>
</section>
I was thinking that this could run a JavaScript file that gathers the input of the form HTML file and do something like this:
const location = document.getElementById(location)
http://api.openweathermap.org/data/2.5/weather?q=${location}&APPID=API
I tried programming something to do this but as I have limited knowledge of both javascript and API's I keep failing. Before I was a lot of time on this can someone tell me if this is even possible?
By the way I have set-up an API key but I just haven't shown it.
Thanks,
mrt
So this is just a very lengthy way to do it so that you can understand each step
Step 1: First you want to get access to the input element:
const locationInput = document.getElementById("location");
Step 2: Then you want to grab the value of that input element
const locationValue = locationInput.value;
Step 3: Then you'd want to use that value in the URL
const url = http://api.openweathermap.org/data/2.5/weather?q=${locationValue}&APPID=API
function fetchAPIData() {
const locationInput = document.getElementById('location');
const locationValue = locationInput.value;
const url = `http://api.openweathermap.org/data/2.5/weather?q=${locationValue}&APPID=API`
// do the URL Request
}
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('input[type=submit]').addEventListener('click', fetchAPIData);
});
<section id="weather">
<div id="nav">
<div id="locate">
<div id="container">
<form action="index.js">
<label for="location">Location:</label>
<input type="text" id="location" name="location" required>
<input type="submit" value="Let's Go!">
</form>
</div>
</div>
<div id="output">
<div id="container">
<!-- Output of API -->
</div>
</div>
</div>
</section>
A much shorter way would be:
const url = `http://api.openweathermap.org/data/2.5/weather?q=${document.querySelector("#location").value}&APPID=API`;
I'm trying to get the meta title and description from any website I add into the URL field. What am I missing here? If I put something in the URL field and click fetch it nothing appears. When I put say "https://www.espn.com/" for the URL within the JS function it's pulling the whole website into the preview.
What am I missing?
//DISPLAY META
$(document).ready(function() {
$('.seoTitle').on('keyup', function() {
$('.seoTitleNew').text($(this).val());
});
$('.seoMeta').on('keyup', function() {
$('.seoMetaNew').text($(this).val());
});
});
//END DISPLAY META
//GET URL META
function myMetaFunction() {
var url = document.getElementById("seoUrlFetch").innerHTML;
//if you try "https://www.espn.com/" below for url it pulls in the whole page
$.get(url, function(data) {
$(data).filter('meta[property="og:title"]').attr("content");
document.getElementById("seoTitleDisplay").innerHTML = data;
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div>
<span>URL </span><input type="text" id="seoUrlFetch" class="seoURL" placeholder="Enter single URL or paste multiple URLs to fetch data from..." autocapitalize="none"> <button id="fetchURLButton" onclick="myMetaFunction()">Fetch</button>
</div>
<div>
<span>Title </span><input class="seoTitle" type="text" placeholder="Your title..." autocapitalize="none">
</div>
<div>
<span>Meta </span><textarea class="seoMeta" type="text" placeholder="Your meta description..." autocapitalize="none"></textarea>
</div>
</div>
<div>
<div>
<p id="seoTitleDisplay" class="seoTitleNew"></p>
</div>
<div>
<span class="seoMetaNew"></span>
</div>
</div>
It looks like you're setting the innerHTML to the entire returned document.
Based on jquery's documentation, the filter function will not mutate the original argument you pass to it -- it constructs a new jquery object that is filtered (https://api.jquery.com/filter/).
Try the following
const filteredData = $(data).filter('meta[property="og:title"]').attr("content");
document.getElementById("seoTitleDisplay").innerHTML = filteredData;
there is website which has:
<html>
<body>
<form action="/action_page.php">
First name: <div class="col-md-8 col-sm-8 col-xs-6"><strong><input type="text" class="no-style" value="John"></strong></div>
Last name: <div class="col-md-8 col-sm-8 col-xs-6"><strong><input type="text" class="no-style" value="Miller"></strong></div>
Email: <div class="col-md-8 col-sm-8 col-xs-6"><strong><input type="text" class="no-style" value="j.miller#gmail.com"></strong></div>
<input type="submit" value="Send">
</form>
</body>
</html>
Is it possible to scrape data from input value (John, Miller, j.miller#gmail.com) and show it in my page (maybe putting that site into iframe and scrape from it?) or maybe using something like:
// Get HTML from page
$.get( 'http://example.com/', function( html ) {
// Loop through elements you want to scrape content from
$(html).find("ul").find("li").each( function(){
var text = $(this).text();
// Do something with content
} )
} );
I don't know. I am not good with javascript. And there is bonus: input values on every refresh are different. Can I extract somehow data from 100 refresh or something? Thank you for any help!
i will assume that you need to get the data from the input element and then use it somewhere else in your site
you could easily do so using the jquery .val() function
here is some sample code
<form id="my-form">
name: <input type="text" id='test-input'/>
<input type="submit" />
</form>
<script>
var input;
$('#my-form').on('submit', function() {
input = $('#test-input').val();
});
</script>
you could then use the variable anyway you want, whether it is to cache data or for improving user experience
Get the value and var _value = $('#elementId').val(); and use it anywhere on the page $('#elementID').val(_value); or $('selector').text(_value);
I am working on a personal blog website project, and I wanted to implement a simple message board on my index page. Due to the projected site traffic (relatively low) I decided on only using a front-end implementation without linking to a database with the following js and html code:
<section class="message-board">
<div class="title">
<h2>
Leave a message
</h2>
</div>
<textarea class="message" type="text"></textarea><br/>
<input value="submit" type="button" class="submit-btn">
<div class="display-area">
Existing comment:
</div>
</section>
and then the js,
<script>
window.onload=function() {
var displayArea = document.getElementsByClassName("display-area");
var btn = document.getElementsByClassName("submit-btn");
btn.onclick = function() {
var comment = document.getElementsByClassName("message").value;
displayArea.appendChild(comment);
};
}
</script>
My intention was to make my display-area contain whatever was put in textarea via .appendChild when submit is clicked. Sadly, it isn't working as intended-nothing actually happens. I am thinking about potential errors in my js code, but just couldn't figure out anything that would resolve the problem.
Any assistance will be greatly appreciated!!!
getElementsByClassName() returns a collection of elements (note the s in Elements). If you have only one element that matches the class name, you have this element in the first index of the array-like collection.
var displayArea = document.getElementsByClassName("display-area")[0];
var btn = document.getElementsByClassName("submit-btn")[0];
You can also use querySelector(), that uses CSS selectors (like jQuery) and returns a single element:
var displayArea = document.querySelector(".display-area");
In order to append a text node (your variable comment stores a string), use append() instead of appendChild():
displayArea.append(comment);
Two ways this can be done are by calling the JavaScript function on click, or by calling it on form submission.
1) call function onclick:
Wrap your form within a form tag, and call your JavaScript function based on the element Ids.
Note the showInput function is being called onclick when the button is clicked.
function showInput() {
console.log('showInput called...')
var userInput = document.getElementById("userInput").value;
var display = document.getElementById("display");
display.innerHTML = userInput;
}
<section class="message-board">
<div class="title">
<h2>
Leave a message
</h2>
</div>
<form>
<textarea class="message" type="text" id="userInput"></textarea><br/>
</form>
<input type="submit" onclick="showInput();">
<div class="display-area">
Existing comment:
</div>
<p><span id="display"></span></p>
</section>
Here's a jsfiddle, with the same code as above: http://jsfiddle.net/ethanryan/94kvj0sc/
Note the JavaScript in the jsfiddle is being called at the bottom of the Head section of the HTML.
2) call function on form submit:
You can also do this by calling the JavaScript function on the submission of the form, instead of on the click of the button. However, since this form uses a textarea, hitting return will add a line break to the text, and not submit the form, so the button still needs to be clicked for the function to be called.
function showInput() {
console.log('showInput called...')
event.preventDefault()
var userInput = document.getElementById("userInput").value;
var display = document.getElementById("display");
display.innerHTML = userInput;
}
<section class="message-board">
<div class="title">
<h2>
Leave a message
</h2>
</div>
<form onsubmit="showInput()">
<textarea class="message" type="text" id="userInput"></textarea><br/>
<input type="submit" value="Submit">
</form>
<div class="display-area">
Existing comment:
</div>
<p><span id="display"></span></p>
</section>
Note the event.preventDefault() in the form, since the default behavior of forms is to submit data to a backend database.
jsfiddle: http://jsfiddle.net/ethanryan/qpufd469/
3. appending instead of replacing text
Finally, my examples above used innerHTML to replace the userInput text. If you want to append instead of replace the text, you can use insertAdjacentHTML to add the text to the end, and then append a linebreak to it. Finally, you can reset the form.
function showInput() {
console.log('showInput called...')
event.preventDefault()
var userInput = document.getElementById("userInput").value;
var display = document.getElementById("display");
var theForm = document.getElementById("theForm");
var linebreak = document.createElement("br");
display.insertAdjacentHTML('beforeend', userInput);
display.appendChild(linebreak);
theForm.reset();
}
<section class="message-board">
<div class="title">
<h2>
Leave a message
</h2>
</div>
<form onsubmit="showInput()" id="theForm">
<textarea class="message" type="text" id="userInput"></textarea><br/>
<input type="submit" value="Submit">
</form>
<div class="display-area">
Existing comment:
</div>
<p><span id="display"></span></p>
</section>
jsfiddle: http://jsfiddle.net/ethanryan/x4hq0Lzp/
I have Created calculator project. I have only two pages. Now my question how to pass input field value to another page? trying too many ways its Not Working.
What to do to pass input fields values from one page to another page?
My input fields code Looks Like
<p class="pull-right">DPA Minimum Buyer Contribution<br /></p>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6" style="padding-right:1%">
<input type="text" id="txtLocationContactName5" class="txt"/>
</div>
<div class="col-md-3" style="padding-left:0%">
Another page name default_results.php I have created input fields
<div class="col-md-5 padding-rht">
Minimum Buyer Contribution
</div>
<div class="col-md-2 padding-Zero">
<input type="text" id="txtCustomerName3" class="txt" />
</div>
I have tired in jQuery script
<script>
$(function () {
$("#btnQueryString").bind("click", function () {
var url = "default_results.php?id=" + encodeURIComponent($("#txtLocationContactName5").val()) + "&technology=" + encodeURIComponent($("#txtCustomerName3").val());
window.location.href = url;
});
});
</script
but Not working so how to pass value one page to other page ?
You're making life hard for yourself! A simple form is needed to help you pass data to another page :). See here for info on html Forms - http://www.w3schools.com/html/html_forms.asp
Here is a simple example for you:
<form action="page_2_link" method="POST">
<input type="text" name="field1" value="easy">
<input type="submit" name="button1" value="Submit">
</form>
Then on the second page you can do this to retrieve the form data:
<?php
$blah = $_POST['field1']; // this now has the posted fields value
?>
I have given the second page answer in PHP as you have used this as a tag for this question, so I hope you are using this or my answer won't work.