I know that you can write to the current HTML document, but I want to write to another html file.
For example:
I have 2 files, one is index.html, and the other is completedsurvey.html
I want to write something to the completedsurvey.html from my index.html file. Is there a way
to do this that is supported in most browsers?
So for the first solution:
Assuming you'd want to display "username" and "summary" on successful submission of the form.
This isn't an exact solution, just something you can use to get the concept.
index.html
<form>
<input type='text' id="username">
<input type='text' id="summary">
<button type="button" id="process-form">
</form>
<script>
document.getElementById('process-form').addEventListener('click', (eve)=>{
var uname = document.getElementById('username');
var summ = document.getElementById('summary');
localStorage.setItem('uname', uname);//saving the data in local storage
localStorage.setItem('summ', summ);
//redirect to next page...
});
</script>
surveycomplete.html
<!doctype>
.
.
<div>
<h1 id="name"> </h1>
<p id='summary'> </p>
</div>
<script>
var uname = localStorage.getItem('uname');//retrieving from local storage
var summ = localStorage.getItem('summ');
document.getElementById('name').innerHTML = uname;//fill the fields with data
.
.
</script>
Further Links:
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
Related
I'm creating a resume builder where a person can enter information into input fields and my javascript code will take the field values and write it to a popup window, which will be their resume. I'm clearly doing something critically wrong here. I can get the pop up window to open, but no text that I'm appending from javascript is in the popup window.
I'm going to show snippets of the code so I'm not posting full-on documents, but everything follows the same suit.
The code for my input html:
<body>
<!-- Full name -->
<p><strong>Enter your full name:</strong></p>
<input type="text" name="fullName" cols='75'><br>
<!-- Address -->
<p><strong>Enter your address:</strong></p>
<input type="text" name="address">
.
.
.
</body>
Html for my popup window:
<body>
<div id="name"></div>
<div id="address/phone"></div>
<hr>
<div class="theLeft" id="objectives_pop"></div>
<div class="theRight" id="objectivesText"></div>
.
.
.
</body>
Javascript:
function myWindow() {
window.open("popupWindow.html", "_blank", "height=500", "width=500", "left=100", "top=100", "resizable=yes", "scrollbars=yes",
"toolbar=yes", "menubar=no", "location=no", "directories=no", "status=yes");
// Name
var name = document.getElementById('fullName').value;
document.getElementById('name').innerHTML = name;
// Address and phone number
var address = document.getElementById('address').value;
var phoneNum = document.getElementById('phoneNum').value;
document.getElementById('address/phone').innerHTML = address + '/' + phoneNum;
.
.
.
I want to append text from input fields in my main html file (project.html) to the popup window in popupWindow.html. How can I do this?
In your current code snippet you are calling document.getElementById on the main page, not the popup. You will first need to get the popup window as a variable, then modify it as needed.
To get you started, try doing something like the following:
let myPopup = window.open("popupWindow.html", "_blank", "height=500", "width=500", "left=100", "top=100", "resizable=yes", "scrollbars=yes",
"toolbar=yes", "menubar=no", "location=no", "directories=no", "status=yes");
myPopup.onload = function() {
var name = document.getElementById('fullName').value;
myPopup.document.getElementById('name').innerHTML = name
}
This will open up a new popup window, wait for it to load, then change the name innerHTML of that popup, rather than the parent page.
You are using document.getElementById() but on your html the inputs actually have no id, they have names, your html should be:
<p><strong>Enter your full name:</strong></p>
<input type="text" id="fullName" cols='75'><br>
<!-- Address -->
<p><strong>Enter your address:</strong></p>
<input type="text" id="address">
You can add something like <div id="dialog" title="Basic dialog" style="display: none;">Insert text</div> in your popup dialog!
I got help from stackoverflow but I do get now only 000000 as the add on numbers:
1) I want to Format ID2 to "000000" six digits, example if the ID2 is 302 then should it be "000302"
2) I want to combine the now formatted data (000302) in with .$_FILES['file']['name'] in the upload.php file and save the file with this new file name.
The $new_id have always "000000", whatever I do.
I am still lost how to do it, even the first help was very good!
The file transfer code is not from me. It is a code that is from the internet.
I would be very happy for any help!
This is the in the head section:
<script type="text/javascript" src="js/multiupload.js"></script>
<script type="text/javascript">
var config =
{
support : "image/jpg,image/png,image/bmp,image/jpeg,image/gif", // Valid file formats
form: "demoFiler", // Form ID
dragArea: "dragAndDropFiles", // Upload Area ID
uploadUrl: "upload.php" // Server side upload url
}
$(document).ready(function(){
initMultiUploader(config);
});
</script>
This in the body section:
<div id="dragAndDropFiles" class="uploadArea">
<br>
<span style="padding-left: 20px">To upload more pictures for this item click Browse</span>
<br>
<span style="padding-left: 20px">The order of the upload decide the order to show the pictures</span>
</div>
<form name="demoFiler" id="demoFiler" enctype="multipart/form-data" style="">
<input id="ID2" type="hidden" name="ID2">
<input type="file" name="multiUpload" id="multiUpload" multiple />
<input type="submit" name="submitHandler" id="submitHandler" value="Upload" class="buttonUpload" />
</form>
<div class="progressBar">
<div class="status"></div>
</div>
This the file upload.php
<?php
if($_SERVER['REQUEST_METHOD'] == "POST"){
$new_id = sprintf( "%06d", $_POST['ID2']);
if(move_uploaded_file($_FILES['file']['tmp_name'], "sobimages/" . $new_id . $_FILES['file']['name'])){
echo($_POST['index']);
}
exit;
}?>
You are sending a form field in the form that is hidden:
<input id="ID2" type="hidden" name="ID2">
But it has no value and as the user will not see it and fill in a value, it will always be empty / 0.
You should not use this approach as the user could manipulate the number. If you have the number already available, you should keep it on the server, for example in a session variable, and use that instead.
I'm very new to JavaScript and trying to mimic an example in a book I'm reading. I would like to take what is input to a HTML element and send the data to a element using .innerHTML. I don't know what is wrong.
<!DOCTYPE html>
<html>
<head>
<title>JS Form</title>
</head>
<body>
<form id="date">
<table>
<tr><td><input type="text" name="user" placeholder="Please input name" onchange="greeting();"></td>
</tr>
<tr><td><span id="hello"></span></td>
</tr>
</table>
</form>
<script type="text/javascript">
function greeting() {
var user = document.date.user.value;
var hello = document.getElementById("hello");
hello.innerHTML = "How are you " + user;
}
</script>
</body>
</html>
Add name="date" to your form tag like below. Else document.date.user.value will not work.
<form id="date" name="date">
Another way to get around the issue, is accessing the date property of the window object.
window.date.user.value;
This is possible because you've set an id on the form.
Or you might consider accessing the form using its id and then get user value as follows:
var user = document.getElementById("date").user.value;
For simplification, and depending on your browser, you could use document.querySelector. Take a look at this very helpful SO post:
JavaScript: how to get value of text input field?
you should do this first:
var user= document.getElementsByName("user");
var hello = document.getElementById("hello");
hello.innerHTML = "How are you " + user[0].value;
I have a small admin panel that I have created to do simple database tasks for my DayZ server. Now I want to make a simple editor for the news blurb on my website. The news blurb is stored in a table on my database. What I want is when the page loads it simply echo's the data and looks like it does on the live site. Then, when I click on it, I want it to convert into:
<textarea name="edit><?php echo news; ?></textarea>
This is my current code:
function divClicked() {
var divHtml = $(this).html();
var editableText = $("<textarea name="edit" />");
editableText.val(divHtml);
$(this).replaceWith(editableText);
editableText.focus();
// setup the blur event for this new textarea
editableText.blur(editableTextBlurred);
}
$(document).ready(function() {
$("#editable").click(divClicked);
});
<form method="post" action="newsedit.php">
<div id="editable"><?php echo $news; ?></div>
<input type="submit" value="Edit News" />
</form>
Now, this does work in the sense that when I click on the text it does convert into a textarea. The problem is that it doesn't give it the "edit" name so when I hit the sumbit button, it is as if I submitted nothing and it deletes all the data out of the table because
<textarea name="edit"></textarea>
is technically empty. Are there any ways to make it so when I click on the text it will convert the code to textarea with that specific name so there is actual data when I hit submit?
Change the form to:
<form method="post" action="newsedit.php">
<div id="<?php echo $newsID;?>"><?php echo nl2br($news); ?></div>
<input type="submit" value="Edit News" />
</form>
Where $newsID is returned along with the $news text.
The nl2br($news) will just make sure the line breaks are honored.
var editableText = $("<textarea name='edit' />");
http://jsfiddle.net/H5aM4/ inspect the textarea
TRY This
$("#editable").click( function(){
$(this).replaceWith(function() {
return $("<textarea name='edit'>").text(this.innerHTML);
});
});
Here is the working example
I realize similar questions have been asked thousands times and yet it doesn't seem to work for me. I have a textbox called "movieTitle", it is generated via Javascript by clicking a button. And I'm calling jQueryUI autocomplete on that textbox just like in the official example http://jqueryui.com/autocomplete/#remote.
It works well if I hardcode "movieTitle" in the original page; however it just fails when I create "movieTitle" by changing the innerHTML of the div "formsArea". searchMovies.php is the same with search.php from the example. I had tried many answers from internet and from here. I learned that I would have to use .on() to bind the dynamic element "movieTitle". Still it doesn't seem to work. Even the alert("hahaha") works. Thanks for your time. :) Here's my script:
$(function()
{
$(document).on('focus', '#movieTitle', function(){
//alert("hahaha");
$("#movieTitle").autocomplete({
source: "../searchMovies.php",
minLength: 2
});
}
);
window.onload = main;
function main()
{
document.getElementById("movieQuery").onclick = function(){showForms(this.value);};
document.getElementById("oscarQuery").onclick = function(){showForms(this.value);};
// displays query forms based on user choice of radio buttons
function showForms(str)
{
var heredoc = "";
if (str === "movie")
{
heredoc = '\
<h1>Movie Query</h1>\
<form action="processQuery.php" method="get">\
<div class="ui-widget">\
<label for="movieTitle"><strong>Name: </strong></label>\
<input type="text" id="movieTitle" name="movieTitle" />\
<input type="submit" name="submitMovie" value="Submit" />\
</div>\
</form>';
//document.getElementById("formsArea").innerHTML = heredoc;
//$("#formsArea").append(heredoc);
$("#formsArea").html(heredoc);
}
else if (str === "oscar")
{
heredoc = '\
<h1>Oscar Query</h1>\
<form action="processQuery.php" method="get">\
<strong>Name: </strong>\
<input type="text" name="oscarTitle" />\
<input type="submit" name="submitOscar" value="Submit"/>\
</form>';
document.getElementById("formsArea").innerHTML = heredoc;
}
}
}
});
The HTML is:
<form action=$scriptName method="get">
<label for="movieQuery"><input type="radio" name="query" id="movieQuery" value="movie" />Movie Query</label>
<label for="oscarQuery"><input type="radio" name="query" id="oscarQuery" value="oscar" />Oscar Query</label>
</form>
<div id="formsArea">
<b>Please choose a query.</b>
</div>
You should check for the URL you're sending an AJAX request to. The paths in script files are relative to the page they're being displayed in. So albeit your script is in /web/scripts/javascripts/js.js, when this file is included in /web/scripts/page.php, the path to /web/scripts/searchMovies.php should be searchMovies.php instead of ../searchMovies.php because your script is being used in /web/scripts/.
Good ways to avoid such confusion is to
a. use absolute URL
b. the URL that're relative to root of your domain (that start with a /),
c. or define your domain's path in a variable, var domain_path = 'http://www.mysite.com/' and use it in your scripts.
I hope it clarifies things :)
Relative Paths in Javascript in an external file