We Keep Coding

Get value from child HTML page to parent text field

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;

Ajax won't initiate POST request to php form

For some reason, my form won't post, any ideas as to why(I already know that everything else on my server is operational)? Code below:
PHP
<?php
if(isset($_POST['field1']) && isset($_POST['field2'])) {
$data = $_POST['field1'] . '-' . $_POST['field2'] . "<br>";
$ret = file_put_contents('user.txt', $data, FILE_APPEND | LOCK_EX);
if($ret === false) {
die('There was an error writing this file');
}
}
?>
https://pastebin.com/hHeMD4Mq
HTML/AJAX JS
<form id ="form">
<p>Name:</p>
<input name="field1" type="text" id ="name" />
<h3> </h3>
<p>Message:</p>
<textarea name="field2" type="text" id ="message"></textarea><br/>
<button onclick="pos();">reply</button>
</form>
</td>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
function pos(){
var values=$("form").serialize();
$.post('form.php', values, function(response) {
console.log("Response: "+response);
});}
</script>
https://pastebin.com/eAVE8EGS
demo on my site:
jakesandbox.com/dnd/
(any info not provided above will be provided upon request in the comments)

The problem is your button is actually submitting the form (Which is essentially reloading the page, as it's submitting to itself). You need to do one of 2 things:
Change your button to a type="button" to prevent it from submitting (A button inside of a form element automatically becomes a submit button):
<button type="button" onclick="pos();">reply</button>
Prevent the click action from taking place (Thus preventing the submit):
<button type="button" onclick="pos(event);">reply</button>
<script type="text/javascript">
function pos(e){
e.preventDefault();
var values=$("form").serialize();
$.post('form.php', values, function(response) {
console.log("Response: "+response);
});}
</script>
-OR-
<button type="button" onclick="pos(); return false;">reply</button>

It turns out your form is actually sent normally with GET request (you can probably see the page reload). It occurs when a button inside a form has no specified type (default being submit).
A button of type "submit" inside a form submits the form while a button of type "button" doesn't.
Just add the attribute type="button" to your button and your problem should be solved.
<button type="button" onclick="pos();">reply</button>

On your php end to debug if the data actually came
<?php
header('Content-Type: application/json');
echo json_encode($_POST);
Then on your js
$.post('form.php', values, function(response) {
console.log(response); // return json
});}

My ajax code can't send values to other php page [duplicate]

This question already has answers here:
JavaScript: Inline Script with SRC Attribute?
(3 answers)
Closed 6 years ago.
I tested my update.php file and it works perfect and there is not any error when i checked my script via console . Only problem in here . Ajax can't send values "id" "comment_area" to update.php file . What is the mistake in here ?
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.2.min.js">
$(document).ready(function() {
$("#b_news").submit(function(evt) {
evt.preventDefault();
var text = $('#breaking_news_text').val();
var id = 21;
$.ajax({
type: "POST",
url: "update.php",
data: {
comment_area: text,
id: id
},
success: function() {
alert("sucess");
}
});
});
});
</script>
<form id="b_news" method="post" action="">
<div>
<div>
<textarea id="breaking_news_text" class="breaking_news_text" rows="6" cols="50" placeholder="Add text here..." required></textarea>
</div>
</div>
<div>
<input type="button" id="save" value="Save Changes" />
</div>
</form>
<?php
include("./inc/connect.inc.php");
$id=$_POST['id'];
$update = $_POST['comment_area'];
$sql = "update comments set comment_area='$update' Where id='$id'";
$result = mysqli_query($mysqli, $sql)or die("error");
?>

Seems to me that your button simply can't submit the form because of its type.
Try to change the type attribute of the button to submit this way :
<input type="submit" id="save" value="Save Changes"/>

You have two problems.
First you can only have one script per script element. The script can either be referenced by the src attribute or it can be between the start and end tags.
If you try to do both, as you are here, then only the src will be respected.
Use separate <script> elements for your two scripts.
Second, you have no way to trigger the submit event. The submit event will trigger when the form is submitted, but you can't do that from a textarea or a button. Replace the button with a submit button.

Just want to show a green checkmark when user clicks Submit on html form

