How to Create Prompt With Two Input Fields

Is there any way to create prompt with two input fields?

This is not possible with an OS or native browser window popping up. You will have to create a custom overlay dialog.

I would advise using a library like jQuery UI to do this. You can then customize whatever is in the popup.

You can view a demo of the dialog here

SweetAlert prompt with two input fields

As far as I know you can't do this off-the-shelf. You can either fork and implement, or just use a HTML element as a modal (e.g. as in Bootstrap's modals).

Prompt box with 2 text fields

See the sample fiddle I 've made. Make the required adjustments and use it.

$("p").click(function () {
   $("<div class='popup'></div>").html('<input type="text" /><br /><input type="text" />').appendTo("body");
});​

Here is the sample fiddle of it.

http://jsfiddle.net/zsfE3/9/

Hope it helps

How to create a form with two input fields where both require file uploads, using html and google apps script?

In your situation, how about the following modification?

Modified script:

HTML&Javascript side:

In this modification, please modify your HTML function as follows.

From:

<button type="submit" onclick = submitForm(this.form)>Submit</button>

To:

<button type="submit">Submit</button>

Google Apps Script side:

In this modification, please modify your uploadFiles function as follows.

From:

var fileUrl = "";
var fileName = "";
var fileUrl2 = "";
var fileName2 = "";

//Upload file if exists and update the file url
if (formObject.myFile1.length > 0) {
  var blob = formObject.myFile1;
  var file = folder.createFile(blob);
  file.setDescription("Uploaded by " + formObject.first_name);
  fileUrl = file.getUrl();
  fileName = file.getName();
} else{
  fileUrl = "Record saved without a file";
}

//Upload file if exists and update the file url
if (formObject.myFile2.length > 0) {
  var blob2 = formObject.myFile2;
  var file2 = folder.createFile(blob2);
  file2.setDescription("Uploaded by " + formObject.first_name);
  fileUrl2 = file2.getUrl();
  fileName2 = file2.getName();
} else{
  fileUrl2 = "Record saved without a file";
}

//Saving records to Google Sheet
sheet.appendRow([
  formObject.myName,
  formObject.myEmail,
  formObject.myNum,
  fileName,
  fileUrl,
  fileName2,
  fileUrl2,
  Utilities.formatDate(new Date(), "GMT+8:00", "yyyy-MM-dd'T'HH:mm:ss'Z'")]);

To:

var files = ["myFile1", "myFile2"].flatMap(e => {
  var file = folder.createFile(formObject[e]);
  var fileName = file.getName();
  var fileUrl = "Record saved without a file";
  if (file.getSize() > 0 && fileName != "Untitled") {
    file.setDescription("Uploaded by " + formObject.first_name);
    fileUrl = file.getUrl();
  } else {
    fileName = "";
    file.setTrashed(true);
  }
  return [fileName, fileUrl];
});
sheet.appendRow([
  formObject.myName,
  formObject.myEmail,
  formObject.myNum,
  ...files,
  Utilities.formatDate(new Date(), "GMT+8:00", "yyyy-MM-dd'T'HH:mm:ss'Z'")
]);

Note:

• In December 2021, at V8 runtime, the form object including the file object got to be able to be correctly parsed from Javascript to Google Apps Script. Ref The bug has been resolved. It seems that about the file object, in the current stage, the object can be created as a file using createFile method. But, unfortunately, it seems that the file content cannot be directly retrieved from the form object. So, as a workaround, after the file was created as a file from the parsed form object, I used the method for checking the file size and the filename. If an error like Forms with file inputs must be the only parameter. doesn't occur, when 2nd argument can be used like google.script.run.uploadFiles(formObject, arg2), the process can be simpler. But, in this situation, I used this workaround.

• When you modified the Google Apps Script, please modify the deployment as a new version. By this, the modified script is reflected in Web Apps. Please be careful this.

• You can see the detail of this in the report of "Redeploying Web Apps without Changing URL of Web Apps for new IDE".

Multiple input boxes - alertifyjs / Jquery

In your script you call a function named updateListItems(inpOneVal,inpTwoVal);

As that function is not declared anywhere, it errors, so with that temporarily commented out, it works.

Stack snippet

<html>
<head>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs@1.11.1/build/css/alertify.min.css" />  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/alertifyjs@1.11.1/build/css/themes/bootstrap.min.css" />  <script src="https://cdn.jsdelivr.net/npm/alertifyjs@1.11.1/build/alertify.min.js"></script>
</head>
<body>
  <div style="display:none;">    <div id="dlgContent">      <p> Enter Value One </p>      <input class="ajs-input" id="inpOne" type="text" value="Input One Default Value" />
      <p> Enter Value Two </p>      <input class="ajs-input" id="inpTwo" type="text" value="Input two default Value" />
    </div>  </div>
  <!-- the script  -->
  <script>    var dlgContentHTML = $('#dlgContent').html();
    $('#dlgContent').html("");    alertify.confirm(dlgContentHTML).set('onok', function(closeevent, value) {      var inpOneVal = $('#inpOne').val();      var inpTwoVal = $('#inpTwo').val();      //updateListItems(inpOneVal,inpTwoVal); 
      if (inpOneVal == "test" && inpTwoVal == "test") {        alertify.success('Successful');      } else {        alertify.error('Wrong')
      }    }).set('title', "Update");  </script>
</body>
</html>