个人中心
gpt4 book ai didi

javascript - 如何在同一窗口中显示表单输出并隐藏表单

转载 作者：行者123 更新时间：2023-11-28 02:58:18 25 4
gpt4 key购买 nike

从昨天开始，我一直在努力解决这个问题，但无济于事。我需要做的是制作一个表格并显示自定义贺卡。我们可以使用图片作为卡片(将它们设置为输出的背景)。该表单应让用户输入一些自定义信息，例如收件人姓名、颜色信息、字体大小和您认为合适的其他信息。应该有一个“制作卡片”按钮，当他们点击它时，隐藏表单(通过更改相应元素的 CSS 可见性或显示属性)并显示一张卡片，采用简单但优雅的设计，结合了他们和他们输入的其他配置详细信息。

此外，我还需要根据他们在贺卡类型中的选择提供背景图片，并在贺卡上为他们选择的 Angular 色提供一张贴纸尺寸的小图片。

任何帮助将不胜感激。

以下是我的 Java Script CSS 和 HTML 代码:

< script >
  function selectAll() {
    for (i = 0; i < document.forms[0]['charac'].length - 1; i++)
      document.forms[0]['charac'][i].checked = document.forms[0]['charac'][5].checked;
  }
document.forms[0]['charac'][5].addEventListener('click', selectAll);

function myCard() {

  document.getElementById("formOutput").style.backgroundImage = "url('birthday-card.jpg')";

  var selected;
  if (selected == document.forms[0]['card'][0]) {
    document.body.style.backgroundImage = "url('birthday-card.jpg')";
    document.getElementById("formOutput").innerHTML = "name";
  }
}