first post. PHP noob. I'm surprised at how difficult this has been...
I have an html form (index.html) with a submit button that posts to a php file (sendemail.php).
The php file is set to collect form data and send it via email to an address I specify.
I would like to display a success icon next to the submit button when this email is sent. (Honestly, there is no fail condition, so I would be happy with just displaying the success icon when the user clicks Submit, so they know not to keep clicking Submit).
I have tried a number of approaches after reading this and many other forums. I've been at this for two days and could use some help.
Here's some snippets below. I'm basically just trying to detect the email being sent in the php file, then sending a flag ($val) using echo json_encode back to the HTML page. I'm trying to capture it using the javascript with an onload trigger, and then trying to use the javascript to manipulate the DIV visbility when the page is refreshed after the submit action is completed.
It processes the php but it doesn't seem to reach the Header line to reload the html page. It just refreshed the screen and shows the word "inline" and nothing else.
I'm stumped. Please help! Thanks
sendmail.php
// Check, if message sent to your email
// mark success or fail then refresh page
if($send_contact){
$val="inline";
echo json_encode($val);
}
else {
echo "Error";
}
if($send_contact){
header('location:index.html');
}
else {
echo "Error";
}
?>
javascript in html
<script type="text/javascript">
function success(){
var val = <?php echo json_encode($val); ?>;
document.getElementById('success').setAttribute('display', val);
}
window.onload = success;
</script>
HTML DIV I'm trying to control
<div style="text-align: left; font-weight: bold; color:#000000; display:val;"
class="success" id="success" name="success"><img src="success.png"
height="25px">Event added! It may take 20 minutes to appear on
the calendar. </div>
UPDATE:
Ok I tried manRo's suggestion and was able to get the behavior I wanted out of the green checkmark...it would be hidden on page load and then appear when it received the 200 status message from the PHP file.
However when I try to build this logic into my ajax something is breaking and the form data is no longer submitting, and the green checkmark logic stops working.
Allow me to run through my updates:
Currently my script header looks like this:
<script type="text/javascript" src="util-functions.js"></script>
<script type="text/javascript" src="clear-default-text.js"></script>
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
I've got an onload in the body to call a function to set the green checkmark to "hidden", just to keep things tidy:
<body onload="setdisplay()">
Calling this function:
<script>
function setdisplay();
document.getElementById("success").style.display = "none";
</script>
I get my form started like this now:
<form id="main" name="main" action="">
Here's an example input:
<td style="text-align: right; "> <br>
</td>
<td><input id="title" name="title" value="Event title" class="cleardefault rounded"
required="true" type="text"> </td>
The form submit button, which currently is type=button
<input style="background-color: #99d6ff; text-align:center;
font-weight: bold;" value="Add event" id="addevent" name="addevent" onclick="processmain();"
class="button" type="button">
This is the DIV I need to make visible or hidden depending on success:
<div style="text-align: left; font-weight: bold; color:#000000; display:none;"
class="success" id="success" name="success"><img src="success.png"
height="25px"></div>
Now the beefy part....I've tried integrating your manRo's suggestions into my main form processing script, as part of the ajax "success" state:
<script>
}
function processmain()
{
// event.preventDefault();
var title = $("input#title").val();
var location = $("input#location").val();
var startdate = $("input#startdate").val();
var starttime = $("input#starttime").val();
var enddate = $("input#enddate").val();
var endtime = $("input#endtime").val();
var other = $("input#other").val();
$.ajax({
url: "sendemail.php",
type:'POST',
data:
{
title: "title",
location: "location",
startdate: "startdate",
starttime: "starttime",
enddate: "enddate",
endtime: "endtime",
other: "other"
},
success: function(event)
{
$.get('sendmail.php', function(data) {
document.getElementById("success").style.display = "inline";
})
}
});}
</script>
At the moment:
The form data is not passed to the php
The green checkmark does not show
The screen is no longer refreshing (because button type=button now, instead of submit).
I feel like I am close. I need to get the form data sent to the php so the email is sent. I need the page to not refresh so I can properly introduce the green checkmark.
Please take a look at how I'm implementing your solution in my code and let me know what I'm doing wrong. Thank you!!

What you want is HTML form with ajax call to php script that will return 200 http status code on success.
I will try to explain you that on very simple example.
Please take a look at below html file:
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
</head>
<body>
<form action="sendmail.php">
<input type="email" name="email"/>
<input type="submit"/>
</form>
<script>
$(document.forms[0]).submit(function(event) {
event.preventDefault();
$.get('sendmail.php', function(data) {
alert('all good');
});
});
</script>
</body>
</html>
sendmail.php in that case should contain code responsible for sending email eg:
<?php
//code here...
if ($email_sent) {
http_response_code(200);
} else {
http_response_code(400);
}

Convert a DIV to textarea with specific "name" attribute

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