Home/ Questions/Q 8764929
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T16:09:22+00:00

preface: I’m not a programmer or even web developer. I’m a print designer with

  • 0

preface: I’m not a programmer or even web developer. I’m a print designer with just enough info to be dangerous. so, please don’t assume I know something basic 😉

I’m working on an in-house form to generate HTML for the non-HTMLers in our office. It’s just a basic form that takes data entry and concatenates it together inside the proper HTML.

problem is not all of the field entries are required. but, the way it is working currently it just assumes data present.

hopefully this is a basic issue. but, I need to insert some logic in to the concatenation portion of the javascript that ignores null fields.

here’s a working snippet of what I’m talking about:

http://devtest.host.org/testing/sample-form.html

of course, the actual form has 25 or so fields. but, i’ve simplified it here to make my point: suppose only one bullet is entered in the form. I need to be able to tell the variable “text” to omit the second set of 

<LI> </LI>

tags since there is no 2nd bullet data.

if someone has some suggestions on how to approach this issue I’d appreciate it.

thanks.

[edit: added codeblock]

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Parent Category HTML Generator</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background-color:white;
}
label, textarea {
display:block;
}
</style>
<script type="text/javascript">
window.onload=function() {
document.getElementById('product').onsubmit=function() {
 var Main_Image=document.getElementById('Main_Image').value;
 var Bullet1=document.getElementById('Bullet1').value;
 var Bullet2=document.getElementById('Bullet2').value;


var text="<img src=\"assets/images/"+Main_Image+"\"><br><ul><li>"+Bullet1+"</li><li>"+Bullet2+"</li></ul>";
document.getElementById('code').value=text;
return false;
 }
}
</script>
</head>
<body>

<form id="product" action="#">
Filename: <INPUT TYPE="TEXT" TABINDEX="1" size="40" id="Main_Image"><BR>
Bullet 1: <INPUT TYPE="TEXT" TABINDEX="3" size="50" id="Bullet1"><BR>
Bullet 2: <INPUT TYPE="TEXT" TABINDEX="4" size="50" id="Bullet2"><BR>
<BR>

<input type="submit">
</form>
<BR><BR>

<p>HTML:</p>
<textarea rows="20" cols="80" id="code"></textarea>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I would take this approach:

    var Main_Image_present = Main_Image.length > 0;
var Bullet1_present = Bullet1.length > 0;
var Bullet2_present = Bullet2.length > 0;
var text= '';
if(Main_Image_present)
  text += '<img src="assets/images/'+Main_Image+'"><br>';
if(Bullet1_present || Bullet2_present) {
  text += '<ul>';
  if(Bullet1_present)
    text += '<li>'+Bullet1+'</li>';
  if(Bullet2_present)
    text += '<li>'+Bullet2+'</li></ul>';
  text += '</ul>';
}

    Basically this just checks the length on the values of the inputs. It only adds the necessary HTML if the value is present (or length > 0).

    • 0