How do i create a live form which can display whatever i fill side by side in a design?

Question

I have a form for which has fields like card no ,card holders name,expiry date and stuff i want something like whenever i am filling the form it should be displayed side by side before storing it to database ,any help?

score 1 · Answer 1 · answered Feb 11 '21 at 06:45

1

Bind it to a jQuery keyup event

<form>
  Card No:</br>
  <input type="number">
  <input type="submit" value="submit">
</form>

<p id="display">
</p>

<script>
$(document).ready(function () {
$(":number").keyup(function () { 
$("#display").text($(":number").val());
});
});
</script>

answered Feb 11 '21 at 06:45

Chris

43
8

Thanks that worked for a while until i needed to update using the same form which already has data filled to it so keyup function wont work ? How do i take the value which is already there in the form and display somewhere? – Mosin Ali May 05 '21 at 10:30

score 1 · Answer 2 · answered Feb 11 '21 at 06:49

1

Here is a really easy solution in vanilla js;

let input = document.getElementById('in');
input.onkeyup = () => {
document.getElementById('p').innerHTML = input.value;
}

<input id='in' type='text'>

<p id='p'></p>

answered Feb 11 '21 at 06:49

Irfan wani

4,084
2
19
34

Thanks i used jQuery for that and it all works fine now – Mosin Ali Jul 19 '21 at 12:33
Please leave an upvote if it helped. You can also mark it as accepted if it solved your problem. Thanks – Irfan wani Jul 20 '21 at 05:23

How do i create a live form which can display whatever i fill side by side in a design?

2 Answers2