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;
Related
I am trying to print the input text of a textarea to the console.
The user would type a message then click a button and then the text would get printed to the console...
Here's my HTML:
<form action='/send_message' method='POST'>
<textarea name='message' id='message_box'></textarea>
<input name='receiver_id' type='text' id='number' style="display: none" value="{{info[0][0]}}">
<button id='btn' class='btn btn-primary' type='submit'>Message {{info[0][2]}}</button>
</form>
and here is the JS:
var message = $('textarea#message_box').val();
var button = document.getElementById('btn');
button.addEventListener('click',function(){
console.log(message)
});
The problem is that I get an empty message in the console no matter if the area is empty or containing text.
I tried various combinations of val(), text, innerHTML but I pretty much always get the same empty output...
You need to get the value of textarea when the button is clicked so assign the message variable inside the event listener. Because we want to get the value of textarea each time button is clicked.
var button = document.getElementById('btn');
button.addEventListener('click', function() {
var message = $('textarea#message_box').val();
console.log(message)
});
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!
In advance, I apologize to the programmers of our world if my code is ugly and is not in the correct mold. I'm doing this, because where I work nobody else knows programming. :)
I created a page to download some certificates. After the user authenticates, he is redirected to the certificate download page. Until this moment, when the user authenticates, the certificate will be automatically generated, but I would like to put a button for the user to click if they really wanted to generate the certificates.
At first it looks like this:
<div class="form">
<p><strong><span>Usuário: <?= $_SESSION['user'] ?></span></strong></p>
<form action="protected.php" id="my_form" method="post">
<input type="submit" name="gen_cert" value="Gerar certificados" onclick="switcher('gen_cert');this.disabled=true;" />
</form>
<?php if($_SERVER['REQUEST_METHOD'] == "POST" and isset($_POST['gen_cert'])) { ?>
<?php require("cert_generate.php"); ?>
<div id="gen_cert" style="display:none">
<p><a href="download.php?fid=<?= $_SESSION['user'].".p12" ?>" class="button" >Download do certificado pessoal</a></p>
<p><a href="download.php?fid=ca.crt" class="button" >Download da CA</a></p>
</div>
<?php } ?>
</div>
Yes, I have html tags inside php. At first it was the only way that I came up with the "cert_generate.php" check by "if($_SERVER['REQUEST_METHOD'] == "POST" and isset($_POST['gen_cert']))".
UPDATED
SCRIPT
function switcher() {
var x = document.getElementById("generator");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
My problem is that I need to press twice for the "generate certificates" button show the div with the contents.
How can I solve this?
When you load the page for the first time, your gen_cert div is not loaded in dom, because of this condition:
if($_SERVER['REQUEST_METHOD'] == "POST" and isset($_POST['gen_cert'])
You can remove the onclick event and display:none on gen_cert div.
Or, if you want to show/hide the div using jquery, you don't need the form submit. You can change the input type submit to button, remove form 'my_form' and remove the condition
if($_SERVER['REQUEST_METHOD'] == "POST" and isset($_POST['gen_cert'])
Attach a double click event on the button
<p ondblclick="downloadCA(id)">Download da CA</p>
The id here is whatever you want to be in the fid query string in your url.
Then put this js code in your script
function downloadCA(id){
window.location.href = 'download.php?fid=' + id;
}
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