Not Allowing The Script To Create a .txt File Even When There Is No Input

Question

so i've been trying to create an if statement that will prevent the "submitOrder button" from creating the .txt file even when the user hasn't inputted anything within the function "submitOrder"

Everytime I click the button even though there is text it says "please enter a name" also like mentioned it will create a .txt file even though there was no input by the user.

EDIT: Just for clarification guys the text file gets created and saved into the same folder where I have stored the hta file.

function submitOrder(file) {

  var fso = new ActiveXObject("scripting.filesystemobject")
  var newfile = fso.createTextFile(file, true);
  var string = "Thank You For Your Order \r\n";
  var orderlist = document.getElementById("orderlist");
  var regx = /^[A-Za-z]+$/;
  var orderfilename = document.getElementById('orderfilename').value;

  for (i = 0; i < orderlist.length; i++) {
    if (orderlist.options[i].text != "list of ordered items") {
      string = string + orderlist.options[i].text + '\r\n';
    }
  }

  if (orderfilename == "") {
    alert("please enter a name for your order")
    return false;
  }

  if (!regx.test("orderfilename")) {
    alert("must contain text only")
    return false;
  } else {
    alert(string)
    return true;
  }

  newfile.WriteLine(string);
  newfile.Close();
}

<body onload="screen();">

  <h1>Gigantuano Pizza Company</h1>

  <p>Place your order now!</p>

  <select id="pizza">
    <option value="0.00">Select a pizza</option>
    <option value="10.00">Hawaiian - Large Stuffed Crust - $10.00</option>
    <option value="8.00">Hawaiian - XL Standard Base - $8.00</option>
    <option value="13.50">Hawaiian - XL Stuffed Crust - $13.50</option>
    <option value="10.00">Beef and Onion - Large Stuffed Crust - $10.00</option>
    <option value="8.00">Beef and Onion - XL Standard Base - $8.00</option>
    <option value="13.50">Beef and Onion - XL Stuffed Crust - $13.50</option>
    <option value="11.00">Peperoni Lovers - Large Stuffed Crust - $11.00
    </option>
    <option value="13.50">Chicken Supreme - Large Stuffed Crust - $13.50
    </option>
  </select>

  <input type="button" onclick="addOrderItem()" value="Add Order Item"><br>
  <br> Ordered Items: click to check order
  <select id="orderlist">
    <option value="0.00">list of ordered items</option>
  </select>
  <input type="button" onclick="removeOrderItem();" value="Remove Order 
    Item">

  <br> Order Total: <input type="text" id="ordertotal" value=0.0></input><br>
  <br>
  <br> Type your order submission file name (one word):<input type="text" id="orderfilename" value=""></input>
  Click to submit your order:
  <input type="button" onclick="submitOrder(document.getElementById('orderfilename').value + 
    '.txt');" value="Submit Order">
  <input type="button" value="Open Order Text File" onclick="OpenFile( 
    document.getElementById('orderfilename').value + '.txt' );" />
  <br>

</body>

You've to check the value of the text box __before__ creating the textfile, returning `false` from a function doesn't cancel anything what was done in the function. Especially returning anything from a click event handler is not useful at all, the returned value is not used anywhere. — Teemu, Oct 12 '18 at 04:30

Mark Schultheiss · Answer 1 · 2018-10-12T11:46:18.820

Several errors in the script, made some comments - worked in a less than ideal check for ActiveX (not part of the issue).

Took the event handlers out of the markup;

Note I did a "bit" more than the question but bottom line this should do the text file only when you have a valid order.

window.onload = screen();
// borrowed from https://stackoverflow.com/a/34729943/125981
function addEventListener(obj, evt, func) {
  if ('addEventListener' in window) {
    obj.addEventListener(evt, func, false);
  } else if ('attachEvent' in window) { //IE
    obj.attachEvent('on' + evt, func);
  }
}

function screen() {
  var bugs = "onscreen";
}
var sobuttonElement = document.getElementById('submitorder');
sobuttonElement.addEventListener('click', submitOrder);
var ofbuttonElement = document.getElementById('openfile');
ofbuttonElement.addEventListener('click', OpenFile);
var aoibuttonElement = document.getElementById('addorderitem');
aoibuttonElement.addEventListener('click', addOrderItem);
var roibuttonElement = document.getElementById('removeorderitem');
roibuttonElement.addEventListener('click', removeOrderItem);
var newLine = '\r\n';

