Forum Discussion

LijaHarris's avatar
LijaHarris
Qrew Trainee
2 years ago

CODE PAGE: Javascript OnInput Function with Resulting Prompt or Alert (No UPS needs to Be QuickBase/Code Page Native!

Hi,

I have a code page where users can input their information and it goes directly into QuickBase in Javascript and HTML.  Our clients were wondering if a prompt could be given to users if they entered in a zip code that is not in their service area - like the Zip Code is not found in their LIST.  Here is what I have so far but it is not working.  As can be seen below, the fid is 16 of the field users input their zip code into.  Zip Code is my LIST the client gave me (I gave a couple examples).  I believe the OnChange is not working and instead should be OnInput?  I would like the promp to ideally happen oninput instead since its a input field.  For reference zip field (fid 16) would be what the user inputs.  Otherwise is ther another way to get the user's input, check if its included in a LIST, and if not have text or a Pop up or Alert?:

<script lang="javascript">
function CheckForZip
{
var zipcode = [94602,95616]
var inputzip = "<field fid='16'>" + $("input[name=_fid_16]").val() + "</field>";

if (zipcode.includes(inputzip)) {
alert ('yes');
}
}

On the form:
<tr><td style="font-family: Sans-serif;" class=m>Zip Code:*</td>
<td class=m><input type=text size=60 onChange=CheckForZip name=_fid_16 ></td></tr>

------------------------------
Lija Harris
------------------------------

4 Replies

Sort By
  • LijaHarris's avatar
    LijaHarris
    Qrew Trainee
    2 years ago
    I have figured out how to get the prompt to work in console, but how do I get it to work in the code page?
    Seems like the oninput is not working


    ------------------------------
    Lija Harris
    ------------------------------
  • DougHenning1's avatar
    DougHenning1
    Community Manager
    2 years ago
    Hi Lija,

    Update the field on the form to include the id and remove the onChange attribute:
    <tr>
    <td style="font-family: Sans-serif;" class="m">Zip Code:*</td>
    <td class="m"><input type="text" size="60" id="_fid_16" name="_fid_16"/></td>
</tr>​


    Instead of the CheckForZip function, you can add an event listener to the field:
    <script language="javascript">
    var fid16 = document.getElementById('_fid_16');
    
    fid16.addEventListener('change', (event) => {
        var zipcode = ["94602", "95616"]
        if (zipcode.includes(event.target.value)) {
            alert('yes');
        }
    });
</script>​


    Hope that helps!



    ------------------------------
    Doug Henning
    ------------------------------
  • RyanStanford2's avatar
    RyanStanford2
    Qrew Member
    2 years ago
    In your original code, you have the xml <field fid='16'></field> added to your input variable.

    Since those are nor in your zip code array, your .includes() is always false, so no alert.

    ------------------------------
    Ryan Stanford
    ------------------------------
  • SimonH's avatar
    SimonH
    Qrew Cadet
    2 years ago
    If you want the input to be limited to a specific list of Zip codes then you may want to use a select element and not a text input.
    Alternately you can use HTML5 validation with a pattern, but that can get very clunky with a long list of zips

    ------------------------------
    Simon H
    ------------------------------