Javascript捕获表单文本字段on更改为隐藏字段

Question

I have a form with a simple text field for a person's full name.

After a user enters their name and moves/tabs to the next field, I want to be able to capture the full name, extract only the first name, and attach to a separate hidden form field.

If the user goes back and corrects their full name, the extraction should repeat to get the correct first name. The full name text field would still be passed along during form submittal.

I'm thinking plain JS would be the best approach (I'm not using JQuery).

<form>
    <input type="text" name="fullname" value="">
    <input type="hidden" name="firstname" value="">
</form>

Answer 1

you can try this

this is your html

<form>
    <input type="text" name="fullname" value="" id="fullname">
    <input type="hidden" name="firstname" value="" id="firstname">
</form>

this is your javascript

<script>

    let fullName = document.getElementById("fullname");

    let firstName = document.getElementById("firstname");

    fullName.addEventListener("blur", function() {

      let names = fullName.value.split(" ");

      if (names.length > 0) {
        firstName.value = names[0];
      }

    });

</script>

https://jsfiddle.net/3k8kur9u/