function addOrderItem(event) {
  event.target.style.border = "solid 2px orange";
  //alert('Element clicked through function!');
  var select = document.getElementById('pizza');
  var pizzas = select.selectedOptions;
  //console.log(pizzas);
  var orderList = document.getElementById('orderlist');
  for (var i = 0; i < pizzas.length; i++) {
    // console.log(pizzas[i]);
    var opt = document.createElement('option');
    opt.value = pizzas[i].value;
    opt.innerHTML = pizzas[i].innerHTML;
    orderList.appendChild(opt);
    var orderTotal = document.getElementById('ordertotal');
    orderTotal.value = (orderTotal.value * 1) + (pizzas[i].value * 1);
  }
}

function OpenFile(event) {
  var orderfilenameValue = document.getElementById('orderfilename').value;
  var file = document.getElementById('orderfilename').value + '.txt'
}

function removeOrderItem() {
  var orderList = document.getElementById('orderlist');
  if (orderList.selectedIndex > 0) {
    orderList.options[orderList.selectedIndex].remove(orderList.selectedIndex);
    var orderTotal = document.getElementById('ordertotal');
    orderTotal.value = (orderTotal.value * 1) - orderList.options[orderList.selectedIndex].value;
  }

}

function getOrderText(message) {
  console.log(message);
  var orderText = "";
  var orderList = document.getElementById('orderlist');
  if (orderList.options.length > 1) {
    for (var i = 1; i < orderList.options.length; i++) {
      //console.log("food:", i, orderList.options[i]);
      orderText = orderText + newLine + orderList.options[i].text;
    }
    orderText = orderText + "\n\r" + message;
  }
  return orderText;
}

function submitOrder() {
  var orderfilenameValue = document.getElementById('orderfilename').value;
  var file = orderfilenameValue + '.txt';
  alert(orderfilenameValue);
  var thankYouMessage = "Thank You For Your Order \r\n";
  var orderlist = document.getElementById("orderlist");
  var regx = /^[A-Za-z]+$/;
  /* moved to a function
    for (var i = 0; i < orderlist.length; i++) {
      if (orderlist.options[i].text != "list of ordered items") {
        thankYouMessage = thankYouMessage + orderlist.options[i].text + '\r\n';
      }
    }
  */
  var isValidText = (orderfilenameValue.length > 0);
  if (!isValidText) {
    alert("please enter a name for your order");
    return false;
  }
  isValidText = isValidText && regx.test(orderfilenameValue);
  if (!isValidText) {
    alert("must contain text only");
    return false;
  } else {
    // only if we have a valid name
    var newfile = undefined;
    if ("ActiveXObject" in window) {
      let fso = new ActiveXObject("scripting.filesystemobject");
      newfile = fso.createTextFile(file, true);
    } else {
      alert("Must use Internet Explorer");
    }
    var orderTotal = document.getElementById('ordertotal');

    var message = "Order Total: " + orderTotal.value + newLine + thankYouMessage;
    var orderText = getOrderText(message);
    console.log(orderText);
    // in original code these were never executed
    if (newfile) {
      newfile.WriteLine(orderText);
      newfile.Close();
    }
  }
}

.row {
  margin-top: 1em;
  margin-bottom: 1em;
}

<body>
  <h1>Gigantuano Pizza Company</h1>
  <p>Place your order now!</p>
  <p>
    <select id="pizza">
      <option value="0.00">Select a pizza</option>
      <option value="10.00">Hawaiian - Large Stuffed Crust - $10.00</option>
      <option value="8.00">Hawaiian - XL Standard Base - $8.00</option>
      <option value="13.50">Hawaiian - XL Stuffed Crust - $13.50</option>
      <option value="10.00">Beef and Onion - Large Stuffed Crust - $10.00</option>
      <option value="8.00">Beef and Onion - XL Standard Base - $8.00</option>
      <option value="13.50">Beef and Onion - XL Stuffed Crust - $13.50</option>
      <option value="11.00">Peperoni Lovers - Large Stuffed Crust - $11.00
      </option>
      <option value="13.50">Chicken Supreme - Large Stuffed Crust - $13.50
      </option>
    </select>
    <button id="addorderitem" type="button">Add Order Item</button></p>
  <br><label for="orderlist">Ordered Items: click to check order</label>
  <select id="orderlist">
    <option value="0.00" selected>list of ordered items</option>
  </select>
  <button type="button" id="removeorderitem" onclick="removeOrderItem();">Remove Order 
    Item</button>

  <div class="row"><label for="ordertotal">Order Total:</label> <input type="text" id="ordertotal" value=0.0></input>
  </div>

  <div class="row"><label for="orderfilename">Type your order submission file name (one word):</label><input type="text" id="orderfilename" value="" />
  </div>
  <div class="row">
    <label for="submitorder"> Click to submit your order:</label>
    <button id="submitorder" type="button">Submit Order</button>
    <button id="openfile" type="button">Open Order Text File</button>
  </div>
</body>

@Teemu - yea, I also reworked this given it will be IE removing the `const` making them `var` instead — Mark Schultheiss, Oct 12 '18 at 11:48

