Saving data across sessions-PHP - javascript

If one wanted to have a review section on there website how do you go about saving the information so that anybody who comes across the site can see the review of the product?
Example:
<form method="post" action="postToThisPage.php">
<input type="text" name="review" id="productreview">
<input type="submit" id="submitbtn value="Submit Review">
</form>
<h1>Product Review</h1>
<p id="review_2></p>
var button = document.getElementById("submitbtn"),
review = document.getElementById("productreview").innerHTML;
button.addEventListener("click",function(){
var review = document.getElementById("productreview").innerHTML;
document.getElementByID("review_2").innerHTML = review;
})
I would like to be able to save the information that will be put into the so that if anybody came across the site they could see it. How do I save the information that is posted?
I think the answer lies in PHP but I am still not sure how to go about it.

Database or save the info to files.
As for how to do that...teaching you how to build a comments/review system from "Hello World" to completion is a bit beyond the scope of any answer I'm going to be typing up on here. But a tutorial is here.
A simple google search for "how to build a PHP review system" reveals many more.

Related

Saving User Output to a Text file

I am wanting to save user input to a text file that will be stored in my local folder directory with filename as date-time(hh-mm-ss).txt So once the user clicks the "save: button, it'll save the contents to that date-time(hh-mm-ss).txt file
I am learning, so please show me with a little explanation, thank you
Current html:
<form>
Subject:
<input type="text" id="subject" size="20">
<br>
Description:
<textarea id="newDescription" rows="4" cols="50" required spellcheck="true"></textarea>
<br>
Tags:
<input type="text" id="tags" size="20">
<br>
<input type="button" value="Save"
onclick="addDescription(this.form);">
</form>
Current external JS:
// This function accepts user input.
function addDescription(form) {
document.getElementById("info").innerHTML =
form.elements["subject"].value + "<br>" +
form.elements["newDescription"].value + "<br>" +
form.elements["tags"].value + ".";
form.reset();
form.elements["subject"].value
form.elements["newDescription"].value
form.elements["tags"].value;
} // end addDescription
Also, if anyone has a better idea on how to make the appearance of the portion of the html look better on the webpage because as of now the label and text boxes look crushed together!
JavaScript on the client side (in the browser) can't read or write files (imagine how dangerous that would be?).
To write a file you'd need server side technology such as NodeJS (if you want to stick with JS). The client side will need to send the data to your backend (NodeJS).
Instead of giving you copy & paste code, I'll give you direction on how to approach the problem, and resources that will get you there:
Set up a backend with NodeJS. Easiest is to use Express:
https://expressjs.com/
To write files with your backend you can use plain NodeJS. Learn
how to do that here.
Build your form correctly by learning from boilerplate code. A good
framework for building out neat HTML and CSS might be Bootstrap,
or Tailwind.
Post the user's data to your NodeJS backend from your form using the
fetch API.

Is there a good way to display collected data to the user in HTML or javascript and still keep the data?

