How do i save entered/ inputted text using JavaScript/ html.
What do I want:
Name or code etc to be entered in a box (prompt box eksample) and then I want it to be displayed/ printed on the page and I want it to remain there so other people that visit can see it.
What I have:
I have code that shows a prompt box where you can enter text then displays it in green. However what i want is for the entered text to remain on the website for others to see...
function mobCode() {
mobCode = prompt("Insert Code", "Code here");
document.getElementById("mC").innerHTML = mobCode;
document.getElementById("mC").style.color="green";
}
<p id="mC"> Mob Code </p>
<button type="button" onclick="mobCode()"> Click to Add </button>
What you will probably have to do is write a script that will send the entered input to a database you build which can store that information,and then have your js access the database to display it in a certain area of your page.
Check out this Q & A one of the answers is a nice article to help explain the idea behind it: Send data from javascript to a mysql database
If you want to deal easier with persistence of the data, instead of setting up database and using server side script you can look at Facebook's Parse. The free plan is quite usefull for small projects. There is a JavaScript SDK that can be used directly from your javascript code.
Also you can view statistics from the Parse dashboard.
Here is some saple code for example:
// Create a new Parse object
var Post = new ParseObject("Post");
var post = new Post();
// Save it to Parse
post.save({"title": "Hello World"}).then(function(object) {
alert("Yay! It worked!");
});
Related
I have html and css code for a basic quiz template. I want to give the user the ability to make their own custom quiz.
Example: I have created my own math quizzes, science quizzes, etc, that the user can take. I am looking for the ability that Users can make their own personal quiz.
You don't append users input to your code. You should have your quiz as a data and let the user update the data by adding their quiz.
The structure of a form looks like this:
<form method = 'post' action='./handleSubmission/'>
<label>Question 1: </label>
<input type='text' class='question' name='question1'>
<label>Answer 1: </label>
<input type='text' class='answer' name='answer2'>
<label>Question 2: </label>
<input type='text' class='question' name='question2'>
<label>Answer 2: </label>
<input type='text' class='answer' name='answer2'>
<button>Submit</button>
</form>
(You can find all the different input types here. You might want another type for multiple choice questions.
When the user clicks on submit, the default behaviour is that the content of the form will be sent as an http request to the action url. if you set post as method, the method will be POST. If you set get as method, the method will be GET.
Now, in order to do something useful with it, there needs to be a server-side script at './handleSubmission/' or whatever url you put in here, that can read the sent data and upload it to some place where you store the data for your quizzes. This can be either a database or a repository containing some files.
I'd go for json files. Because json files can very easily be decoded and used in any web scripting language.
In PHP for example you'd get the content of the form through a special array called $_GET (or $_POST depending on the method).
You'd then have access to 'question1' with $_GET['question1'].
You'd then have to find a way to put that data into a json file.
To use the content of the json files, you can either use a backend script or a frontend script like javascript.
Are you already using a scripting language for the backend such as PHP or Python? Or do you focus on frontend?
If you want to focus on javascript and frontend, this is the alternative:
<form>
//...
<button id='btn-submit'>Submit</button>
</form>
As you can see, i ommited action and method because in this alternative we don't want to send the form to the server. What we'll do is, when the button is clicked, we'll capture the content of the form without refreshing the page, and then send it a Backend-as-a-service like Google Firebase.
const submitButton = document.querySelector('#btn-submit');
submitButton.addEventListener('click', (e) => {
/* important! prevents the default behaviour which is to submit the form */
e.preventDefault();
const data = [];
/* do stuff here to retrieve the data from form like: */
const questionInputs = document.querySelector('.question');
const answerInputs = document.querySelector('.answer');
for(let key in questionInputs){
data[key] = {
question: questionInputs[key].value;
answer: answerInputs[key].value;
}
}
sendToFirebase(data);
});
You'd then have to write the sendToFirebase function.
Firebase requires making an account, starting a project by giving a name etc. Then it gives you the code to put in your app and you can read the documentation about how to upload data to the Realtime Database.
I strongly prefer the first option however. Because i think in this case the Firebase Realtime Database would be a bit cumbersome to use compared to just setting up a small backend script that generates json files.
As a follow-up to my last question, I have run into another problem. I am making a project on google homepage replica. The aim is to show search results the same as google and store the search history on a database. To show results, I have used this javascript:-
const q = document.getElementById('form_search');
const google = 'https://www.google.com/search?q=';
const site = '';
function google_search(event) {
event.preventDefault();
const url = google + site + '+' + q.value;
const win = window.open(url, '_self');
win.focus();
}
document.getElementById("s-btn").addEventListener("click", google_search)
To create my form, I have used the following HTML code:-
<form method="POST" name="form_search" action="form.php">
<input type="text" id="form_search" name="form_search" placeholder="Search Google or type URL">
The terms from the search bar are to be sent to a PHP file with the post method. I have 2 buttons. Let's name them button1 and button2. The javascript uses the id of button1 while button2 has no javascript and is simply a submit button.
The problem is that when I search using button1, the search results show up but no data is added to my database. But when I search using button2, no results show up( obviously because there is no js for it) but the search term is added to my database. If I reverse the id in javascript, the outcome is also reversed. I need help with making sure that when I search with button1, it shows results and also saves the data in the database. If you need additional code, I will provide it. Please keep your answers limited to javascript, PHP, or HTML solutions. I have no experience with Ajax and JQuery. Any help is appreciated.
Tony since there is limited code available so go with what you had stated in your question.
It is a design pattern issue not so much as so the event issue.
Copy pasting from Wikipedia "software design pattern is a general, reusable solution to a commonly occurring problem within a given context in software design. It is not a finished design that can be transformed directly into source or machine code. Rather, it is a description or template for how to solve a problem that can be used in many different situations. Design patterns are formalized best practices that the programmer can use to solve common problems when designing an application or system."
So here is how things play out at present;
forms gets submitted to specific URL i.e. based on action attribute
Requested page gets Query sting in php and lets you play around with it
then from there on .....
3. either you get results from database and return response
4. or you put search request into database and return success response
Problem statement
if its 3 then search request is not added to database if its 4 then results in response to search request are not returned.
Solution
you need to combine both 3 and 4 in to one processing block and will always run regardless of the search query is.
So our design pattern could use mysql transaction so whole bunch of queries would run a single operation example
$db->beginTransaction(); // we tell tell mysql we will multiple queries as single operation
$db->query('insert query');
$results= $db->query('search query');
$db->commit(); // if we have reached to this end it means all went fine no error etc so we commit which will make database record insert query into database. If there were errors then mysql wont record data.
if($results) {echo $results;} else {echo 'opps no result found';}
slightly more safe version
try {
$db->beginTransaction(); // we tell tell mysql we will multiple queries as single operation
$db->query('insert query');
$results= $db->query('search query');
$db->commit(); // if we have reached to this end it means all went fine no error etc so we commit which will make database record insert query into database. If there were errors then mysql wont record data.
if($results) {echo $results;} else {echo 'opps no result found';}
} catch (\Throwable $e) {
// An exception has been thrown must rollback the transaction
$db->rollback();
echo 'oho server could not process request';
}
We have effectively combined two query operation into one always recording into database and always searching in database.
Basically I want the ff. done:
User inputs a text in my text field. If his text matches a text in my "list," he is sent to a certain URL once he hits the submit button.
I found a similar code on this site but his is just one specific text value. [ Get input text field from HTML into JavaScript and go to URL ]
I want mine to determine the user's text input from a list I provide. My list will have a lot of texts/urls and it will continue to grow, so manually inputting values into the script won't work for me.. I want to be able to edit the list (possibly in an admin panel or something?) instead of the js code.
Example:
input text: aaaa, go to URL1
input text: mmne, go to URL2
input text: lhfj, go to URL3
input text: tigf, go to URL4
input text: gred, go to URL5
Can anyone help me with this please? Thanks!
Hope this helps you
var Something =$("#TextBoxID").val();
if(Something == "aaaa")
{
window.location.href = 'URL1'; //Will take you to URL1
}
......
......
if you want to configure the list on an admin console you need to have some kind of server side technology like php (or node.js if you want to keep using javascript). You need to think of where this data will be stored. A possibility would be fetching the list of text/url pairs using ajax (e.g. with jQuery) and storing the data in some database or in your case also a plain text file probably would suffice. The functionality you are looking for is not possible with plain HTML and JavaScript on cient side.
Use a function like this, if you store your URLs on the client side (HTML/JS page):
function determineAndGoToURL(text) {
var url = "#";
switch(text) {
case "aaaa":
url="www.google.com";
break;
case "bbbb":
url = "www.bing.com";
break;
default:
url = "www.yahoo.com";
break;
}
window.location.href = "http://" + url;
}
If you have an updated list of URLs on the server side, get them from server-side to client side, and iterate over them with a for statement.
I'd suggest, you'd get them from the server as JSON, and use JSON.parse(text) to create an object out of them, and then iterate.
I am in the process of creating a simple webapp for which the user wouldn't have to input his credentials each time he opens the website (no possibility to save the password). I managed to find the form's fields and submit action and it is possible through Crome's console to login when the following lines are submitted.
document.getElementById('zonePwd').value="Password"
document.getElementById('zoneId').value="Id"
GInterface.traiterEvenementValidation()
Now, on my webapp, I'd like to know if it would be possible to do the same thing using strings after the user fills a dialog with both information.
Be sure to say so if I'm not clear enough
Thanks
PS: I'm very new with JS
I recommand you to create a javascript function like :
function setCredentials(id, pass)
{
document.getElementById('zonePwd').value=pass;
document.getElementById('zoneId').value=id;
GInterface.traiterEvenementValidation();
}
And then from your app code
String id = "myid"; //Get val from the dialog
String pass = "mypass"; //Get val from the dialog
webview.loadUrl("javascript:setCredentials('"+id+"','"+pass+"')");
Hope it helps ;)
I'm trying to create a link of drop down list for the Bible on my webpage, I'm new to this thing. What I want is to do is to be able to select or ask the user to input the verse that they want to go to and then click Submit button then take that to the section of the Bible. For instance, if the user input Mathew 1: 2-10, this should take them to that section of that line of the Bible verse. How do I start doing this? and is Javascript and Jquery even the correct script to use or I need to use other programming language?
Thank you.
If you are planning to store the Bible text in a data base on a server, then you would need two programming languages: one for the server and one for the client (browser). JavaScript (with or without jQuery) would be a good tool for the client. Alternatives would be ActionScript (Flash) or a Java applet, but I would not recommend either of them for this.
On the server side, it completely depends on the nature of the server. Probably the most common combination is PHP and MySQL, although there are lots of other possibilities. For instance, you could store the data in XML files on the server and use XSLT to format the results for display in HTML on the client. That's the approach taken by tanach.us (for the Hebrew Bible).
Intrigued by such a task I was wondering. Yes it can be done, but don't just wave away #Ted his comment. It will indeed be a better option to choose for a database application.
But yes, if you don't mind the work and just use it on a small scale, it is possible to create a javascript based application to serve your pages.
You could use an iframe to serve your pages. With creating a selection box that populates a second one, it is possible to make an acceptable application. The pages are collected in javascript objects and served. In this example the domain of w3schools is used.
var Mathew = {
verses: ["verse2_1", "verse2_2", "verse2_3"],
verse2_1: "html/html_iframe.asp",
verse2_2: "tags/tag_select.asp",
verse2_3: "jquery/default.asp"
}
The first selection box will contain a hand coded option list
<select name="book" id="book">
<option value="choose">Please choose</option>
<option value="Mathew">Mathew</option>
<option value="John">John</option>
</select>
The second option list is automatically populated with the help of the javascript object.
function populateSecondSelect(book) {
if (book == "choose") {
$("#verses").children().remove();
$("#verses").append("<option>choose a book first</option>");
$("button").prop("disabled", true);
return;
}
$("button").prop("disabled", false);
var obj = eval(book);
$("#verses").children().remove();
$(obj.verses).each(function () {
$("<option/>", {
name: this,
id: this,
value: this,
text: this
}).appendTo("#verses");
});
}
With the second selection made, the button can be clicked to serve the page:
function fetchVerse() {
var book = $("#book").val();
var verse = $("#verses").val();
var url = baseUrl + eval(book + "." + verse);
$("#frame").attr("src", url);
}
The whole thing is working in a fiddle: http://jsfiddle.net/djwave28/nEqeK/4/
It is fun, but a database for a whole bible is better ..