Question

当我运行它并单击“提交”时，它仅在我不在表单中输入两个值时才起作用。如果我只输入一个字段或没有数据，那么它会按预期返回，但是当我同时输入城镇和电子邮件时，userText会在屏幕上闪烁然后消失。我错过了什么？谢谢你的帮助......

    <html>

<form>
  <fieldset>
    <label>What's Your Home Town?
        <input type="text" id="town" size="40" maxlength="60" required>
    </label>    
    <label>Email Address?
        <input type="email" id="email" size="40" maxlength="60" required>
        </label>
    <label>Submit
    </label>
        <input type="submit" value="Submit" onclick="validateForm();">
  </fieldset>
        <p id = "text"></p>

</form>

<script>



        function validateForm() {
            var userTown = document.getElementById('town').value;
            var userEmail = document.getElementById('email').value;
            var userText = userTown +'\'s a Great Town!' + ' click this link to email someone who cares ' + userEmail;
            //alert(userText + ' Follow This Link to Send an Email to Someone who Cares ' + userEmail);
           document.getElementById('text').innerHTML=userText;    

        }

        </script>
</html>

Answer 1

由于表单中有submit类型按钮，因此提交了表单。将其更改为button类型将解决您的问题

function validateForm() {
  var userTown = document.getElementById('town').value;
  var userEmail = document.getElementById('email').value;
  var userText = userTown + '\'s a Great Town!' + ' click this link to email someone who cares <a href="mailto' + userEmail +'">' + userEmail +'</a>';
  //alert(userText + ' Follow This Link to Send an Email to Someone who Cares ' + userEmail);
  document.getElementById('text').innerHTML = userText;

}

<form>
  <fieldset>
    <label>What's Your Home Town?
        <input type="text" id="town" size="40" maxlength="60" required>
    </label>
    <label>Email Address?
        <input type="email" id="email" size="40" maxlength="60" required>
        </label>
    <label>Submit
    </label>
    <input type="button" value="Submit" onclick="validateForm();">
  </fieldset>
  <p id="text"></p>
</form>

输入两个输入字段值时，javascript函数不起作用

1 个答案: