无法通过HTML表单上的ID访问脚本

时间：2016-07-04 10:59:33

标签： javascript html css

我想以编程方式访问用<script>..</script>编写的脚本，但使用分配给脚本的id不起作用。

我认为我的html格式存在问题。

请帮帮我;我想访问from date，to date和＆amp; reminder date，all操作取决于from date。

这是我的代码：

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
 body {
  background-color: #e6e6e6;
  font-size: 100%;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
}
div,
textarea,
input {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.container {
  max-width: 510px;
  min-width: 324px;
  margin: 50px auto 0px;
  background-color: #fff;
  border: 1px solid #cfcfcf;
  border-bottom: 3px solid #ccc;
}
.row {
  width: 100%;
  margin: 0 0 1em 0;
  padding: 0 2.5em;
}
.row.header {
  padding: 1.5em 2.5em;
  border-bottom: 1px solid #ccc;
  background: url(http://niiiick.com/files/blur-city-1.jpg) left -80px;
  color: #fff;
}
.row.body {
  padding: .5em 2.5em 1em;
}
.pull-right {
  float: right;
}
h1 {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  display: inline-block;
  font-weight: 100;
  font-size: 2.8125em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  margin: 0 0 0.1em 0;
  padding: 0 0 0.4em 0;
}
h3 {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 1.25em;
  margin: 1em 0 0.4em 0;
}
.btn {
  font-size: 1.0625em;
  display: inline-block;
  padding: 0.74em 1.5em;
  margin: 1.5em 0 0;
  color: #fff;
  border-width: 0 0 0 0;
  border-bottom: 5px solid;
  text-transform: uppercase;
  background-color: #b3b3b3;
  border-bottom-color: #8c8c8c;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
}
.btn:hover {
  background-color: #bfbfbf;
}
.btn.btn-submit {
  background-color: #4f6fad;
  border-bottom-color: #374d78;
}
.btn.btn-submit:hover {
  background-color: #5f7db6;
}
form {
  max-width: 100%;
  display: block;
}
form ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
form ul li {
  margin: 0 0 0.25em 0;
  clear: both;
  display: inline-block;
  width: 100%;
}
form ul li:last-child {
  margin: 0;
}
form ul li p {
  margin: 0;
  padding: 0;
  float: left;
}
form ul li p.right {
  float: right;
}
form ul li .divider {
  margin: 0.5em 0 0.5em 0;
  border: 0;
  height: 1px;
  width: 100%;
  display: block;
  background-color: #4f6fad;
  background-image: linear-gradient(to right, #ee9cb4, #4f6fad);
}
form ul li .req {
  color: #ee9cb4;
}
form label {
  display: block;
  margin: 0 0 0.5em 0;
  color: #4f6fad;
  font-size: 1em;
}
form input {
  margin: 0 0 0.5em 0;
  border: 1px solid #ccc;
  padding: 6px 10px;
  color: #555;
  font-size: 1em;
}
form textarea {
  border: 1px solid #ccc;
  padding: 6px 10px;
  width: 100%;
  color: #555;
}
form small {
  color: #4f6fad;
  margin: 0 0 0 0.5em;
}
@media only screen and (max-width: 480px) {
  .pull-right {
    float: none;
  }
  input {
    width: 100%;
  }
  label {
    width: 100%;
    display: inline-block;
    float: left;
    clear: both;
  }
  li,
  p {
    width: 100%;
  }
  input.btn {
    margin: 1.5em 0 0.5em;
  }
  h1 {
    font-size: 2.25em;
  }
  h3 {
    font-size: 1.125em;
  }
  li small {
    display: none;
  }
}
/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}
body {
  margin: 0
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block
}
audio,
canvas,
progress,
video {
  display: inline-block
}
audio:not([controls]) {
  display: none;
  height: 0
}
progress {
  vertical-align: baseline
}
template,
[hidden] {
  display: none
}
a {
  background-color: transparent
}
a:active,
a:hover {
  outline-width: 0
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted
}
b,
strong {
  font-weight: inherit
}
b,
strong {
  font-weight: bolder
}
dfn {
  font-style: italic
}
h1 {
  font-size: 2em;
  margin: 0.67em 0
}
mark {
  background-color: #ff0;
  color: #000
}
small {
  font-size: 80%
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}
sub {
  bottom: -0.25em
}
sup {
  top: -0.5em
}
img {
  border-style: none
}
svg:not(:root) {
  overflow: hidden
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em
}
figure {
  margin: 1em 40px
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible
}
button,
input,
select,
textarea {
  font: inherit;
  margin: 0
}
optgroup {
  font-weight: bold
}
button,
input,
select {
  overflow: visible
}
button,
select {
  text-transform: none
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer
}
[disabled] {
  cursor: default
}
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0
}
button:-moz-focusring,
input:-moz-focusring {
  outline: 1px dotted ButtonText
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em
}
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal
}
textarea {
  overflow: auto
}
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto
}
[type="search"] {
  -webkit-appearance: textfield
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none
}
<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Clean Contact Form</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="css/normalizeindex.css">
  <link rel="stylesheet" href="css/styleindex.css">
