Question

我正在制作一个网络服务器来分享有关我的信息并提高我的技能。请原谅我的经验不足......

在我的页面中有2个组件：第一个是显示我姓名的标题区域和控制第二个组件中显示的内容的标签菜单。因此，标题区域基于我的index.js文件，内容区域基于各个html文件。

在一个html文件，联系页面上，我有一个联系表单，应该发送电子邮件给我。但是，表单具有仅返回未定义值的文本输入（除非它们被硬编码到value属性中）。

我尝试了不同的方法来检索用户输入;例如，jquery和javascript。价值观永远不会改变。

我确保了标签的唯一ID和名称，但仍然没有解决方案。

这是我的index.js文件：

<!doctype html>
<html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type='text/javascript' src="/js/main.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <link rel="stylesheet" href="/css/font-awesome/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Abel|Kaushan+Script|Quicksand" rel="stylesheet">
    <title> Blah Blaherson </title>
  </head>
  <body>

  <p class="banner">B. Blaherson</p>

    <div id="tab-anchor"></div>

    <ul class="tabs menu">
      <li class="tab-link current" data-tab="tab-1">About</li>
      <li class="tab-link" data-tab="tab-2">CV</li>
      <li class="tab-link" data-tab="tab-3">Portfolio</li>
      <li class="tab-link" data-tab="tab-4">Contact</li>
    </ul> 


    <div class="main-content">
      <div id="tab-1" class="tab-content current"></div>
      <div id="tab-2" class="tab-content"></div>
      <div id="tab-3" class="tab-content"></div>
      <div id="tab-4" class="tab-content"></div>
    </div>
  </body>
</html>

这是我的tab-4.html，其中包含联系人html和联系人表格以及一些内联javascript：

<div class="contact-content">
  <p class="form-title">Contact me by email</p>
  <div id="email" class="contact">

    <input type="hidden"></input>

      <div class="required">all fields are required</div>

      <div class="container">
        <label for="name">Name: </label>
        <br>
        <input type="hidden" name="hiddenName" id="hiddenNameId"></input>
        <input type="text" name="name" id="senderName" value="test"></input>
        <br>
      </div>

      <div class="container">
        <label for="email">Email Address: </label>
        <br>
        <input type="email" id="senderEmail"  maxlength="50"></input>
        <br>
      </div>

      <div class="container">
        <label for="subject">Subject: </label> 
        <br>
          <input type="text" id="subject" maxlength="50">HI</input>
        </br>
      </div>  

      <div class="container">
        <label for="message">Message: </label>
        <br>
        <textarea rows="10" cols="50" id="emailMessage"></textarea>
        <br>
      </div>
      <div class="container">
        <input id="submit-button" onclick="sendEmail();" type='button' value="Submit"></input>
      </div>
</div>
<script>

  //email submit handler  

    function sendEmail() {

      //var name = document.getElementById("senderName").value; 
      //console.log(name); //does not print!

      function success(data) {
        if ( data.error ) {
          alert(data.error.message);
        } else {
          alert((JSON.parse(data.body)).message);
        }
      }

      function error(data) {
        alert(data);
      }

      var payload = {
        subject: $('#subject').val(),
        message: $('#emailMessage').val(), 
        name: $('#senderName').val(),
        email: $('#senderEmail').val()
      }
      console.log(payload);

      $.ajax({
        method: "POST",
        url: "/contact",
        data: JSON.stringify(payload),
        contentType: "application/json",
        success: success,
        error: error,
        dataType: "application/json"
      });
    };
  </script>
</div>

此外，我有一个main.js文件控制内容显示，可以更好地了解我想要实现的目标：

$(document).ready(function(){

//sticky navbar when scrolled down
  function navStick() {
    var windowTop = $(window).scrollTop();
    var divTop = $('#tab-anchor').offset().top;

      if (windowTop > divTop) {
        $('.menu').addClass('stick');
        $('#tab-anchor').height($('.menu').outerHeight());
      } else {
        $('.menu').removeClass('stick');
        $('#tab-anchor').height(0);
      }
  }
  $(function() {
    $(window).scroll(navStick);
    navStick();
  });

  $('.tab-content').load('/views/tab-1.html'); 

  $('ul.tabs li').click(function(){
    var tab_id = $(this).attr('data-tab');
    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $('.tab-content').load('/views/'+tab_id+'.html');
    $("#"+tab_id).addClass('current');

  });

$(document).ready();

我应该补充说AJAX调用正常;但是，数据由未定义的值组成。我可以收到电子邮件，但由于未定义的值，它们是空的。

从表单访问用户输入始终提供未定义的值

0 个答案: