Javascript - Duplicate Field input

Question

I'm trying to duplicate a field input like this in JSFiddle

But when I save the below in a html file, it is not working.

Can someone please assist?

<html>

<head>
<script>
$(function() { // <== Doc Ready
  $("#email").change(function() { // When email is changed
    $('#mail').val(this.value); // copy it over to mail
  });
});
</script>
</head>

<body>
<input type="text" name="email" id="email" />
<input type="text" name="mail" id="mail" />
</body>

</html>

Does this answer your question? [ReferenceError: $ is not defined](https://stackoverflow.com/questions/22268881/referenceerror-is-not-defined) (Though don't just copy that answer. Get the latest version of jQuery.) — Ivar, Sep 15 '21 at 12:54
Don't edit the question in such a way that it obscures the problem the OP is having. Instead post an answer indicating how to fix it. — pilchard, Sep 15 '21 at 13:00

Abin Thaha · Accepted Answer · 2021-09-15T12:59:21.397

0

Your function is working as expected.

The only issue with your code was the jQuery was not loaded to the snippet.

But instead of change, if you use keyup or input, you could see the changes right on time

Change will be triggered only when you focus away from your input.

$(function() { // <== Doc Ready
  $("#email").on('keyup', function() { // When email is changed
    $('#mail').val(this.value); // copy it over to mail
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="email" id="email" />
<input type="text" name="mail" id="mail" />

edited Sep 15 '21 at 12:59

answered Sep 15 '21 at 12:55

Abin Thaha

4,493
3
13
41

1

You're missing the main problem, which is that the OP has not loaded jquery. Also, [`input`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) is more responsive than `keyup` – pilchard Sep 15 '21 at 12:56
@pilchard, Agreed. I suggested a way to improve. – Abin Thaha Sep 15 '21 at 12:57
But you didn't answer the main question. It's not working as expected **because they haven't loaded jquery** – pilchard Sep 15 '21 at 12:57

score 0 · Answer 2 · edited Sep 15 '21 at 15:55

0

This code will run for sure.

$(document).ready(function() {
    $('#email').keyup(function(e){
    $('#mail').val(e.target.value);
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="email" id="email" />           
<input type="text" name="mail" id="mail"/>

edited Sep 15 '21 at 15:55

angel.bonev

2,154
3
20
30

answered Sep 15 '21 at 13:07

Shubham Pratik

482
2
6
18

Javascript - Duplicate Field input

2 Answers2