jQuery for each input change text for matching element

Question

I'm making a printable ICE card. User enters info in form inputs and they are shown preview below.

The code I have is working fine, but I have to copy/paste it for each input/element match. I want to compress the code so that it listens for changes for each input and changes the text for matching element.

Snippet below. JSFiddle is here

$("#inputName").keyup(function() {
  $("#spanName").html($(this).val());
});

$("#inputHCN").keyup(function() {
  $("#spanHCN").html($(this).val());
});

$("#inputDOB").keyup(function() {
  $("#spanDOB").html($(this).val());
});

* {
  margin: 0;
  outline: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}

div {
  background: #fff;
  height: 54mm;
  width: 100mm;
  border-width: 2px;
  border-style: dashed;
  border-radius: 2.88mm;
  padding: 10px;
  margin: 0 auto;
  position: relative;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  color: blue;
}

span[id*="span"] {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <input type="text" name="inputName" class="form-control" id="inputName" placeholder="Name">
  </p>
  <p>
    <input type="text" name="inputHCN" class="form-control" id="inputHCN" placeholder="Health Card #">
  </p>
  <p>
    <input type="text" name="inputDOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
  </p>
  etc...
</form>
<br />
<h4>
  Preview of your printable card
</h4>
<br />
<div>
  <ul>
    <li>Name: <span id="spanName"></span></li>
    <li>Health Card #: <span id="spanHCN"></span></li>
    <li>D.O.B.: <span id="spanDOB"></span></li>
    <li>etc...</li>
  </ul>
</div>

note: .keyup doesnt work for copy paste with the mouse for example. I think you want to use the .change() function — Mark Baijens
– Mark Baijens, Commented Sep 8, 2017 at 13:40

epascarello · Accepted Answer · 2017-09-08 13:36:04Z

Data attributes is the way I would go

$("[data-out]").keyup(function() {
  var selector = $(this).data("out");
  $(selector).text($(this).val());
});

* {
  margin: 0;
  outline: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}

div {
  background: #fff;
  height: 54mm;
  width: 100mm;
  border-width: 2px;
  border-style: dashed;
  border-radius: 2.88mm;
  padding: 10px;
  margin: 0 auto;
  position: relative;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  color: blue;
}

span[id*="span"] {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <input type="text" name="inputName" class="form-control" id="inputName" placeholder="Name" data-out="#spanName">
  </p>
  <p>
    <input type="text" name="inputHCN" class="form-control" id="inputHCN" placeholder="Health Card #" data-out="#spanHCN">
  </p>
  <p>
    <input type="text" name="inputDOB" class="form-control" id="inputDOB" placeholder="D.O.B." data-out="#spanDOB">
  </p>
  etc...
</form>
<br />
<h4>
  Preview of your printable card
</h4>
<br />
<div>
  <ul>
    <li>Name: <span id="spanName"></span></li>
    <li>Health Card #: <span id="spanHCN"></span></li>
    <li>D.O.B.: <span id="spanDOB"></span></li>
    <li>etc...</li>
  </ul>
</div>

Nagarjun · Accepted Answer · 2017-09-08 13:49:00Z

Add data-target attribute to your form elements with ids of elements where the text should be displayed:

<input type="text" name="inputName" data-target="#spanName" class="form-control" id="inputName" placeholder="Name">

Now change your scripts to display the text. Note that I am using two events keyup and change so that copy-paste would work as well.

$(".form-control").on('keyup change', function(e) {
  var target = $(this).data("target");
  $(target).html($(this).val());
});

Demo shown below:

$(".form-control").on('keyup change', function(e) {
  var target = $(this).data("target");
  $(target).html($(this).val());
});

* {
  margin: 0;
  outline: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}

div {
  background: #fff;
  height: 54mm;
  width: 100mm;
  border-width: 2px;
  border-style: dashed;
  border-radius: 2.88mm;
  padding: 10px;
  margin: 0 auto;
  position: relative;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  color: blue;
}

span[id*="span"] {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <input type="text" name="inputName" data-target="#spanName" class="form-control" id="inputName" placeholder="Name">
  </p>
  <p>
    <input type="text" name="inputHCN" data-target="#spanHCN" class="form-control" id="inputHCN" placeholder="Health Card #">
  </p>
  <p>
    <input type="text" name="inputDOB" data-target="#spanDOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
  </p>
  etc...
</form>
<br />
<h4>
  Preview of your printable card
</h4>
<br />
<div>
  <ul>
    <li>Name: <span id="spanName"></span></li>
    <li>Health Card #: <span id="spanHCN"></span></li>
    <li>D.O.B.: <span id="spanDOB"></span></li>
    <li>etc...</li>
  </ul>
</div>

codtex · Accepted Answer · 2017-09-08 13:38:27Z

There could be a lot of variants, here is a short one that rely to keep a naming convention between input id attribute and span id attribute:

$("#inputName,#inputHCN,#inputDOB").keyup(function() {
  $("#span" + this.id.replace('input', '')).html($(this).val());
});

* {
  margin: 0;
  outline: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}

div {
  background: #fff;
  height: 54mm;
  width: 100mm;
  border-width: 2px;
  border-style: dashed;
  border-radius: 2.88mm;
  padding: 10px;
  margin: 0 auto;
  position: relative;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  color: blue;
}

span[id*="span"] {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <input type="text" name="inputName" class="form-control" id="inputName" placeholder="Name">
  </p>
  <p>
    <input type="text" name="inputHCN" class="form-control" id="inputHCN" placeholder="Health Card #">
  </p>
  <p>
    <input type="text" name="inputDOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
  </p>
  etc...
</form>
<br />
<h4>
  Preview of your printable card
</h4>
<br />
<div>
  <ul>
    <li>Name: <span id="spanName"></span></li>
    <li>Health Card #: <span id="spanHCN"></span></li>
    <li>D.O.B.: <span id="spanDOB"></span></li>
    <li>etc...</li>
  </ul>
</div>

Phani Kumar M · Accepted Answer · 2017-09-08 13:38:55Z

1

Another way is through replacing input with span assuming that the naming convention is followed.

 $("#inputName, #inputHCN, #inputDOB").keyup(function() {
     var spanId = $(this).attr("id").replace("input", "span");
     $("#" + spanId).html($(this).val());
 });

answered Sep 8, 2017 at 13:38

Phani Kumar M

4,5781 gold badge16 silver badges26 bronze badges

Comments

ExtremeCoder · Accepted Answer · 2017-09-08 13:50:43Z

You can try this. Hope it will help. Just change the name of textboxes and find the span control using textbox name.

$("#inputName,#inputHCN,#inputDOB").keyup(function() {
        var inputValue = $(this).attr("name");
        $("#span" + inputValue).html($(this).val());
  });

* {
  margin: 0;
  outline: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}

div {
  background: #fff;
  height: 54mm;
  width: 100mm;
  border-width: 2px;
  border-style: dashed;
  border-radius: 2.88mm;
  padding: 10px;
  margin: 0 auto;
  position: relative;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  color: blue;
}

span[id*="span"] {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <input type="text" name="Name" class="form-control" id="inputName" placeholder="Name">
  </p>
  <p>
    <input type="text" name="HCN" class="form-control" id="inputHCN" placeholder="Health Card #">
  </p>
  <p>
    <input type="text" name="DOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
  </p>
  etc...
</form>
<br />
<h4>
  Preview of your printable card
</h4>
<br />
<div>
  <ul>
    <li>Name: <span id="spanName"></span></li>
    <li>Health Card #: <span id="spanHCN"></span></li>
    <li>D.O.B.: <span id="spanDOB"></span></li>
    <li>etc...</li>
  </ul>
</div>

Djaouad · Accepted Answer · 2017-09-08 13:40:49Z

0

You could loop through inputs and add event listeners to each:

var inputs = $('form p input');

for (var i=0; i<inputs.length; i++) {
  $(inputs[i]).keyup(function() {
    var span = $(this).attr('id').replace('input','span');
    $("#"+span).html($(this).val());
  });
}

* {
  margin: 0;
  outline: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Open Sans', 'Roboto', sans-serif;
}

div {
  background: #fff;
  height: 54mm;
  width: 100mm;
  border-width: 2px;
  border-style: dashed;
  border-radius: 2.88mm;
  padding: 10px;
  margin: 0 auto;
  position: relative;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  color: blue;
}

span[id*="span"] {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <input type="text" name="inputName" class="form-control" id="inputName" placeholder="Name">
  </p>
  <p>
    <input type="text" name="inputHCN" class="form-control" id="inputHCN" placeholder="Health Card #">
  </p>
  <p>
    <input type="text" name="inputDOB" class="form-control" id="inputDOB" placeholder="D.O.B.">
  </p>
  etc...
</form>
<br />
<h4>
  Preview of your printable card
</h4>
<br />
<div>
  <ul>
    <li>Name: <span id="spanName"></span></li>
    <li>Health Card #: <span id="spanHCN"></span></li>
    <li>D.O.B.: <span id="spanDOB"></span></li>
    <li>etc...</li>
  </ul>
</div>

answered Sep 8, 2017 at 13:40

Djaouad

22.8k4 gold badges37 silver badges57 bronze badges

2 Comments

codtex Over a year ago

I also don't like when people downvote silently, your solution is working +1

Djaouad Over a year ago

@codtex yes, they could at least explain why! Thanks.

shayD_16 · Accepted Answer · 2017-09-08 13:47:28Z

//map the names of the input elements with the output elements
var myIOMap={
    inputName:"spanName",
    inputHCN:"spanHCN",
    inputDOB:"spanDOB",
};

function doTextBinding(ioMap){
    Object.keys(ioMap).forEach(function(inputName,outputName){
        var inputElement="#"+inputName;
        var outputElement="#"+ioMap[inputName];
        console.log(inputElement);
        console.log(outputElement);
        $(inputElement).keyup(function() {
            $(outputElement).html($(this).val());
        });
    });

}
doTextBinding(myIOMap);

Replace your JavaScript with the following code, it will do the same without having to rewrite the key-up binding for each element. Make sure you call the function every time the page initializes though.

Collectives™ on Stack Overflow

jQuery for each input change text for matching element

7 Answers 7

Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related