How do I get my Web Form to grow and shrink based on user click events?

ChrisSergent — Mon, 06 Jul 2015 22:11:51 GMT

I am building apps for the field and I need my forms to grow and shrink based on user selections. In this example: JS Bin - Collaborative JavaScript Debugging a user clicks on a button to add a tenant address to owned property. I want the buttons on the form to move down with each button click after the next address. How would I do that?

Re: How do I get my Web Form to grow and shrink based on user click events?

RobertScheitlin__GISP — Sat, 11 Dec 2021 20:42:49 GMT

Chris,

You should use display and not visiblity:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>City Email Registration</title>
  <style>
    body,
    #btnAddTenant {
      background-color: #8DB1CD;
    }

    div#all {
      background-color: white;
      margin-left: 20%;
      margin-right: auto;
      height: 2300px;
      width: 700px;
      border-radius: 50px;
      z-index: 0;
      position: absolute;
    }

    #instructions {
      left: 5%;
      padding: 25px;
      font-family: Arial;
    }

    #letter {
      left: 5%;
      position: absolute;
      z-index: 50;
      font-family: Arial;
      font-size: small;
    }

    input {
      width: 350px;
    }

    #submit,
    #reset {
      width: 70px;
      background-color: #8DB1CD;
    }

    p#title {
      font: 45px arial, sans-serif;
      padding: 25px;
      text-align: center;
      margin-left: auto;
    }

    p#heading {
      font: 30px arial, sans-serif;
      padding: 0px;
      text-align: center;
      margin-left: auto;
    }

    p#subtitle {
      font: 15px arial, sans-serif;
      font-weight: bold;
      width: 75%;
      margin-left: 75px;
      text-align: justify;
      padding: 0px;
    }

    p#desc {
      font: 15px arial, sans-serif;
      width: 75%;
      margin-left: 75px;
      text-align: justify;
      padding: 15px;
    }

    form#emailreg {
      font: 15px arial, sans-serif;
      width: 75%;
      margin-left: 75px;
      text-align: justify;
      padding: 15px;
    }

    ul#faq {
      font: 15px arial, sans-serif;
      list-style-type: none;
      margin-left: 75px;
    }

    ul#nav li {
      display: inline;
      border-left: 1px solid black;
    }

    ul#nav li a {
      padding-left: 1em;
      padding-right: 1em;
      color: #000;
      background-color: #8DB1CD;
      text-decoration: none;
      font-family: Arial Narrow, arial, sans-serif;
    }

    ul#faq li a {
      color: #000;
      text-decoration: none;
      font-family: Arial Narrow, arial, sans-serif;
    }

    p#desc a {
      color: #000;
      text-decoration: none;
      font-family: Arial Narrow, arial, sans-serif;
    }

    p#desc a:hover {
      color: blue;
      font-weight: bold;
    }

    ul#nav li a:hover {
      color: blue;
    }

    ul#faq li a:hover {
      color: blue;
    }

    ul#faq li a:hover,
    ul#nav li a:focus {
      font-weight: bold;
    }

    ul#nav li a:hover,
    ul#nav li a:focus {
      font-weight: bold;
    }

    ul#nav li:first-child {
      border-left: none;
    }

    ul#nav {
      padding-left: 0;
      text-align: center;
      font: 45px arial, sans-serif;
    }

    div#linklist {
      background-color: #8DB1CD;
      border-radius: 25px;
      width: 575px;
      margin-left: auto;
      margin-right: auto;
    }

    div#logo {
      position: absolute;
      left: 0px;
      top: 0px;
      padding: 10px;
    }

    div#titlediv {
      position: relative;
      margin-left: auto;
      margin-right: auto;
      padding: 10px;
      top: -75px;
    }

    div#descdiv {
      text-align: justify;
      left: 0px;
      top: 75px;
      padding: 10px;
    }

    img#imglogo {
      vertical-align: text-top;
      border-radius: 25px;
    }

    div#homelink {
      font: 24px arial, sans-serif;
      display: inline;
      margin-left: 50px;
      text-align: center;
      padding: 15px;
      background-color: #8DB1CD;
      border-radius: 25px;
      width: 200px;
      font-family: Arial Narrow, arial, sans-serif;
    }

    div#homelink a:link,
    a:visited {
      text-decoration: none;
      color: #000;
    }

    div#homelink a:hover {
      color: blue;
      font-weight: bold;
    }

    div#contactlink {
      font: 24px arial, sans-serif;
      text-decoration: none;
      display: inline;
      margin-left: 275px;
      text-align: center;
      padding: 15px;
      background-color: #8DB1CD;
      border-radius: 25px;
      width: 144px;
      font-family: Arial Narrow, arial, sans-serif;
    }

    div#contactlink a:link,
    a:visited {
      text-decoration: none;
      color: #000;
    }

    div#contactlink a:hover {
      color: blue;
      font-weight: bold;
    }
  </style>

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>
  <div id="all">
    <div id="titlediv">
      <p id="title"><img src="images/cityLogo.png" />  City Email Registration</p>
    </div>
    <div id="instructions">
      <p>Use this form to register your email address with the City. Additionally, you may register a tenant's email address.</p>
    </div>
    <form name="frmRegistration" action="mailto:JBauer@decaturil.gov;BTyus@decaturil.gov?Subject=Property%20Code%20Violation%20Notice" method="post" autocomplete="on" enctype="text/plain">
      <!-- Letter Begin -->
      <div id="letter">
        <label for="ownerName">Owner:</label>
        <br />
        <input type="text" placeholder="Enter the owner's name" required name="ownerName" id="ownerName" />
        <br />
        <br />
        <label for="ownerAddress">Owner's Address:</label>
        <br />
        <input type="text" placeholder="Enter the owner's address" required name="ownerAddress" id="ownerAddress" />
        <br />
        <br />
        <label for="ownerEmail">Owner's E-Mail:</label>
        <br />
        <input type="email" placeholder="Enter the owner's E-Mail" required name="ownerEmail" id="ownerEmail" />
        <br />
        <br />
        <label for="ownerPhone">Owner's Phone Number (to verify accuracy only):</label>
        <br />
        <input type="tel" placeholder="Enter the owner's Phone" required name="ownerPhone" id="ownerPhone" />
        <br />
        <br />
        <label for="ownerLastFour">Owner's Last 4 Digits of SSN (to verify accuracy only):</label>
        <br />
        <input type="text" placeholder="Enter the owner's last four digits of SSN" required name="ownerLastFour" id="ownerLastFour" />
        <br />
        <br />
        <br />
        <label for="propertyAddress1">Property Address:</label>
        <br />
        <input type="text" placeholder="Enter the property address" required name="propertyAddress1" id="propertyAddress1" />
        <br />
        <br />
        <label for="propertyAddress2">Property Address:</label>
        <br />
        <input type="text" placeholder="Enter an additional property" name="propertyAddress2" id="propertyAddress2" />
        <br />
        <br />
        <label for="propertyAddress2">Property Address:</label>
        <br />
        <input type="text" placeholder="Enter an additional property" name="propertyAddress3" id="propertyAddress3" />
        <br />
        <br />
        <label for="propertyAddress4">Property Address:</label>
        <br />
        <input type="text" placeholder="Enter an additional property" name="propertyAddress4" id="propertyAddress4" />
        <br />
        <br />
        <label for="propertyAddress5">Property Address:</label>
        <br />
        <input type="text" placeholder="Enter an additional property" name="propertyAddress5" id="propertyAddress5" />
        <br />
        <br />
        <label for="propertyAddress6">Property Address:</label>
        <br />
        <input type="text" placeholder="Enter an additional property" name="propertyAddress6" id="propertyAddress6" />
        <br />
        <br />
        <label for="propertyAddress7">Property Address:</label>
        <br />
        <input type="text" placeholder="Enter an additional property" name="propertyAddress7" id="propertyAddress7" />
        <br />
        <br />
        <p>Tenant E-Mail Registration</p>
        <br />
        <br />
<!-- Begin Tenants -->
        <div id="tenant">
          <div id="tenant1">
            <label for="tenantName1">Name:</label>
            <br />
            <input type="text" placeholder="Enter an additional tenant name" name="tenantName1" id="tenantName1" />
            <br />
            <br />
            <label for="tenantPropertyAddress1">Property Address:</label>
            <br />
            <input type="text" placeholder="Enter an additional tenant address" name="tenantPropertyAddress1" id="tenantPropertyAddress1" />
            <br />
            <br />
            <label for="tenantEmailAddress1">E-Mail Address:</label>
            <br />
            <input type="text" placeholder="Enter an additional tenant E-Mail address " name="tenantEmailAddress1" id="tenantEmailAddress1" />
          </div>
          <div id="tenant2" style="display:none;">
            <br />
            <br />
            <label for="tenantName2">Name:</label>
            <br />
            <input type="text" placeholder="Enter an additional tenant name" name="tenantName2" id="tenantName2" />
            <br />
            <br />
            <label for="tenantPropertyAddress2">Property Address:</label>
            <br />
            <input type="text" placeholder="Enter an additional tenant address" name="tenantPropertyAddress1" id="tenantPropertyAddress2" />
            <br />
            <br />
            <label for="tenantEmailAddress1">E-Mail Address:</label>
            <br />
            <input type="text" placeholder="Enter an additional tenant E-Mail address " name="tenantEmailAddress1" id="tenantEmailAddress2" />
          </div>
          <div id="tenant3" style="display:none;">
            <br />
            <br />
            <label for="tenantName3">Name:</label>
            <br />
            <input type="text" placeholder="Enter an additional tenant name" name="tenantName3" id="tenantName3" />
            <br />
            <br />
            <label for="tenantPropertyAddress3">Property Address:</label>
            <br />
            <input type="text" placeholder="Enter an additional tenant address" name="tenantPropertyAddress1" id="tenantPropertyAddress3" />
            <br />
            <br />
            <label for="tenantEmailAddress1">E-Mail Address:</label>
            <br />
            <input type="text" placeholder="Enter an additional tenant E-Mail address " name="tenantEmailAddress1" id="tenantEmailAddress3" />
          </div>
          <div id="tenant4" style="display:none;">
            <br />
            <br />
            <label for="tenantName4">Name:</label>
            <br />
            <input type="text" placeholder="Enter an additional tenant name" name="tenantName4" id="tenantName4" />
            <br />
            <br />
            <label for="tenantPropertyAddress4">Property Address:</label>
            <br />
            <input type="text" placeholder="Enter an additional tenant address" name="tenantPropertyAddress1" id="tenantPropertyAddress4" />
            <br />
            <br />
            <label for="tenantEmailAddress1">E-Mail Address:</label>
            <br />
            <input type="text" placeholder="Enter an additional tenant E-Mail address " name="tenantEmailAddress1" id="tenantEmailAddress4" />
          </div>
          <div id="tenant5" style="display:none;">
            <br />
            <br />
            <label for="tenantName5">Name:</label>
            <br />
            <input type="text" placeholder="Enter an additional tenant name" name="tenantName5" id="tenantName5" />
            <br />
            <br />
            <label for="tenantPropertyAddress5">Property Address:</label>
            <br />
            <input type="text" placeholder="Enter an additional tenant address" name="tenantPropertyAddress1" id="tenantPropertyAddress5" />
            <br />
            <br />
            <label for="tenantEmailAddress1">E-Mail Address:</label>
            <br />
            <input type="text" placeholder="Enter an additional tenant E-Mail address " name="tenantEmailAddress1" id="tenantEmailAddress5" />
          </div>
          <div id="tenant6" style="display:none;">
            <br />
            <br />
            <label for="tenantName6">Name:</label>
            <br />
            <input type="text" placeholder="Enter an additional tenant name" name="tenantName6" id="tenantName6" />
            <br />
            <br />
            <label for="tenantPropertyAddress6">Property Address:</label>
            <br />
            <input type="text" placeholder="Enter an additional tenant address" name="tenantPropertyAddress1" id="tenantPropertyAddress6" />
            <br />
            <br />
            <label for="tenantEmailAddress1">E-Mail Address:</label>
            <br />
            <input type="text" placeholder="Enter an additional tenant E-Mail address " name="tenantEmailAddress1" id="tenantEmailAddress6" />
          </div>
        </div>
