Question

我刚开始进行Web开发，因此我尝试访问javascript文件中的表单数据，但无法做到这一点。在这里：

我的HTML：

var name = document.getElementById('loginForm').value;
console.log(name);

<form id="loginForm">
  Username <input type="text" name="username" value="Donald"><br> Password: <input type="text" name="password" value="Duck"><br>
  <input type="submit" value="Submit" />
</form>
<script type="module" src="other.js"></script>

之所以在一个单独的javascript文件中完成操作，是因为稍后我将调用API。不管我尝试过什么，“ name”始终是Donald，而不是我输入表单中的内容，并且不确定从输入标签中删除值后如何访问它。

任何提示都将不胜感激。

Answer 1

您的脚本将在加载时被调用，这意味着它将始终返回默认值Donald。

因此，要获取新值，您可以将click事件附加到按钮上，然后在单击时将获得当前值，如：

document.getElementById('showName').addEventListener('click', function() {
  console.log(document.querySelector('[name="username"]').value);
})

<form id="loginForm">
  Username: <input type="text" name="username" value="Donald">
  <br> Password: <input type="text" name="password" value="Duck">
  <br>
  <input type="button" value="Show value" id="showName" />
</form>

Answer 2

您正在读取任何函数之外的值，因此该值将是加载<script>时的值。

如果您想在其他时间读取该值，则需要将代码包装在function中，并将其命名为以后。

如何执行此操作取决于您所关心的特定以后。您很可能应该将功能绑定为event handler。也许是文本框的input事件，还是表单的submit事件。

Answer 3

import com.fasterxml.jackson.annotation.JsonProperty;
import com.fasterxml.jackson.annotation.JsonPropertyOrder;

@JsonPropertyOrder(value = {"name", "age", "email", "phone_number",
    "physical_address", "postal_address", "postal_code",
    "gender", "city"})
public class User {
    @JsonProperty("Name")
    private String name;
    @JsonProperty("Age")
    private int age;
    @JsonProperty("Email Address")
    private String email;
    @JsonProperty("Phone Number")
    private String phone_number;
    @JsonProperty("Physical Address")
    private String physical_address;
    @JsonProperty("Postal Address")
    private String postal_address;
    @JsonProperty("Postal Code")
    private String postal_code;
    @JsonProperty("Gender")
    private String gender;
    @JsonProperty("City")
    private String city;

    public User(String name, int age, String email, String phone_number, String 
    physical_address, String postal_address, String postal_code, String gender, 
    String city) {
        this.name = name;
        this.age = age;
        this.email = email;
        this.phone_number = phone_number;
        this.physical_address = physical_address;
        this.postal_address = postal_address;
        this.postal_code = postal_code;
        this.gender = gender;
        this.city = city;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getPhone_number() {
        return phone_number;
    }

    public void setPhone_number(String phone_number) {
        this.phone_number = phone_number;
    }

    public String getPhysical_address() {
        return physical_address;
    }

    public void setPhysical_address(String physical_address) {
        this.physical_address = physical_address;
    }

    public String getPostal_address() {
        return postal_address;
    }

    public void setPostal_address(String postal_address) {
        this.postal_address = postal_address;
    }

    public String getPostal_code() {
        return postal_code;
    }

    public void setPostal_code(String postal_code) {
        this.postal_code = postal_code;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    public String getCity() {
        return city;
    }

    public void setCity(String city) {
        this.city = city;
    }
}

var form = new FormData(document.getElementById("loginForm"));
var inputValue = form.get("username");

Answer 4

您正在访问形式el，而不是输入el。您还需要onchange侦听器。

var el = document.getElementsByName('username')[0];
var value = el.value;
console.log(value);//Donald

el.onchange = function(e){
   console.log(e.target.value); // new value any time you change it in the input
}

希望这会有所帮助：）

Answer 5

它没有显示任何不同的原因是您只在最初访问它，而没有进行任何更改。提交或其他事件。为了在更改后进行访问，您必须监视该更改事件（对于提交也是如此），然后在该事件的事件处理程序中访问该表单。

127.0.0.1

var username = document.getElementById('username');
console.log(username.value);
var myform = document.getElementById('loginForm');

username.addEventListener('change', function(event) {
  console.log(event.type);
  console.log(event.target.value);
  console.log('Element change through function!');
});
myform.addEventListener('submit', function(event) {
  var thisform = this;// refer to form (see below)
  event.preventDefault(); // stop the submit for now
  event.stopImmediatePropagation();
  event.stopPropagation();
  console.log(thisform.password.value);//use form field by name
  console.log(event.type);// submit
  console.log(username.value);// from the id reference
  console.log('Form submit through function!');
  return false;
});

.label {
  display: block;
}

尝试访问JavaScript中的表单输入

5 个答案: