Skip to main content
Question

PromptAndRefresh Code Page: How to edit more than 1 field

  • April 22, 2022
  • 0 replies
  • 32 views

SSNJeffP
Forum|alt.badge.img+11

I've taken the example here:  https://resources.quickbase.com/db/bq8meiyhh?a=dr&key=4
and I have it working perfectly in my app,  however I'm having a tough time modifying the code to edit more than 1 field.   

Can anyone show me how you would modify this code to collect input and write the value for 2 or more fields? I cannot figure out what I'm missing to do that.



------------------------------
Jeff Peterson
------------------------------

  • Quickbase Alumni
  • March 30, 2023

Hi Jeff, did you happen to find a resolution for this?



------------------------------
Amber Polston
------------------------------

SSNJeffP
Forum|alt.badge.img+11
  • Author
  • Quickbase Alumni
  • April 5, 2023

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
------------------------------