score 0 · Answer 2 · answered Oct 10 '18 at 12:00

0

From client side, we could not create file and save it to client.

answered Oct 10 '18 at 12:00

Ngo Dinh Thinh

1
1

3

Welcome to Stack Overflow. It's good practice to provide a little more information in your answer. You can read https://stackoverflow.com/help/how-to-answer – Mikkel Oct 10 '18 at 12:03
1

Maybe you can't, but for those of us who are still using HTA, creating files and saving them to "client" is a very regular task. – Teemu Oct 10 '18 at 12:28

Gangadhar Jannu · Answer 3 · 2018-10-12T04:52:41.670

Below condition is incorrect.

if (orderfilename == "") { will return true

as you manually set orderfilename value as "" in the below line

<input type="text" id="orderfilename" value="">

So just change your condition as below which will work as you expected.

if (orderfilename && orderfilename.trim()) {

or
if(orderfilename.length>0)

function submitOrder(file) {

  var fso = new ActiveXObject("scripting.filesystemobject")
  var newfile = fso.createTextFile(file, true);
  var string = "Thank You For Your Order \r\n";
  var orderlist = document.getElementById("orderlist");
  var regx = /^[A-Za-z]+$/;
  var orderfilename = document.getElementById('orderfilename').value;

  for (i = 0; i < orderlist.length; i++) {
    if (orderlist.options[i].text != "list of ordered items") {
      string = string + orderlist.options[i].text + '\r\n';
    }
  }

  if (!(orderfilename && orderfilename.trim())) {
    alert("please enter a name for your order")
    return false;
  }

  if (!regx.test("orderfilename")) {
    alert("must contain text only")
    return false;
  } else {
    alert(string)
    return true;
  }

  newfile.WriteLine(string);
  newfile.Close();
}

<body onload="screen();">

  <h1>Gigantuano Pizza Company</h1>

  <p>Place your order now!</p>

  <select id="pizza">
    <option value="0.00">Select a pizza</option>
    <option value="10.00">Hawaiian - Large Stuffed Crust - $10.00</option>
    <option value="8.00">Hawaiian - XL Standard Base - $8.00</option>
    <option value="13.50">Hawaiian - XL Stuffed Crust - $13.50</option>
    <option value="10.00">Beef and Onion - Large Stuffed Crust - $10.00</option>
    <option value="8.00">Beef and Onion - XL Standard Base - $8.00</option>
    <option value="13.50">Beef and Onion - XL Stuffed Crust - $13.50</option>
    <option value="11.00">Peperoni Lovers - Large Stuffed Crust - $11.00
    </option>
    <option value="13.50">Chicken Supreme - Large Stuffed Crust - $13.50
    </option>
  </select>

  <input type="button" onclick="addOrderItem()" value="Add Order Item"><br>
  <br> Ordered Items: click to check order
  <select id="orderlist">
    <option value="0.00">list of ordered items</option>
  </select>
  <input type="button" onclick="removeOrderItem();" value="Remove Order 
    Item">

  <br> Order Total: <input type="text" id="ordertotal" value=0.0></input><br>
  <br>
  <br> Type your order submission file name (one word):<input type="text" id="orderfilename" value=""></input>
  Click to submit your order:
  <input type="button" onclick="submitOrder(document.getElementById('orderfilename').value + 
    '.txt');" value="Submit Order">
  <input type="button" value="Open Order Text File" onclick="OpenFile( 
    document.getElementById('orderfilename').value + '.txt' );" />
  <br>

</body>

`orderfilename == ""` will return `false`, if a user has entered a value to the textbox, though trimming the entered value is very useful. What is the point to first create the textfile, and then check if it can be created afterwards? — Teemu, Oct 12 '18 at 04:45
@teemu you are right the condition provided would be suffice to check if the textbox has value. And for crating file, it depends on his requirement as he is returning before closing the file — Gangadhar Jannu, Oct 12 '18 at 04:52
But OP's problem is, that the text file is created, no matter what the namecheck results in. Ofcourse it is created, because they create it a way before the check ... — Teemu, Oct 12 '18 at 04:54

score 0 · Answer 4 · answered Oct 10 '18 at 12:20

I'm not sure about your code for creating the text file or not but I'm sure that below code create the text file on client side.

  var hiddenElement = document.createElement('a');
  hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI("All your text should be here ");
  hiddenElement.target = '_blank';
  hiddenElement.download = 'Please give the file name such as test.txt';
  hiddenElement.style.display = 'none';
  document.body.appendChild(hiddenElement);
  hiddenElement.click();
  document.body.removeChild(hiddenElement);

Not Allowing The Script To Create a .txt File Even When There Is No Input

4 Answers4