I have a form. I would like to print what user intputing in this form and insert data into database. But I 'm facing problem:
If I print data in present window, printing is OK, but don't insert into database. Had a error: Form submission canceled because the form is not connected
If I print data in new window, insert database is ok, but don't print user's data.
I have researched two days, but haven't found any resolve.
I used MVC 1 module and 1 template, and use javascript (jqwery)
Example as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form name ="form" method="post" action="index.php?controller=index&action=add" onsubmit="return submitData()">
<input type="text" id = "content" name="content">
<button type="submit">Send</button>
</form>
</body>
<script type="text/javascript">
function submitData() {
// print data
content = '<p>The content is: ' + document.getElementById("content").value + '</p>';
document.body.innerHTML = content;
window.print();
// submit data
return true;
}
</script>
</html>
Related
I have one simple html page with a text field that asks for user's name. i want to save what user enter and on another page i want to retrieve that name and say hello + (user's name).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LocalStorage</title>
</head>
<body>
<form>
<p>Enter your name</p>
<input type="text">
<button type="submit" value="submit">Submit</button>
</form>
</body>
</html>
and the second page is where the data from first page comes (through localStorage).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>secondPage</title>
</head>
<body>
<h1>Hello </h1>
</body>
</html>
thank you.
I'm not sure if this is a homework assignment but this should get you started.
It will involve:
First storing the data into localStorage
Then directing the user over to the second page - most likely through window.location.href.
Then pulling the data back out of localStorage to display there.
Here's a jsfiddle to get you started setting and getting data.
https://jsfiddle.net/em92zbod/
The two main functions are:
window.localStorage.setItem("key", "value");
window.localStorage.getItem("key");
Where "key" is any identifier you want to use for the value.
Here's a suggested approach by using sessionStorage.
However, you can also use localStorage with the same implementation method. The only differences between them is localStorage will keep the data even if you close your browser. Which in this case, saving userName I think it's better to use sessionStorage.
1.html
<form action="2.html" onsubmit="callme()">
<p>Enter your name</p>
<input id="tbName" type="text">
<button type="submit" value="submit">Submit</button>
</form>
<script>
function callme(){
var name = document.getElementById('tbName').value;
sessionStorage.setItem('userName', name);
}
</script>
2.html
<h1 id="welcome"> </h1>
<script>
window.onload = function() {
document.getElementById('welcome').innerText = "Hello, " + sessionStorage.getItem('userName');
};
</script>
Code update
page 1
window.addEventListener("DOMContentLoaded", () => {
document.getElementById("myForm").addEventListener("submit", e => {
const form = e.target;
const name = document.getElementById('tbName').value;
sessionStorage.setItem('userName', name);
})
})
<form action="2.html" id="myForm">
<p>Enter your name</p>
<input id="tbName" type="text">
<button type="submit">Submit</button>
</form>
Page 2
window.addEventListener("DOMContentLoaded", () => {
document.getElementById('welcome').textContent = `Welcome ${ sessionStorage.getItem('userName') || "stranger"}`;
})
<h1 id="welcome"></h1>
get Json data (Showing error - 'Request is not excuted')
How to make a request executed code.
country.js
$("#btn-id").click(function() {
//get data
$.getJSON("https://reqres.in/api/users?page=2",
function(json) {
//Empty div if clicked agian
$("#data-id").html('')
//loop through it
json.data.forEach(function(jd) {
//append data in div
$("#data-id").append(jd.id + "--" + jd.email + '<br>');
})
});
});
HTML FILE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>The jQuery Example</title>
<script src="country.js"></script>
</head>
<body>
<form>
<input type="button" id ="btn-id" value = "Click to Load Data" />
<div id="data-id"></div>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="country.js"></script>
</body>
</html>
get Json data (Showing error - 'Request is not excuted')
How to make a request executed code.
I'm working on a form and as I submit I want to hide the form and show a written success message when I submit it. I want to also be able to reload the page with a hash value.
I made this function, which works but I feel like it'll give me some reload problems as the form appearing again and success message dissapearing. The form tag contains the onSubmit="submissionmMessage()
<script>
function submissionMessage() {
window.location.hash = "#success";
document.getElementById("successMessage").style.display = 'block';
document.getElementById("form").style.display = 'none';
</script>
<div>
<p style="display:none;" id="successMessage"><strong> Success!</strong></p>
</div>
It works for hiding the showing the message but I feel like there could be room for errors?
also if I put in the "window.location.hash = "#success"
and the success url as the url with the #sucess at the end will it be counter-intuitive?
Sample Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#success {
display: none;
}
</style>
</head>
<body>
<p id="demo" class="font-effect-shadow-multiple"></p>
<script>
function submissionmMessage() {
/*
Get Response from SERVER using AJAX.
*/
document.getElementById("success").style.display = "block";
}
</script>
<div id="success">Your Form has bee Submitted.</div>
<form id="form" method="POST" action="#" onsubmit="event.preventDefault(); submissionmMessage();">
<input type="text" name="txt" id="txt" />
<input type="submit" name="submit" />
</form>
</body>
</html>
I'm working on an API App utilizing the Foursquare API. Using my getRequest,
Im getting my results in JSON, which Im displaying in my console.log.
The thing is, I don't know how to parse the JSON data and display what I want on my HTML page.
I'm trying to have the 'name' of the venues displayed, but I don't know how to do it.
P.S: I have a Math.random function on the incoming data from Foursquare, so whatever random venue name that is displayed in my console.log is what I want displayed in my HTML page.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Search</title>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.min.js" type="text/javascript" id="jquery"></script>
<script type="text/javascript" src="apps/app.js"></script>
</head>
<body>
<H1>Hunger Pains</H1>
<p>Search for food cause you cant take it anymore</p>
<!--This is the area your location gets spit out on the html page-->
<p id="demo"></p>
<form id ="search-term">
<!--text entry field-
<input type="text" id="query">-->
<!--Submit button-->
<input id="submit" type="submit" value="submit">
<!--Search results div-->
<div id="search-results"></div>
</form>
</body>
</html>
Jquery:
$(document).ready(function(){
//document.getElementById("submit").disabled = false;
//When you click the submit button it fires off the getRequest.
$(function(){
$('#search-term').submit(function(event){
event.preventDefault();
//getRequest();
myFunction();
});
});
// This is the get request. It has a random function that randomizes the callback data. Once you get the randomizes data, it shows in the console window.
//This function displays three random results based on the myFunction below
function getRequest(){
$.getJSON('https://api.foursquare.com/v2/venues/search?v=20131016&ll=40.7%2C-74&intent=browse&radius=800&categoryId=4d4b7105d754a06374d81259&client_id=C2IEUINHBL2HEVOHIWNO0GGN5EUHK3PGYH03HCZRP2ETA4CF&client_secret=DOLF3UBQZOY5GX2DP3EXBQ5CW4AHEWMNDGRMH0IHJWZBDSIO', function(data){
var random = data.response.venues[Math.floor(Math.random() * data.response.venues.length)];
//showResults();
console.log(random);
});
}
//This is the function that calls getRequest function three times then stops.
function myFunction(){
var myVar = setInterval(function(){getRequest();}, 500);
//clearTimeout(myVar);
setTimeout(function( ) { clearInterval( myVar); }, 1600);
}
});
To get the name from the object you are getting from Foursquare use:
console.log(random.name);
And if you need the url for example use:
console.log(random.url);
Something like this should do it:
$("#search-results").append('<br>' + random.name);
I have one simple html page with a text field that asks for user's name. i want to save what user enter and on another page i want to retrieve that name and say hello + (user's name).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LocalStorage</title>
</head>
<body>
<form>
<p>Enter your name</p>
<input type="text">
<button type="submit" value="submit">Submit</button>
</form>
</body>
</html>
and the second page is where the data from first page comes (through localStorage).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>secondPage</title>
</head>
<body>
<h1>Hello </h1>
</body>
</html>
thank you.
I'm not sure if this is a homework assignment but this should get you started.
It will involve:
First storing the data into localStorage
Then directing the user over to the second page - most likely through window.location.href.
Then pulling the data back out of localStorage to display there.
Here's a jsfiddle to get you started setting and getting data.
https://jsfiddle.net/em92zbod/
The two main functions are:
window.localStorage.setItem("key", "value");
window.localStorage.getItem("key");
Where "key" is any identifier you want to use for the value.
Here's a suggested approach by using sessionStorage.
However, you can also use localStorage with the same implementation method. The only differences between them is localStorage will keep the data even if you close your browser. Which in this case, saving userName I think it's better to use sessionStorage.
1.html
<form action="2.html" onsubmit="callme()">
<p>Enter your name</p>
<input id="tbName" type="text">
<button type="submit" value="submit">Submit</button>
</form>
<script>
function callme(){
var name = document.getElementById('tbName').value;
sessionStorage.setItem('userName', name);
}
</script>
2.html
<h1 id="welcome"> </h1>
<script>
window.onload = function() {
document.getElementById('welcome').innerText = "Hello, " + sessionStorage.getItem('userName');
};
</script>
Code update
page 1
window.addEventListener("DOMContentLoaded", () => {
document.getElementById("myForm").addEventListener("submit", e => {
const form = e.target;
const name = document.getElementById('tbName').value;
sessionStorage.setItem('userName', name);
})
})
<form action="2.html" id="myForm">
<p>Enter your name</p>
<input id="tbName" type="text">
<button type="submit">Submit</button>
</form>
Page 2
window.addEventListener("DOMContentLoaded", () => {
document.getElementById('welcome').textContent = `Welcome ${ sessionStorage.getItem('userName') || "stranger"}`;
})
<h1 id="welcome"></h1>