Having trouble passing a value from one input to another with jquery

Question

I'm doing a little noob project and making a simple "to-do list" and I'm stuck on something that seems so simple! I'm trying to pass the main up top from #myInput and pass it to the next down and so on. Right now, if you enter something then click add, it creates a blank new line at first for some reason then if you type something else and click add, what you typed before shows up on the next line. It will keep doing that for as long as you type something different in the input, but if you keep hitting add a couple times with the same thing in the input, nothing shows up. Then change the input again to something different and click add and all that will show up lol, but still no current line outputs from what you typed...going nuts. Any suggestions on the proper way to do this? I left a JSfiddle link to see exactly what is happening down below.

<div>
  <form id="addThings" type="text">
    <input type="text" id="myInput" placeholder="add to your to-do list" size="50" maxlength="40" autocomplete="off" autofocus>
    <input type="button" id="addButton" value="add">
  </form>
</div>

Also, when you click the button and it creates a new line down below it shifts everything around a bit..ideas on what needs to be changed in the css? Trying to get it a little smoother. Thanks!

$(function() {
  var i = 2;
  $('#addButton').click(function(e) {
    var input = $('#myInput').val();
    console.log(input);
    var id = "newLine" + i;
    var line = '<input type=\"text\" id=\"' + id + '\" size=\"50\" disabled><input type=\"checkbox\" >';    
    $('form').append(line);
    var newId = "#" + id;
    $('#myInput').change(function() {
      $(newId).val(input);
    });
    i += 1;
  });
});

JSFiddle

Why not somthing as easy as this [Fiddle](https://jsfiddle.net/YuriJF/97t9ztd6/12/) — Yuri, Jul 04 '16 at 07:24

Shubham Khatri · Accepted Answer · 2016-07-04T07:18:53.413

2

Try this. Providing a value to the input field before you append it works well.In your case there is an issue with javascript closure. To solve it just define the input variable outside of the click function

$(function() {
  var i = 2;
  $('#addButton').click(function(e) {
    var input = $('#myInput').val();
    console.log(input);
    var id = "newLine" + i;
    var line = '<input type=\"text\" id=\"' + id + '\" value=\"'+input+'\" size=\"50\" disabled><input type=\"checkbox\" >';
    console.log(line);
    $('form').append(line);

    i += 1;
  });
});

JSFIDDLE

edited Jul 04 '16 at 07:18

answered Jul 04 '16 at 07:12

Shubham Khatri

270,417
55
406
400

Try explaining _why_ and _how_ your proposed solution fixes OP's code instead of just providing a code snippet without any commentary. – kb. Jul 04 '16 at 07:16
@kb. thanks for the tip. I will keep that in my from now – Shubham Khatri Jul 04 '16 at 07:21
@ShubhamKhatri wow, can't believe I was stuck on something so simple...there I go overthinking things! Did not even think about the value attr. Don't know what would smooth out that shifting in the css would ya? – Bruce O. Jul 04 '16 at 07:57
@BruceO. Happy to Help! :) Regarding the CSS I will try to see. – Shubham Khatri Jul 04 '16 at 08:35
1

I got it..finally figured it out...I just put everything into two seperate div's to manipulate it :) https://jsfiddle.net/j4cp3kuc/1/ – Bruce O. Jul 04 '16 at 16:42

Roxoradev · Answer 2 · 2016-07-04T07:18:13.777

Try assigning the input value to the value attribute of your new input when you create the new line:

$(function() {
  var i = 2;
  $('#addButton').click(function(e) {
    var input = $('#myInput').val();
    var id = "newLine" + i;
    var line = '<input type=\"text\" id=\"' + id + '\" size=\"50\" value="' + input + '" disabled><input type=\"checkbox\">';
    $('form').append(line);
    var newId = "#" + id;
    /*$('#myInput').change(function() {
      $(newId).val(input);
    });*/
    i += 1;
  });
});

body {
  background-color: white;
}

div {
  width: 750px;
  margin: 0 auto;
  margin-top: 200px;
  margin-bottom: 0;
  padding: 0;
}

form {
  margin: 0 auto;
  display: inline-block;
  margin-bottom: 0px;
}

input {
  padding: 10px 18px;
  float: bottom;
}

input[type=text] {
  border-left: white;
  border-right: white;
  border-top: white;
  font-size: 20px;
  i height: 21px;
  text-align: center;
  outline: none;
  float: right;
  background-color: white;
}

input[type=button] {
  display: inline-block;
  height: 25px border: 0;
  margin: 0 auto;
  font-size: 20px;
  float: right;
}

input[type=checkbox] {
  vertical-align: top;
  width: 10%;
  margin: 15px auto;
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
  <div>
    <form id="addThings" type="text">
      <input type="text" id="myInput" placeholder="add to your to-do list" size="50" maxlength="40" autocomplete="off" autofocus>
      <input type="button" id="addButton" value="add">
    </form>
  </div>
</body>

score 0 · Answer 3 · edited May 23 '17 at 12:01

It's a closure/scope issue. Your variable input is inside the click function. Therefore it is not going to be in the scope of the change function.

Move the declaration of inputoutside of the click function.

Create a wrapper function.

That way all the variables needed are in the scope of addButtonScopeFunc and there only.

Those variables aren't needed in the global scope window. nor in the scope of the '#addButton' event function.

$(function() {
  var addButtonScopeFunc = function (input, inputValChangeEl) {
      var i = 2,
          id = "newLine" + i,
          newId = "#" + id,
          line = '<input type=\"text\" id=\"' + id + '\" size=\"50\" disabled><input type=\"checkbox\" >';
      console.log(input);
      console.log(line);
      $('form').append(line);
      $(inputValChangeEl).change(function() {
          $(newId).val(input);
      });
      i += 1;
    };
    $('#addButton').click(function(e) {
        addButtonScopeFunc($('#myInput').val(), '#myInput'); 
    });
});

To give an other example, just for showing up things.

You could "outscope" the $(inputValChangeEl).change(...) event function outside of addButtonScopeFunc in its own wrapper function handling over the input value as parameter.

$(function() {
  var addButtonScopeFunc = function (input, inputValChangeEl) {
      /* ... */
      $('form').append(line);
      changeInputVal(inputValChangeEl, newId, input); 
      i += 1;
  },
  changeInputVal = function (el, id, input) {
      $(el).change(function() {
          $(id).val(input);
      });
  };
  $('#addButton').click(function(e) {
      addButtonScopeFunc($('#myInput').val(), '#myInput'); 
  });
});

Further reading: Javascript Scopes well explained

This will bind change event every time addButton is clicked – Yuri Jul 04 '16 at 07:23 — Yuri, Jul 04 '16 at 07:23

Having trouble passing a value from one input to another with jquery

3 Answers3