<!-- End Tenants -->
        <br />
        <br />
        <button type="button" id="btnAddTenant" onclick="addAddress()">Add another Tenant</button>
        <br />
        <br />
        <input id="submit" type="submit" value="Send"> 
        <input id="reset" type="reset" value="Cancel">
        <br />
      </div>
      <!-- Letter End -->
    </form>
  </div>
  <script>
    var i = 2;
    function addAddress() {
      if (i < 7) {
        document.getElementById("tenant" + i).style.display = "";
        i++;
      }
    }
  </script>
</body>

</html>

Re: How do I get my Web Form to grow and shrink based on user click events?

ChrisSergent — Tue, 07 Jul 2015 13:58:52 GMT

Excellent. It worked well. How come display works and visibility does not?

Re: How do I get my Web Form to grow and shrink based on user click events?

RobertScheitlin__GISP — Tue, 07 Jul 2015 14:06:07 GMT

Chris,

The difference between display and visibility is visibility sets the dom items to not show but they will still consume the space that they would normally require and display will hide the dom items and release the whitespace that the dom elements would normally consume.

Re: How do I get my Web Form to grow and shrink based on user click events?

ChrisSergent — Tue, 07 Jul 2015 14:07:37 GMT

That helped a lot. I never got that. Sounds like visibility would be good for floating objects.

topic How do I get my Web Form to grow and shrink based on user click events? in ArcGIS JavaScript Maps SDK Questions

How do I get my Web Form to grow and shrink based on user click events?

Re: How do I get my Web Form to grow and shrink based on user click events?

Re: How do I get my Web Form to grow and shrink based on user click events?

Re: How do I get my Web Form to grow and shrink based on user click events?

Re: How do I get my Web Form to grow and shrink based on user click events?