I am trying to pick up some user data from a HTML page by having the user type it in. I want to retain the data, (they are ID numbers of sorts) display it back to the user on any subsequent section they go to (currently different href sections on one page), collect more data from them and eventually present the data to the user as a review. I thought this would be a little like HTML “Hello World”, but it’s proving to be more than that. . I found out that document.write() is the wrong way to go about it, but no good answer on how to accomplish this. Collecting this data is the first thing I need from the user, and then I will collect more data, so I have to be able to get data and let the user move around.
I have spent a day and a half on this site and others, pulled out two books (yes, paper!) looking for answers, but not reaching a usable solution. Nothing seems to work. When complete, I want to give the user a chance to correct the data before submitting, most likely to post at the moment, but would be a server if implemented.
Here’s how I am collecting, simplified as much as possible:
<form name="getNPIandTIN">
<p> Please enter NPI and TIN</p>
Provider NPI: <input type="number" name="Provider_NPI">
<p>
Provider TIN: <input type="number" name="Provider_TIN">
<input type="submit" value="Submit NPI and TIN">
</form>
...
<p id="demo"></p>
Inner HTML action
<script> document.getElementById"demo").innerHTML=
document.getNPIandTIN.Provider_NPI.value
</script>
No error messages; things just don't work. I want to ask the user to enter field 1, have them type it in, click for acceptance, store the data in a variable and echo the information back to them. Sounds pretty simple, but it isn't.
The form is going to get in your way, you don't need it unless you want to post the data somewhere. Since you just want to grab the data directly from the input fields and store it yourself you can just do something like this:
<div>
Provider NPI: <input type="number" id="providerNPI" name="Provider_NPI" value="">
<br>
Provider TIN: <input type="number" id="providerTIN" name="Provider_TIN" value="">
<br>
<button onclick="captureNumbers()">Submit NPI and TIN</button>
</div>
<p id="demo"></p>
<script>
function displayNumbers() {
// get the stored values and show them to the user
var providerNPI = sessionStorage.getItem('providerNPI');
var providerTIN = sessionStorage.getItem('providerTIN');
document.getElementById("demo").innerHTML = "NPI: " + providerNPI + ", TIN: " + providerTIN;
}
function storeNumbers(numbersObject) {
// store the values locally so you can access them wherever you need them
sessionStorage.setItem('providerNPI', numbersObject.providerNPI);
sessionStorage.setItem('providerTIN', numbersObject.providerTIN);
}
function captureNumbers() {
// first get the values from the input fields as a javascript object so you don't have to pass a ton of individual variables
var providerNumbers = {};
providerNumbers.providerNPI = document.getElementById("providerNPI").value;
providerNumbers.providerTIN = document.getElementById("providerTIN").value;
// then pass the object variable to the storage function
storeNumbers(providerNumbers);
// then call the display function
displayNumbers();
}
</script>
There are many different ways, you can use ajax to save all data to a database and show them to user when ever you want.
Or you could use localStorage to save the data temporarily and save them later in certain circumstances...

How to get a DIV element from an external webpage in HTML file?

