admin管理员组

文章数量:1391929

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 press 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=".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>

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 press 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./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>

  • javascript
  • jquery
  • forms
  • input
Share Improve this question asked Sep 8, 2017 at 13:30 sixtwowaifusixtwowaifu 7974 gold badges17 silver badges41 bronze badges 2
  • note: .keyup doesnt work for copy paste with the mouse for example. I think you want to use the .change() function – Mark Baijens Commented Sep 8, 2017 at 13:40
  • Why down vote a correct answer guys, e on?? – Djaouad Commented Sep 8, 2017 at 13:46
Add a ment  | 

7 Answers 7

Reset to default 3

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./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>

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./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>

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./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>

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());
 });

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./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>

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./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>

//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.

本文标签： javascriptjQuery for each input change text for matching elementStack Overflow

版权声明：本文标题：javascript - jQuery for each input change text for matching element - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744682623a2619504.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。