We Keep Coding

Retrieving input data after page redirection using jquery

I have a form, that takes the first players name, and the second players name, and then a submit button, which redirects them to the main game screen.
Im attempting to display the players name of whose turn it is after each move. But it keeps saying undefined.
Any ideas?
Heres the HTML:
<h1 id="start">Welcome to Noah's Connect Four Game!</h1>
<form action="gamescreen.html" method="POST">
<label for="p1">Enter Player One's Name:</label><br>
<input type="text" id="p1" placeholder= "Player One" ><br><br>
<label for="p2">Enter Player Two's Name:</label><br>
<input type="text" id="p2" placeholder= "Player Two"><br><br>
<input type=submit value ="Play Now!">
</form>
and heres the Javascript
(The paragraph tag its referencing is on the main game screen (The one the user is redirected to after submission.)
let turn = '';
var usrOne = $('#p1').val();
var usrTwo = $('#p2').val();
$('td').click(function() {
if (turn == 'Red'){
$(this).css("background-color","red");
$(this).text("Red");
console.log("Red");
$('p').text(`Its ${usrOne} Turn! Place your blue chip in one of the columns!`);
turn = 'Blue';
}
else{
$(this).css("background-color","#3f5c94");
$(this).text("Blue");
console.log("Blue");
$('p').text(`Its ${usrTwo} Turn! Place your blue chip in one of the columns!`);
turn = "Red"
}
})
I feel as if the input is being lost after the user hits the submit button, but i'm using the Post method? Im a bit new to JS and HTML as you can tell.
Thanks!

If you're not using a server-side language like PHP, then you'll have to use the query parameters from the URL and JavaScript.
You can start by changing method="POST" to method="GET", and adding name="p1" and name="p2" for your respective inputs. As a note, I'd recommend always wrapping attribute values in quotes. I corrected type=submit to type="submit" for you.
This will be on the first page.
<form action="gamescreen.html" method="GET">
<label for="p1">Enter Player One's Name:</label><br>
<input type="text" name="p1" id="p1" placeholder= "Player One" ><br><br>
<label for="p2">Enter Player Two's Name:</label><br>
<input type="text" name="p2" id="p2" placeholder= "Player Two"><br><br>
<input type="submit" value ="Play Now!">
</form>
This will be on the second page.
<h3>Player 1</h3>
<p id="p1"></p>
<h3>Player 2</h3>
<p id="p2"></p>
This also goes into the second page, but just before the </body> (the closing body) tag.
<script>
/*
gets the query parameters from the URL, removes the "?" and splits the string
into an array based on how many "&" characters were passed.
Example: "?p1=test+1&p2=test+2" into ["p1=test+1", "p2="test+2"]
*/
var params = document.location.search && document.location.search.replace('?', '').split('&') || '';
// if params was not falsey
if (params) {
// turns "p1=test+1" into "test 1"
var player1 = decodeURIComponent(params[0].split('=')[1].replace(/\+/g, ' '));
// turns "p2=test+2" into "test 2"
var player2 = decodeURIComponent(params[1].split('=')[1].replace(/\+/g, ' '));
// inserts the player1 value as the <p id="p1"> value
document.querySelector('#p1').innerHTML = player1;
// inserts the player2 value as the <p id="p2"> value
document.querySelector('#p2').innerHTML = player2;
}
</script>

Save html form as html file with submitted values

First I'd like to say I read the answers to similar questions including this how to save the content of html form as .html page but that did not solve my problem.
I'm building a reporting system that allows users to use templates to create reports. These templates are html forms and can be developed my any external application or manually. What my application does is, it imports these templates and presents them to the user when he is creating his reports and I want to save the submitted report as as an html file with all the values the user selected, be it text fields or checkboxes.
The above answer suggests using $('#myForm').html(). What this does is get the html of the form but does not include any values entered by the user. How can I achieve this?
Update
I'd like to say this templates are developed by an external application and could have any structure depending on what the user is reporting. So I don't know of any id or name attribute of any of the form inputs used by the creator of the form. The only think I know of is that all the forms are always in a
<div id="reportTemplate"></div>
so that's the only thing I can access with javascript.

Javascript
function CreateHtml(){
var field1 = $("#field1").val();
var field2 = $("#field2").val();
var fieldn = $("#fieldn").val();
var form = $("#myForm").clone();
$(form).find("#field1").val(field1);
$(form).find("#field2").val(field2);
$(form).find("#fieldn").val(fieldn);
$('#btn_download').attr('download', 'sampleFile.html');
$('#btn_download').attr('href', 'data:text/html,' + form);
$('#btn_download').show();
}
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div>
<input placeholder="field1" id="field1" type="text" />
<br/>
<input placeholder="field2" id="field2" type="text" />
<br/>
<button type="button" onclick="CreateHtml();">Submit</button>
<br>
<a href="" id="btn_download" hidden>Download</a>
</div>

You can wrap the html content in a variable and export it using anchor tag like below.
function CreateHtml() {
var htmlContent = "";
htmlContent = "<h1>Name - " + $('#name').val() + "</h1><br>" +
"<p>Email - " + $('#email').val() + "</p>";
$('#btn_download').attr('download', 'sampleFile.html');
$('#btn_download').attr('href', 'data:text/html,' + htmlContent);
$('#btn_download').show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div>
<input placeholder="Name" id="name" type="text" />
<br/>
<input placeholder="Email" id="email" type="text" />
<br/>
<button type="button" onclick="CreateHtml();">Submit</button>
<br>
<a href="" id="btn_download" hidden>Download</a>
</div>
Updated:
function CreateHtml() {
var htmlContent = TraverseThroughReport();
$('#btn_download').attr('download', 'sampleFile.html');
$('#btn_download').attr('href', 'data:text/html,' + htmlContent);
$('#btn_download').show();
}
function TraverseThroughReport() {
var elements = document.getElementById("report").elements;
var htmlContent = "";
for (var i = 0, element; element = elements[i++];) {
if (element.type === "text")
//console.log("it's an empty textfield")
htmlContent = "<h1>" + element.value + "</h1>";
}
//You can add as many conditions for placeholder etc to detect the form element type
return htmlContent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="report">
<input placeholder="Name" id="name" type="text" />
<br/>
<input placeholder="Email" id="email" type="text" />
<br/>
<button type="button" onclick="CreateHtml();">Submit</button>
<br>
<a href="" id="btn_download" hidden>Download</a>
</div>

If I had asked my question properly or searched for existing questions using "innerHtml with form values" instead of "how to save html for as files" I would have been taken to this link jquery get all form elements: input, textarea & select with already good answers of which this particular one worked for me
$('input:text, input:hidden, input:password').each(function() {
var v=this.value;
$(this).attr("magicmagic_value",v).removeAttr("value").val(v);
});
$('input:checkbox,input:radio').each(function() {
var v=this.checked;
if(v) $(this).attr("magicmagic_checked","checked");
$(this).removeAttr("checked");
if(v) this.checked=true;
});
$('select option').each(function() {
var v=this.selected;
if(v) $(this).attr("magicmagic_selected","selected");
$(this).removeAttr("selected");
if(v) this.selected=true;
});
$('textarea').each(function() {
$(this).html(this.value);
});
var magic=$('form').html().replace(/magicmagic_/g,"");
$('[magicmagic_value]').removeAttr('magicmagic_value');
$('[magicmagic_checked]').attr("checked","checked").
removeAttr('magicmagic_checked');
$('[magicmagic_selected]').attr("selected","selected").
removeAttr('magicmagic_selected');
alert(magic);

Use label to select image file but have attribute displayed input

I am looking to have the label be used for the selection of the item (so Choose File) is gone.
Here is my HTMl:
<div class="form-group">
<label class="btn btn-primary trigger" for="broker_image">Upload Image</label>
<input style="display:none;" class="uploadBtn" type="file" name="broker[image]" id="broker_image">
</div>
It works, although I do not have the image to actually have the name shown (which is part of the input tag)
Here is the js to try to make it show (which is 100% editable):
document.getElementsByClassName("trigger").onClick = function () {
document.getElementsByClassName("uploadFile").style.display = 'block';
document.getElementsByClassName("uploadFile").value = this.value;
};
Tried:
document.getElementsByClassName("trigger").onClick = function () {
document.getElementsByClassName("uploadFile")[0].style.display = 'block';
document.getElementsByClassName("uploadFile")[0].value = this.value;
};
With no luck.
JSFiddle:
http://jsfiddle.net/07zw6h3q/
I am lost on to make just the file name show, without some crazy javascript add in. Something simple. Using Rails 4.2 and Bootstrap.

You need to use the change event.
$('.uploadBtn').change(function(){
var a = $(this).val().split('\\');
$('.trigger').html(a[a.length - 1]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="btn btn-primary trigger" for="broker_image">Upload Image</label>
<input style="display:none;" class="uploadBtn" type="file" name="broker[image]" id="broker_image">
</div>
Also you can show a preview of the file (if it's image of course) Preview an image before it is uploaded

JSFiddle
HTML
<div class="form-group">
<label class="btn btn-primary trigger" for="broker_image" style="border : solid 1px lightgrey; padding : 5px">Upload Image</label>
<input style="display:none"; class="uploadBtn" type="file" name="broker[image]" id="broker_image" />
<label id="broker_image_name">no selected file</label>
</div>
JavaScript
var upload_button = document.getElementById("broker_image");
upload_button.addEventListener("change", function() {
var file_name = upload_button.value;
/*
the file come like this : C:\fakepath\file.htm
so we only need the file name
*/
file_name = file_name.split("\\"); // preventing \ to be escaped himself
var file_name_length = file_name.length;
file_name = file_name[file_name_length - 1];
var broker_image_name = document.getElementById("broker_image_name");
broker_image_name.innerHTML = file_name;
});
I used the event change to change the file name, which is an additional label I put right after your button (that I stylized a bit by the way) and that is updated with the file name.
You see a commented part for the file name value because when getting back the file name after the user select one, it comes with the pattern C:\fakepath\myFile.htm so I extracted only the file by splitting the string.

ASP.NET On Response.Write to iframe complete

I'm developing an application in ASP.NET that is designed to create reports and download them to the client. I'm doing this using an iframe that is posted to the server. Once operations are completed, the report is downloaded to the client using Response.Write().
In the meantime, on the client, I am displaying a GIF to indicate that the server is generating the report. When the report is successfully created and has finished writing to the client, I would like to update the iframe accordingly, and hide the GIF.
Is there any way of determining if the response.write() was successful in the iframe's parent page?
Parent:
<iframe id="iframe1" src="import-upload.html" width="100%" height="300" onload="loadFrame()" frameborder="0">
function redirect(type) {
iframe.getElementById('inputType').value = list.options[list.selectedIndex].value;
iframe.getElementById('inputAction').value = type;
document.getElementById("divOptionsContainer").style.display = "none";
document.getElementById("imgLoadingGif").style.display = "";
iframe.getElementById('frmUpload').submit();
}
Iframe Source:
<div align="center">
<form id="frmUpload" action="AjaxFileHandler.aspx" method="POST" enctype="multipart/form-data" target="_self" style="margin-bottom:20px;">
<input id="fileupload" type="file" name="files[]" />
<input type="hidden" id="inputAction" name="action"/>
<input type="hidden" id="inputType" name="type"/>
</form>
<button id="btnReport" type="button" onclick="parent.redirect('Report')" style="">Report</button>
<button id="btnUpload" type="button" onclick="parent.redirect('Import')" style="">Import</button>
</div>
This is my first post. Please let me know if more information is needed. Thanks in advance.

You can listen to onload event of iframe:
function redirect(type) {
iframe.getElementById('inputType').value = list.options[list.selectedIndex].value;
iframe.getElementById('inputAction').value = type;
document.getElementById("divOptionsContainer").style.display = "none";
document.getElementById("imgLoadingGif").style.display = "";
iframe.onload = function() {
document.getElementById("divOptionsContainer").style.display = "";
document.getElementById("imgLoadingGif").style.display = "none";
}
iframe.getElementById('frmUpload').submit();
}

Add video URL, with live preview option

I am creating a form which allows people to enter a video url. Standard input form, to accept a URL like:
http://video.google.com/videoplay?docid=1299927595688205543
I would like to add a button (within the form, which says something like [preview video]). Basically that button/link appends the link they entered into the input field, to this code:
<a href="http://video.google.com/videoplay?docid=1299927595688205543&lightbox[width]=610&lightbox[height]=360" class="lightbox">google video</a >
This is to be available prior to form submission.

<form id="video_upload_form" action="">
<label for="video_input_box">Video URL</label>
<input type="text" id="video_input_box" value="" />
<input type="submit" value="Add Video" />
</form>
<p>Preview Video</p>
<script type="text/javascript">
$().ready(function(){
$('#video_upload_form').submit(function(){
var video_url_params = '&lightbox[width]=610&lightbox[height]=360';
var video_url = $('#video_input_box').val() + video_url_params;
$('#video_preview').attr('href', video_url);
return false;
});
});
</script>
Also here it is as a JSFiddle: http://jsfiddle.net/Treffynnon/CEMpT/
You will need to do some validation on the URL supplied by the user before putting it into the preview link, but I will leave that part up to you as you have not asked for help with it in your question.