Apologies in advance if this question has been asked earlier. I did find some similar questions on web but I couldn't figure out the answer still. You can say I have never dealt with anything beyond basic HTML. So any help would be appreciated.
I have a HTML file (Say text.html) only for personal use. In the file, there will be an input box for entering text and a submit button. I want that if I clicks on submit, it opens a particular hyperlink from an external webpage based on the input text. I guess it's like "I am feeling Lucky" of Google.
Example: If the user enters "Test" and clicks on Submit, it should open the second result from the page "https://www.google.com/search?q=test"
Here is my HTML:
<!DOCTYPE html>
<html>
<body style="background-color:beige">
<h1 style="text-align:center"><font size="14">Test</font></h1>
<style type="text/css">
</style>
<form id="form">
<div align="center" style="vertical-align:bottom">
<input type="text"
value="Test"
id="input"
style="height:50px;width:200px;font-size:14pt;">
</div>
</form>
<TABLE BORDER="0">
<TD><button class="button" id="button01">SUBMIT</button></TD>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button01').click(function(e) {
var inputvalue = $("#input").val();
window.open("https://www.google.com/search?q="+inputvalue);
});
</script>
Also, here is the example of the div element from the page on which the hyperlink I want to open is on:
<div id="XYZ" class="contentEditValue" style="float:left;width:180px;">
2nd Result
</div>
I have read that it can be achieved with PHP or Jquery and all but they are not something I have ever worked on. Thank you very much in advance for any help!
Appreciate any other alternatives as well.
You shouldn't be able to do that because of security. If that (reading content from iframes, other browser windows...) would be possible, an attacker could add JS keylogger to your internet banking login or read your messages on Facebook. CORS (https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) is used to block these requests and if the website doesn't say explicitly that you are allowed to do something with its content, most browsers won't allow you that.
You have are missing a }); to close the ready() function
<script type="text/javascript">
$(document).ready(function(){
$('#button01').click(function(e) {
var inputvalue = $("#input").val();
window.open("https://www.google.com/search?q="+inputvalue);
});
});
</script>
Here's a basic example of how to do this in PHP.
Taking JavaScript/JQuery out of the picture, let's just say you have a basic form:
<form>
<input type="text" value="Test" name="input">
<input type="submit">
</form>
Without specifying action or method attributes on the <form> tag, the form will make an HTTP GET request to the URL of the page it is on, so for this example the PHP code will be on the same page as the form. Here's a more detailed description of sending form data if you're interested.
Now that you have a way to pass the input to the PHP script*, there are three basic parts to this problem.
Make a request to the page you want with a query string including your input
http_build_query is an easy way to construct a properly encoded query string to use with your request. For this example we'll use file_get_contents to make the request. There are other ways to do it, including cURL, but let's keep it simple.
$query = http_build_query(['q' => $_GET['input']]);
$page = file_get_contents('http://www.example.com/?' . $query);
I'm not using Google for this example because it's a bit more complicated to find the right links in the response and follow them. (Partially because they don't really want you to do it that way.)
Find the link you want in the response
Don't try to find the link in the response with regex. You'll have problems with it, come back to Stack Overflow to try to solve them, and people will tell you that you shouldn't be using regex, so just skip that part and use a DOM parser.
$doc = new DomDocument;
$doc->loadHTML($page);
$links = $doc->getElementsByTagName('a');
$url = $links[0]->getAttribute('href');
I used getElementsByTagName() to find links, but if the page is more complex an xpath query will work better. Also, I used the first link ($links[0]) because example.com only has one link. $links[1] would get you the second link if it existed.
Follow the link
header("Location: $url");
exit;
If everything goes well, you'll end up where you want to be. But there are a lot of things that can go wrong. If you're requesting a resource that you have no control over, it can change at any time without any advance warning to you, so your code that finds the link may stop working. You may get blocked from making requests. Scraping links from sites like this violates the terms of service on many sites, so check that out beforehand. You may find that the site offers a web API, which should be a much better way to access its content than this.
*You don't really need a form for this; you can just pass the input parameter in the URL to your page.

Pass a value along with .innerHTML

I am trying to build a website that has a discussion forum using django. I want users to be able to post new comments or reply to other user's comments. I have it so when they click the reply button, a new text area pops up
HTML
<button onclick="myFunction({{forloop.counter}})">Reply</button>
<div id="{{forloop.counter}}"> </div>
Javascript
function myFunction(x)
{
document.getElementById(x).innerHTML="<form action='' method='post'> {% csrf_token %} <textarea id=reply_body name=reply_body value={{reply_body}}> </textarea> <input type=submit> </form> ";
}
....What I want to do is pass the text of the body to my views so that I can know which comment the reply was to. However, I can't pass the textbody into the .innerHTML= ... Whenever I try to it just says that nothing is there. Is there something I'm missing here? Or an easier way to do this? Any help would be appreciated. Let me know if I should post more code or describe anything in greater detail.
Do you not mean
<textarea id=reply_body name=reply_body >{{reply_body}}</textarea>

Comment reply procedure using jquery and php?

I have Commenting system in my app. For a single video entry anyone can post a comment and someone else can post reply to that comment and replies, cannot have thier further reples, similar to StackOverflow is doing (1 Answer, and thier 1 or more replies).
I want the similar functionality what SO has, Let's I have the following HTML
<div class="comment" id="comment-908">
First comment
</div>
<div class="reply">
<div id="reply-909>
reply 1
</div>
<div id="reply-910>
reply 2
</div>
<div id="reply-911>
reply 3
</div>
</div>
<form id="reply-form">
<textarea id="replycomment" name="replycomment"></textarea>
<input type="submit" name="submit-reply" value="add reply" />
</form>
Now above HTML is a sample which I have created, When someone will click on "add reply" button then I am using jquery to post there reply.
Now I want to know that there will be multiple comment and multiple add reply forms. So who clicks on which button and for which comment someone wants to post a reply, how will i know that?
The above HTML is not in correct way, please suggest me the correct HTML flow which I can use and how to work with jquery?
now I want to know when soe
Change the HTML form to something similar first:
<form class="reply-form" action="url/to/submit/123456" method="post">
...
</form>
The reason behind this is, you cannot have same id for more than one element, so, to simplify the problem, you can just make all reply form to be in class reply-form (which is straightforward). Adding the form action with the id is also a good practice so that even your client don't have javascript/ajax enabled, it can still functional when clicking on the submit button.
And then, the rest of the work would be (suppose your form is ajax submit):
$(".reply-form").each(function(){
var form = $(this);
var submitUrl = form.attr("action");
$("input:submit", form).click(function(){
// implement the submit logic here.
});
});

Categories