Re: PromptAndRefresh Code Page: How to edit more than 1 field
The fix involved tweaking the javascript on the code page to capture additional fields, you'll see them below as input, input2, input3 etc. What this does is pop up a simple form with 4 questions. 3 are just text questions and one is a 'rating' type question. Here is my code page after my modification, the sections in bold are where I added extra fields:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QA Checklist</title>
<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
display: block;
margin-left: auto;
margin-right: auto;
}
/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style></head>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>
<script>
function run() {
$('#form').hide();
$('#status').show();
const input = document.getElementById('input').value;
const input2 = document.getElementById('input2').value;
const input3 = document.getElementById('input3').value;
const input4 = document.getElementById('input4').value;
let urlParams = new URLSearchParams(window.location.search);
let url = urlParams.get('url') + encodeURIComponent(input) +
`&_fid_1415=` + encodeURIComponent(input2) +
`&_fid_1417=` + encodeURIComponent(input3) +
`&_fid_1419=` + encodeURIComponent(input4);
let redirect = urlParams.get('redirect');
let landing;
if(redirect){
landing = redirect;
}else{
landing = document.referrer;
}
fetch(url, {
method: 'post',
mode: 'no-cors',
headers: { 'Content-type': 'text/plain' }
}).then((response) => {
rdr(landing);
})
}
function rdr(landing){
// Redirects to the specified landing page, if this page is the landing page as well, then redirect to the app home page
if(landing && landing !== window.location.href) {
window.location.href = landing;
}else{
window.location.href = window.location.origin + window.location.pathname;
}
}
</script>
<div class="container" id="form">
<h2>QA Checklist</h2>
<form onsubmit="run();">
<div class="form-group" style="width: 300px;">
<label for="input">1. Please answer this question.</label>
<input class="form-control" id="input" autofocus="">
<label for="input2">2. Please answer this question.</label>
<input class="form-control" id="input2" autofocus="">
<label for="input3">3. Please answer this question.</label>
<input class="form-control" id="input3" autofocus="">
<label for="input4">4. Please answer this question.</label>
<input class="form-control" list="datalistOptions" id="input4" placeholder="Choose a rating" autofocus="">
<datalist id="datalistOptions">
<option value=1>
<option value=2>
<option value=3>
<option value=4>
<option value=5>
</datalist>
</div>
<a class="btn btn-primary" onclick="run()" role="button">Submit</a> <a
class="btn" onclick="window.location.href = document.referrer;" role="button">Cancel</a>
</form>
</div>
<div class="container" id="status" style="text-align:center" hidden="">
<h2>Saving your answers, will redirect once complete.</h2>
<div class="loader" id="loader"></div>
</div>
<br>
</body>
</html>
------------------------------
Jeff Peterson
------------------------------