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!
Related
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
I have a text field in parent/main page with a button to open a child page.
The child page suppose to load and populate with required data (I got this).
The code as follows in main page.
<input class="form-control" type="text" size="50" id="SNOW_INC" required>
<button class="btn btn-outline-secondary" type="button" onclick="find_incident()">Find</button>
<script type="text/javascript">
var get_Active_INC;
function find_incident(){
get_Active_INC = window.open("get_active_inc.php","OCC Active Incident(s)", "width=700,height=500");
get_Active_INC.focus();
}
</script>
So far all good, a popup window opened in focus and my data being displayed. The code in get_active_inc.php as follows.
foreach($data['result'] as $line){
echo '<button type="button" id="' . $line['number'] .'" onclick="set_incident(this.id);" class="btn btn-link">' . $line['number'] . '</button>';
echo $line['short_description'];
echo '<br>';
}
<script type="text/javascript">
function set_incident(clicked_id){
if(window.opener != null && !window.opener.closed) {
var SNOW_INC = window.opener.document.getElementById("SNOW_INC");
SNOW_INC.value = document.getElementById(clicked_id).value;
}
window.close();
}
</script>
Now the popup page displays my data with button (id and text is same) and some text.
What I want is when I click the button, it supposed to get the ID of the button, close the window and the text field in parent window get filled with the ID.
I think what I wrote is correct but nothing happens. The window just closes without doing anything.
I know its getting the ID because when I do alert(clicked_id); inside the function, I do get the ID I was expecting.
Trying to find out what I'm doing wrong. Thank you!!!
If you want to set the button id to the SNOW_INC element you should set
SNOW_INC.value = clicked_id;
If you want to set the button text to the SNOW_INC element you should set
SNOW_INC.value = document.getElementById(clicked_id).innerText;
I have written a code, for opening 10 links that I am entering in the text box to open in a new window for each 10 links entered in the text box. But somehow its now working. Could anyone help me in executing it correctly. Below is the code:
<html>
<script>
function getValue(v)
{
var txt_arr=v.split('\n');
for(var i=0;i<txt_arr.length;i++)
{
window.open(txt_arr[i],"_blank");
}
//var link=document.getElementById("textLink").value;
//window.open(link,"_blank");
}
</script>
<body>
<h1>Get Text box value</h1>
<form>
<textarea id="textLink" type="text" name="link_val" rows="2" cols="2"></textarea>
<button id="btnClick" onClick="getValue(link_val.value)">Open the links</button>
</form>
</body>
</html>
link_val.value is not going to work, cause it does not refer to the element. Sure the variable name matches the name of the textarea, but that's not the same thing.
You need to actually get the element instead, so I would suggest doing that inside the handler:
onClick="getValue('link_val')"
function getValue(link_input_name)
{
var link_input = document.getElementsByName(link_input_name)[0];
var txt_arr = link_input.value.split('\n');
...
The problem here is that your button type is not defined,
by default it's "submit" and it will refresh the page, what you want is a button that does nothing else than the onClick action you need, so put type="button" in your button HTML and it will work.
You need to check if your browser don't block popups too.
var a = document.getElementById('textLink');
function getValue() {
var myWindow = window.open('', "_self");
//get value in new window use =>window.open('', "_blank");
myWindow.document.write(a.value);
}
<h1>Get Text box value</h1>
<form>
<textarea id="textLink" type="text" name="link_val" rows="2" cols="2"></textarea>
<button id="btnClick" onClick="getValue()">Open the links</button>
</form>
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'm trying to create a Captcha in JavaScript but I ran into issues. I want the CAPTCHA to display at random, one of the declared images and then validate users input against the text on the images. So far, I have the Code below and it doesn't show anything:
<script type="text/javascript">
var "<img src="images/ci0.jpg" />" = 56777;
var "<img src="images/ci1.jpg" />" = 67646;
var "<img src="images/ici2.jpg" />" = 77666;
var code = ci0, ci1, ci2;
document.getElementById("txtCaptcha").value = code;
document.getElementById("txtCaptchaDiv").innerHTML = code;
</script>
HTML
<div id="left">
<label for="code">Enter code next <span id="txtCaptchaDiv" style="color:#F00"></span><br />
<!-- this is where the script will place the generated code -->
<input type="hidden" id="txtCaptcha" /></label>
</div><!-- End Left -->
<div id="righty">
<span id="spryconfirm1">
<label>
<input type="text" name="checker" id="checker" />
</label>
<span class="confirmRequiredMsg">You must enter the Code.</span><span class="confirmInvalidMsg">The values don't match.</span></span>
</div><!-- End righty -->
</div>
By the way I see it you should use reCAPTCHA since you still have a long way to go before creating a CAPTCHA validator yourself. This is not only a matter of client-side but also server-side which you are already ignoring.
Get a reCAPTCHA embed code and use it in your HTML.