function myFunction() {
  var a = document.getElementById("txtName").value;
  var b = document.getElementById("txtName1").value;
  var c = document.getElementById("content-field").value;

  document.getElementById("formOutput").innerHTML = a + " " + b + " " + c;
} < /script>
<style> #wrapper {
  border: 3px black;
}
body {
  background-image: url("blank-card1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
}
table {
  /*             background-image: image("blank-card.jpg");*/
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
table td {
  height: 15px;
  /*            width: 15px;*/
  text-align: left;
}
</style>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Generate a Greeting Card</title>
</head>

<body>
  <h3>Fill out the following information and select a card to view how it looks.</h3>
  <form id="formCard" action="">
    <fieldset>
      <legend>Personal information:</legend>
      <table>
        <tr>
          <td>
            <label for="txtName">Your Name<span style="color:red">*</span>
            </label>
          </td>
          <td>
            <input type="text" id="txtName" name="name" value=" " required/>
          </td>
        </tr>
        <tr>
          <td>
            <label for="txtName1">Your Family Member's
              <br>OR Friend's Name<span style="color:red">*</span>
            </label>
          </td>
          <td>
            <input type="text" id="txtName1" name="name1" value=" " required/>
          </td>
        </tr>
        <tr>
          <td>
            <label for="txtAddress">Address</label>
          </td>
          <td>
            <input type="text" id="txtAddress" name="address" value=" ">
          </td>
        </tr>
        <tr>
          <td>
            <label for="postalCode">Postal Code<span style="color:red">*</span>
            </label>
          </td>
          <td>
            <input type="text" id="postalCode" name="postalcode" value=" " required/>
          </td>
        </tr>
        <tr>
          <td>Province<span style="color:red">*</span>
          </td>
          <td>
            <select id="selProvince" name="province" required>
              <option value="" selected>Please select...</option>
              <option value="AB">Alberta</option>
              <option value="BC">British Columbia</option>
              <option value="MB">Manitoba</option>
              <option value="NB">New Brunswick</option>
              <option value="NFL">Newfoundland and Labrador</option>
              <option value="NW">Northwest Territories</option>
              <option value="NS">Nova Scotia</option>
              <option value="NU">Nunavut</option>
              <option value="ON">Ontario</option>
              <option value="PEI">Prince Edward Island</option>
              <option value="QC">Quebec</option>
              <option value="SK">Saskatchewan</option>
              <option value="YK">Yukon</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>
            <label for="txtPhone">Phone<span style="color:red">*</span>
            </label>
          </td>
          <td>
            <input type="text" id="txtPhone" name="phone" value=" " required/>
          </td>
        </tr>
        <tr>
          <td>
            <label for="txtEmail">Email<span style="color:red">*</span>
            </label>
          </td>
          <td>
            <input type="text" id="txtEmail" name="email" required/>
          </td>
        </tr>
        <tr>
          <td>Would you like to send it
            <br>via email or mail<span style="color:red" required>*</span>
          </td>
          <td>
            <label>
              <input type="radio" name="route" value="m" />Mail</label>
            <label>
              <input type="radio" name="route" value="e" />Email</label>
          </td>
        </tr>
        <tr>
          <td>Type of Greeting Card:<span style="color:red">*</span>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
          </td>
          <td>
            <br>
            <label>
              <input type="radio" name="card" id="birthday" value="bd" />Birthday</label>
            <br>
            <label>
              <input type="radio" name="card" id="valentine" value="vd" />Valentines Day</label>
            <br>
            <label>
              <input type="radio" name="card" id="friendship" value="frd" />Friendship Day</label>
            <br>
            <label>
              <input type="radio" name="card" id="mother" value="md" />Mother's Day</label>
            <br>
            <label>
              <input type="radio" name="card" id="father" value="fad" />Father's Day</label>
            <br>
            <label>
              <input type="radio" name="card" id="newYear" value="nyd" />New Year's Day</label>
            <br>
            <label>
              <input type="radio" name="card" id="christmas" value="cd" />Christmas Day</label>
            <br>
            <br>
          </td>
        </tr>
        <tr>
          <td>Choose the person's
            <br>Favourite cartoon charcters:<span style="color:red">*</span>
            <br>
            <br>
            <br>
            <br>
            <br>
          </td>
          <td>
            <label>
              <input type="checkbox" name="charac" value="mickeyMouse" checked/>Mickey Mouse &amp; Clubhouse</label>
            <br>
            <label>
              <input type="checkbox" name="charac" value="scoobyDoo" />Scooby Doo</label>
            <br>
            <label>
              <input type="checkbox" name="charac" value="tomJerry" />Tom &amp; Jerry</label>
            <br>
            <label>
              <input type="checkbox" name="charac" value="tweetiePie" />Tweetie Pie</label>
            <br>
            <label>
              <input type="checkbox" name="charac" value="donaldDuck" />Donald Duck</label>
            <br>
            <label>
              <input type="checkbox" name="charac" value="selectAll" />Select All</label>
          </td>
        </tr>
        <tr>
          <td>Choose a colour for the
            <br>text on the card:</td>
          <!--color code from w3schools.org-->
          <td>
            <input type="color" id="html5colorpicker" onchange="clickColor(0, -1, -1, 5)" value="#ff0000" style="width:85%;">
          </td>
        </tr>
        <tr>
          <td>
            <label>Content</label>
          </td>
          <td>
            <textarea id="content-field" cols="20" rows="2" value=" "></textarea>
          </td>
        </tr>
        <tr>
          <td>Choose an image to put on
            <br>the card to make it special.</td>
          <td>
            <label>
              <input type="file" name="pic" accept="image/*">
            </label>
          </td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>
            <br>
            <br>
            <input onclick="myFucntion()" type="submit" value="SEND" />&nbsp;
            <input type="reset" value="CLEAR" />
          </td>
          <td>&nbsp;</td>
        </tr>
      </table>
    </fieldset>
  </form>

  <p><span id="formOutput"></span>
  </p>
</body>

</html>

最佳答案

你能不能做这样的事情:

<form ...>
    <fieldset id='fields'>
        ...
        <input onclick="showOutput()" type="submit" value="SEND" />
    </fieldset>
    <div id='formOutput' style='display: none;'>
    </div>
</form>

function showOutput() {
    /* Fill formOutput */
    ....
    document.getElementById('fields').style.display = 'none';
    document.getElementById('formOutput).style.display = '';
}

但是由于SEND按钮是一个提交按钮，我不知道你是否想在Javascript代码中完成所有处理。

此外，如果您希望允许在两个 View 之间切换，“切换”按钮必须位于字段集之外(或者需要在 formOutput 内部添加一个按钮以返回输入 View )。

关于javascript - 如何在同一窗口中显示表单输出并隐藏表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35821681/

25 4 0
文章推荐： javascript - 打开 html 模式对话框
文章推荐： c++ - 将结构从文件写入/读取到 std::vector<>
文章推荐： javascript - 用于预选下拉值的 YUI 自定义事件？
文章推荐： c++ - Armadillo - 删除立方体中的行
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com