Develop Reference

Submitting form data to a popup window for processing

As so many posts start: This might be a duplicate, but...
Here's what I'm trying to do:
Have an HTML page within my site that contains a FORM element with various input, etc. elements inside, e.g.:
<form id="form1" method="post" action="">
Name: <input type="text" id="text1" size=10><br>
<input type="hidden" id="hidden1" value="This text is hidden">
<input type="checkbox" id="checkbox1" value="Y"> Include stuff?<br>
Job Title: <select name="select1" id="select1">
<option value="1">President</option>
<option value="2">Chief Cook</option>
<option value="3">Bottle Washer</option>
</select>
<button name="button1" id="button1" onclick="doThisScript()">Submit Stuff</button>
</form>
I want the "doThisScript" function to open a new popup window with coded parameters, directed to a url on our site, and pass the form's values to that url, something like:
function doThisScript() {
var form1=document.getElementById('form1');
form1.onsubmit=function() {
var w=window.open('resultsprogram.asp','resultswin','toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=400,height=300');
this.target = 'resultswin';
form1.submit();
}
}
This code (based on the closest Q/A here I could find) transfers the form from the "base" page to the popup window. But what I'm trying to do, I guess, is submit the form back to the server but have the results come back to that popup window instead of either the base page or a new tab/standard browser window.
Is that even possible? I assumed there had to be a way to create the popupwin with a URL, pass that page the current form values, and tell that popupwin to itself submit the form so that it, not the base page, gets the results. Doable?

Calling window.open() will invoke the server script, but it won't send the form parameters to it.
You need to change the form's action to be the server script:
function doThisScript() {
var form1=document.getElementById('form1');
form1.action = 'resultprogram.asp';
form1.target = 'resultswin';
}
}
You don't need to call submit() explicitly, since that's the default action of clicking on the submit button.

Pass data to another page and submit form on that page

I'd like a button on page1.html. This button will pass data to page2.html which has a form on it, load that data into the form, and submit the form on page2.html. Is this possible? How would it be done? I can't seem to find any examples of this.
Thanks!

Of course the best thing to do is to use a backend... but I guess you wouldnt be asking if you had that option.
one thing you can do is use the anchor in the URI, like: /page2#?field=value&fld=val
Then on page load, check for an anchor tag and process it:
$(function(){
let hash = window.location.hash.substr(1);
})
Here's a plunkr to get you off the ground: https://plnkr.co/edit/u9fPGFZedXGmKbbdXVvy?p=preview
So once you have the hash you would parse it to JSON and configure your form with it.
It isn't obvious that it works because of how these fiddle-like sites operate. But it does work! To check it out, open the preview in separate window mode, and copy the url, open that url in a new tab, and add a sample hash on it, and press enter so it takes. then reload the page.

I ended up using PHP's Post method:
From originating page1.php page:
<form action="page2.php" method="post">
<input type="hidden" name="MyName" id="MyId" value="MyVal">
<input type="submit" value="Post to page2">
</form>
In receiving page2.php page:
<?php if (!empty($_POST)) : ?> // Check for Post data
<script>
document.getElementById("MyId").value = '<?php echo $_POST["MyName"]; ?>'; //update form on page2.php by field ID
document.getElementById('FormToSubmit').click();
</script>
<?php endif;?>
Works perfectly

You can simply add (target="_blank") to form tag and you can get data in specific action page
<form action="test.php" method="post" target="_blank">
<input type="text" name="test" />
<button type="submit" name="submit">Submit</button>
</form>

global variable not displayed in div

I declare a variable at the beginning of my .js file:
var option="blabla";
On page 1.html I click on a link to page 2.html where I have
<script>document.write(option);</script>
No text is displayed on 2.html. When I refresh the browser while I am on 2.html I get undefined as an output.
What do I have to do to have the text displayed straight after I click the link?
Alternatively, how can I get the following code work to output strUrl on 2.html:
on 1.html I have a link:
<a href="2.html" onclick="function1("item")">
on 2.html I have a div:
<div id="display">document.write(strUrl);</div>
then I have in my .js file:
function1(searchitem)
{
strUrl = 'http://blabla.com/'
+ '?key=' + searchitem;
}

You try to create a Javascript variable on a page and then use it on another page. This is a more-or-less broad problem, since you want to maintain values across pages. First of all, you need to decide where is this value going to be defined and where is it going to be used. If this is more like a server-side variable, then you need to define it on server-side and then generate it into your Javascript code. If you are using PHP, then you can do it like this:
<script type="text/javascript>
var foo = '<?php echo $bar; ?>';
</script>
Naturally, you need to initialize $bar to be able to do that. If the variable should be a client-side variable, then you need to use localStorage, like this on 1.html:
localStorage.setItem("option", "blablabla");
and then load it on 2.html:
localStorage.getItem("option");
Or, if you need to use it both on server-side and client-side, then you can use a cookie for this purpose. Using cookies i slightly more complex, but my answer to another question should get you going.
Let's focus on the cause this did not work for you. A Javascript variable will cease to exist when the page is unloaded, so you will not be able to use its value after that. So, you need to persist it somehow, storing it either on the server or the computer where the browser is being run.
As a side-note, I should mention that you can use Javascript variables accross pages if you load some pages inside iframes of a page, but that is a different scenario.

