Discussions

 View Only
  • 1.  PromptAndRefresh Code Page: How to edit more than 1 field

    Posted 04-22-2022 12:54

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


  • 2.  RE: PromptAndRefresh Code Page: How to edit more than 1 field

    Posted 03-30-2023 10:41

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



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



  • 3.  RE: PromptAndRefresh Code Page: How to edit more than 1 field

    Posted 03-30-2023 13:41

    I did,   are you trying to do this as well?



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



  • 4.  RE: PromptAndRefresh Code Page: How to edit more than 1 field

    Posted 03-31-2023 12:01

    I don't have a specific use case at this moment, but I would be very interested in how you added more fields!



    ------------------------------
    Mike Tamoush
    ------------------------------



  • 5.  RE: PromptAndRefresh Code Page: How to edit more than 1 field

    Posted 04-05-2023 08:13

    also interested!



    ------------------------------
    Tim D
    ------------------------------



  • 6.  RE: PromptAndRefresh Code Page: How to edit more than 1 field

    Posted 04-05-2023 15:04

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