How do I check to see if a field has a value before executing document.getElementById?

Question

This probably isn't very complicated but I'm not a coder by trade so I'm sure I am missing something here.

Here is what I have so far.

function buildURL (){
          url = document.getElementById("url").value;
          source = document.getElementById("source").value; //required
          campaignId = '-_-' + document.getElementById("campid").value; //required
          brand  = '-_-' + document.getElementById("brand").value; //required
          brand2  = '-' + document.getElementById("brand2").value; //optional
          brand3  = '-' + document.getElementById("brand3").value; //optional
          medium  = '-_-' + document.getElementById("medium").value; //required
          product = '&cm_mmca1=" + document.getElementById("product").value; //optional

          if (url.includes('?')) {
              url = url + '&cm_mcc=';
          } else {
              url = url + '?cm_mmc=';
          }

          document.getElementById("fullURL").innerHTML = "URL: " + url + source + campaignId + brand + brand2 + brand3 + medium + product ;
       }

Now, the url part works great. It prints to screen as soon as I enter a URL in a text box in a form I created and it updates as I make changes. The problem comes with the additional values I print to screen. Everything that proceeds each variable's document.getElementById prints to the screen immediately. This is fine for the required variables but not the optional variables. I'm thinking the solution is to prevent all fields from being passed to document.getElementById("fullURL").innerHTML unless there is a value in the field but I am not sure how to do that. Suggestions?

I know it can be hard to come up with the right search terms, but please do try before posting a new question. I tried "javascript check if element is empty", and found many questions and answers here on SO with code you can copy. — Don't Panic, Jun 08 '20 at 00:31
Does this answer your question? [How to check if div element is empty](https://stackoverflow.com/questions/14535733/how-to-check-if-div-element-is-empty) — Don't Panic, Jun 08 '20 at 00:31

Kostas Minaidis · Accepted Answer · 2020-06-08T00:47:51.153

0

You need to check each of the option values, and if the value is not an empty String, assign a special value to the variable, else just return an empty String, having no effect on the concatenated final URL:

function buildURL() {

    url = document.getElementById("url").value;
    source = document.getElementById("source").value; //required
    campaignId = '-_-' + document.getElementById("campid").value; //required
    brand = '-_-' + document.getElementById("brand").value; //required
    medium = '-_-' + document.getElementById("medium").value; //required

    // OPTIONAL VALUES: (Use trim() to ensure no white spaces affect our checks)

    const brand2Value = document.getElementById("brand2").value.trim();
    // ( brand2Value ) ? essentially works much like ( brand2Value !== "" ) ?
    brand2 = brand2Value ? '-' + brand2Value : ""; //optional

    const brand3Value = document.getElementById("brand3").value.trim();
    brand3 = brand3Value ? '-' + brand3Value : ""; //optional

    const productValue =  document.getElementById("product").value.trim();
    product = productValue ? '&cm_mmca1=' + productValue : ""; //optional

    if (url.includes('?')) {
        url = url + '&cm_mcc=';
    } else {
        url = url + '?cm_mmc=';
    }

    document.getElementById("fullURL").innerHTML = "URL: " + url + source + campaignId + brand + brand2 + brand3 + medium + product;
}

Additional notes:

Is there a reason why the function variables (url,source,brand,etc.) are not being declared with var/let/const?

Make sure you always declare variables with either let or const, otherwise they will become available in the global scope, which is something we try to avoid in JavaScript.

edited Jun 08 '20 at 00:47

answered Jun 08 '20 at 00:33

Kostas Minaidis

4,681
3
17
25

Initially I was looking at the variables being global since I also submit the values in these fields to a Google Sheet but other then that it was/is a newb error. Now, this code works pretty good with one flaw. If I set an optional value it will not update unless I make a change to one of the required fields (source, campaignId, brand or medium. It seems like I might need some type of eventListener? – DK_Connection Jun 08 '20 at 16:59
How is the buildURL function triggered at the moment? @DK_Connection – Kostas Minaidis Jun 08 '20 at 19:23
You probably need an Event Listener on the change event. – Kostas Minaidis Jun 08 '20 at 19:24
Actually, it's not being triggered at all with a funciton call. Right now everything is being triggered by inputs into fields and selections in dropdowns. – DK_Connection Jun 08 '20 at 19:27
1

I take that back I trigger it with `oninput` and `onchange` which was my problem. I hadn't implemented those on my other fields and dropdowns. – DK_Connection Jun 08 '20 at 20:21
Maybe this is for another question but how can you take the input, which sometimes contains a space, and encode that space when you capture it? – DK_Connection Jun 09 '20 at 19:44
You are probably looking for encodeURI or encodeURIComponent: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI – Kostas Minaidis Jun 10 '20 at 21:41

How do I check to see if a field has a value before executing document.getElementById?

1 Answers1