This is what FORMS and AJAX were invented for. If your server has a PHP processor (virtually ALL of them do), then you can rename your .html files to .php and use a bit of PHP to accomplish your goal.
A web page ending with .PHP works exactly the same as one ending in .html, except that you can now add snippets of PHP code where desired. It is not necessary to have any PHP code, but if you have some it can do stuff.
Method One: FORMs
If you want to switch to page2.html and see a value sent from page1.html, you can use a FORM construct and post the data from page1 to page2:
page1.php
<form action="2.html" method="post">
<input name="option" type="text" />
<input type="submit" name="sub" value="Go" />
</form>
page2.php
<?php
$p1 = $_POST['option'];
?>
<div>On page1 of this website, you typed: <?php echo $p1; ?>. That's what you did.</div>
Note how a <form> uses the name= attribute for the name of the variable that is sent to the other side.
Example Two: The AJAX method
HTML:
<div id=nonForm">
<input id="option" type="text" />
<input type="button" id="myButt" value="Go" />
</div>
<div id="results"></div>
jQuery:
$('#myButt').click(function(){
var opt = $('#option').val();
$.ajax({
type: 'post',
url: 'page2.php',
data: 'option='+opt,
success: function(john){
if (d.length) alert(john); //display result from Page2 in a pop-up box
$('#results').html(john); //Or, display it right on the page
}
});
});
PAGE2.PHP -- The AJAX processor file
<?php
$opt = $_POST['option'];
//Now, you can do something with the data in $opt, and then send back a result
$rtn = 'Hey, you sent: ' .$opt;
echo $rtn;
The primary (and most important) difference between the two methods is that the FORM will change pages on you. The user will be sent from Page1 to Page2, and the screen will flash as this happens.
What's exciting about AJAX is it sends data to Page2, where Page2 can do something with it (for example, a database lookup), and then Page2 sends different data back to Page1. This new data can then be displayed on the page WITHOUT the page refreshing.
Here are a couple of very basic AJAX examples, to get you going:
AJAX request callback using jQuery

Submit info and then open new webpage in button. Multiple actions using Form type = submit

How can I submit entries to my db and then open a link to a new page? In my situation I need to submit information filled out on a form to the DB and then open to a page that says thank you all in one click!
Here is what I have for the form portion minus the stuff in the middle
<form id="rent_form" action="<?= $_SERVER['PHP_SELF'] ?>" method='post' >
Stuff
<input type="submit" value="Submit" onClick="location.href='thankyou.php'" >
And the onclick does not work.
Mahalo in advance!

You could redirect to a success page using php if the submission is successful.
You can use header to redirect: header("Location: http://yoursite.com/success");
Alternitvely you could use AJAX to submit the data, and then in the success of your AJAX call redirect like this: window.location.replace("http://yoursite.com/success")

You could use the target attribute of the form tag to redirect the response from the action page to a new window i.e add target='_blank' to your form tag and have the response from your form submission be the HTML you want to display in the new page. This would save a redirect, I guess, at least.

Passing variables in URL

I have an address book widget that shows if there are contents.
If there are no contents, an add button will show up. Upon pressing the add button, it will redirect to another page which will show the form.
The initial design of my website is as follows:
When the user click the add button, it will direct to a page using javascript function:
document.location.href="address?addOnly=true";
The form will display.
If successful, there are $.post that will change the div only that will enable user to do CRUD in the address book.
The problem with the variable inside the url which is address?addOnly=true is that when the user refresh it, it will always shows the add form.
That's why i've decided to hide the implementation using $.post
$.post('address', {"listEmty":true}, function (data) {
window.location = "address";
});
The problem with this is that it can't pass the variable at all.
My questions are:
How to handle the page refresh if using the get method, which passes the paramater in the URL,
Are there anyways in javascript/jquery to pass the variable using post method then refresh the page?
Thank you.

<FORM method="post" action="address" id="refresh" style="display: none;">
<DIV>
<INPUT type="hidden" name="addOnly" value="true">
</DIV>
</FORM>
<SCRIPT type="text/javascript">
document.getElementById('refresh').submit();
</SCRIPT>
What this does is create an invisible form, then immediately submits it. You can of course call the submit from within your other javascript code.