</head>

<body>
  <div class="container">
    <div class="row header">
      <center>
        <h1>WELCOME &nbsp;</h1>
      </center>
    </div>
    <div class="row body">
      <form method="post">
        <ul>

          <li>
            <p class="left">
              <label for="member_id">MEMBERS No.:</label>
              <input type="text" name="" />
            </p>
            <p class="pull-right">
              <label for="mem_date">MEMBERSHIP DATE:</label>
              <input type="date" name="" />
            </p>
          </li>

          <li>
            <div class="divider"></div>
          </li>

          <li>
            <p class="left">
              <label for="from">FROM:</label>
              <input type="date" id="oldDate">
            </p>
            <p class="pull-right">
              <label for="to">TO:</label>
              <input type="date" id="new">
            </p>
            <p class="left">
              <label for="name">REMINDER DATE:</label>
              <input type="date" id="reminde">
            </p>
          </li>
          <script>
            // <---Next Renewal Date--->    
            $('#oldDate').on('change', function(e) {
              var oldDate = new Date(this.value);
              $('#old').html(new Date(oldDate));
              oldDate.setFullYear(oldDate.getFullYear() + 1);
              oldDate.setDate(oldDate.getDate());

              var day = ("0" + oldDate.getDate()).slice(-2);
              var month = ("0" + (oldDate.getMonth() + 1)).slice(-2);

              var today = oldDate.getFullYear() + "-" + (month) + "-" + (day);

              $('#new').val(today);
              // <---End Renwal Date--->        

              // <---Start Reminder date--->       
              $('#old').html(new Date(oldDate));
              oldDate.setFullYear(oldDate.getFullYear());
              oldDate.setDate(oldDate.getDate() - 15);

              var day = ("0" + oldDate.getDate()).slice(-2);
              var month = ("0" + (oldDate.getMonth() + 1)).slice(-2);

              var today = oldDate.getFullYear() + "-" + (month) + "-" + (day);

              $('#reminde').val(today);
              // <---End Reminder Date--->  
            });
          </script>

          <li>
            <div class="divider"></div>
          </li>

          <li>
            <p class="left">
              <label for="name">MEMBER NAME:</label>
              <input type="text" name="" placeholder="Enter the name.." />
            </p>
            <p class="pull-right">
              <label for="mob_no">MOBILE NO.:</label>
              <input type="number" name="" />
            </p>
            <br>
            <p class="left">
              <br>
              <label for="mem_name">FAMILY MEMBER NAME:</label>
              <input type="text" name="" />
            </p>
            <p class="pull-right">
              <br>
              <label for="mem_no">FAMILY MEMBER NO.:</label>
              <input type="number" name="" />
            </p>
          </li>
          <li>
            <div class="divider"></div>
          </li>
          <li>
            <center>
              <input class="btn btn-submit" type="submit" value="Submit" />
            </center>
          </li>

        </ul>
      </form>
    </div>
  </div>





</body>

</html>

1 个答案:

答案 0 :(得分：0)

这是您的格式化代码。您的代码中还有一个错误。您尚未加载Jquery，但是在加载时您正在访问jquery方法。有，请加载Jquery。以下是语法。

http://www.w3schools.com/jquery/jquery_get_started.asp

您的格式化代码。

<!DOCTYPE html>

<head>
<meta charset="UTF-8">
<title>Clean Contact Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/normalizeindex.css">
<link rel="stylesheet" href="css/styleindex.css">
</head>
<body>
<div class="container">
    <div class="row header">
        <center>
            <h1>WELCOME &nbsp;</h1>
        </center>

    </div>
    <div class="row body">
        <form method="post">
            <ul>

                <li>
                    <p class="left">
                        <label for="member_id">MEMBERS No.:</label>
                        <input type="text" name="" />
                    </p>
                    <p class="pull-right">
                        <label for="mem_date">MEMBERSHIP DATE:</label>
                        <input type="date" name="" />
                    </p>
                </li>

                <li>
                    <div class="divider"></div>
                </li>

                <li>
                    <p class="left">
                        <label for="from">FROM:</label>
                        <input type="date" id="oldDate">
                    </p>
                    <p class="pull-right">
                        <label for="to">TO:</label>
                        <input type="date" id="new">
                    </p>
                    <p class="left">
                        <label for="name">REMINDER DATE:</label>
                        <input type="date" id="reminde">
                    </p>
                </li>

                <li>
                    <div class="divider"></div>
                </li>

                <li>
                    <p class="left">
                        <label for="name">MEMBER NAME:</label>
                        <input type="text" name="" placeholder="Enter the name.." />
                    </p>
                    <p class="pull-right">
                        <label for="mob_no">MOBILE NO.:</label>
                        <input type="number" name="" />
                    </p>
                    <br>
                    <p class="left">
                        <br>
                        <label for="mem_name">FAMILY MEMBER NAME:</label>
                        <input type="text" name="" />
                    </p>
                    <p class="pull-right">
                        <br>
                        <label for="mem_no">FAMILY MEMBER NO.:</label>
                        <input type="number" name="" />
                    </p>
                </li>
                <li>
                    <div class="divider"></div>
                </li>
                <li>
                    <center>
                        <input class="btn btn-submit" type="submit" value="Submit" />
                    </center>
                </li>

            </ul>
        </form>
    </div>
</div>

<script>
 $(document).ready(function(){

// <---Next Renewal Date--->    
$('#oldDate').on('change', function(e) {
    var oldDate = new Date(this.value);
    $('#old').html(new Date(oldDate));
    oldDate.setFullYear(oldDate.getFullYear() + 1);
    oldDate.setDate(oldDate.getDate());

    var day = ("0" + oldDate.getDate()).slice(-2);
    var month = ("0" + (oldDate.getMonth() + 1)).slice(-2);

    var today = oldDate.getFullYear() + "-" + (month) + "-" + (day);

    $('#new').val(today);
    // <---End Renwal Date--->        

    // <---Start Reminder date--->       
    $('#old').html(new Date(oldDate));
    oldDate.setFullYear(oldDate.getFullYear());
    oldDate.setDate(oldDate.getDate() - 15);

    var day = ("0" + oldDate.getDate()).slice(-2);
    var month = ("0" + (oldDate.getMonth() + 1)).slice(-2);

    var today = oldDate.getFullYear() + "-" + (month) + "-" + (day);

    $('#reminde').val(today);
    // <---End Reminder Date--->  
    });

 });

</script>
  </body>
 </html>
相关问题
最新问题