Question

所以我在这里尝试的是当点击提交按钮时从文本框中提取所有值并将其显示在我在html页面上的p标记中。几天来我一直在想这个。有人能让我知道我做错了什么吗？

/* JavaScript */

 $("#submit").click(function(){
var doc = $("#doctorate").val() 
var Name = $("#first_name").val();
var Last = $("#last_name").val();
var T = Doc + " "+ Name + " " + Last  
break
var Certs = $("#certs").val()
break
var Title = $("#title").val()
break
var Department = $("#department").val()
break
var Numb = $("#number").val()
break
var Web = $("#website").val()
break
var Ema = $("#email").val()
document.getElementById('output').innerHTML = T;
})

HTML不变

Answer 1

我看到的一个大问题是你不断为输出分配相同的东西。尝试这样的事情（简化为了简化）：

function myOut() {
    var output = document.getElementById("certs").value;
    output = output + document.getElementById("title").value;

    if (certs != null) {
        document.getElementById("output").innerHTML = output;
    }
}

<input type="text" id="certs" />
<input type="text" id="title" />
<p id="output"></p>
<button onclick="myOut()">
    Sub
</button>

Answer 2

在这里你可以尝试这个。

＆＃13;

  var role = document.getElementById("role").value;
	var first_name = document.getElementById("first_name").value;
	var last_name = document.getElementById("last_name").value;
	var doctorate = document.getElementById("doctorate").value;
	var certs = document.getElementById("certs").value;
	var title = document.getElementById("title").value;	
    var department = document.getElementById("department").value;
	var number = document.getElementById("number").value;
    var website = document.getElementById("website").value;
	var email = document.getElementById("email").value;
	var output = document.getElementById("output").value;




$("#submit").click(function(){
var N = $("#first_name").val();
var L = $("#last_name").val();
var T = N + " " + L;


	
	if (doctorate.checked) {
	document.getElementById('output').innerHTML = T;
	}
	
    if (first_name != null) {
       document.getElementById('output').innerHTML = T;
    }
	
	if (last_name != null) {
       document.getElementById('output').innerHTML = T;
    }
	
	if (certs != null) {
       document.getElementById('output').innerHTML = T;
    }
	
	if (title != null) {
       document.getElementById('output').innerHTML = T;
    }
	
	if (department != null) {
       document.getElementById('output').innerHTML = T;
    }
	
	if (number != null) {
        document.getElementById('output').innerHTML = T;
    }
	
	if (website != null) {
        document.getElementById('output').innerHTML = T;
    }
	
	if (email != null) {
        document.getElementById('output').innerHTML = T;
    }
	
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
            <fieldset id="role">
                <legend>My Role</legend>
                <label for="faculty">
            <input type="radio" name="role" id="faculty" value="faculty" />
            Faculty
          </label>
                <label for="staff">
            <input type="radio" name="role" id="staff" value="staff" />
            Staff
          </label>
            </fieldset>
            <fieldset id="userinformation">
                <legend>User Information</legend>
                <label for="doctorate">
            Doctorate?
         <input type ="checkbox" id="doctorate" value="" />   
          </label>
                <label>
            First Name:
            <input type="text" name="name" id="first_name" required />
          </label>
                <label>
            Last Name:
            <input type="text" name="name" id="last_name" required />
          </label>
                <label>
            Certifications:
            <input type="text" name="cert" id="certs" />
          </label>
                <label>
            Title:
            <input type="text" name="title" id="title" required />
          </label>
                <label>
            Department:
            <select id="department" required>
                <option disabled selected value>-Select a Department-</option>
                <option>School of Information Technology</option>
                <option>Mathematics</option>
                <option>English</option>
                <option>History</option>
                <option>Natural Sciences</option>
                <option>Psychology</option>
                <option>School of Health Sciences</option>
            </select>
          </label>
          <label>
            Primary Phone #:  
            <input type="tel" name="number" id="number" placeholder="444-123-1234" pattern="^\d{3}-\d{3}-\d{4}$"/>

          </label>
                <label>
            Email:
            <input type="email" name="email" id="email" placeholder="JDoe@example.com" required />
            <span id="err3"></span>
          </label>
                <label>
            Website:
            <input type="text" name="website"  id="website" placeholder="http//:www.example" pattern="https?://.+" />
          </label>
            </fieldset>
            <fieldset id = "results">
            <p id="output"></p>
            </fieldset>
            <fieldset id="submit_button">
                <input type="button" id="submit" value="submit" />
            </fieldset>

＆＃13;

javascript：submit按钮从文本框中提取所有值并将其显示在p标记中

2 个答案: