sc4rface sc4rface - 5 months ago 22
jQuery Question

Variable in first .append is unknown

I generate the right number of popup boxes that pops up when I click the link. There I determine their quantity, click generate, and depending on how much I chose them, adds them to the respective div. In generated boxes there is p, which also has an onclick. It activates an anonymous function and adds the input and next button. In this insertion I add a link to the image. As for example, by adding 5 inputs, four are working, then the first one has src unknown. What is the problem here?



inputval = 0;
$("#incrementer").on("click", function() {
inputval = $(".param1").val();
if (inputval < 5) {
inputval++;
$(".param1").val(inputval);
} else {
alert("Error! Max five elements");
}
});

$("#decrementer").on("click", function() {
inputval = $(".param1").val();
inputval--;
if (inputval <= 0) {
inputval = 0;
}
$(".param1").val(inputval);
});

function popup(enabled) {
switch (enabled) {
case "enable":
$("#popup").css("display", "block");
break;

case "disabled":
$("#popup").fadeOut("slow");
break;
}
}

function param(type) {
$("#generate").off();
field = $(".param1").val();

switch (type) {
case "optional":
if (field == 1) {
for (counter = 0; counter < field; counter++) {
$("#example").append('<div class="grid-1-5"><p class="test">Add optional img</p></div>');
}
} else if (field == 2) {
for (counter = 0; counter < field; counter++) {
$("#example").append('<div class="grid-2-5"><p class="test">Add optional img</p></div>');
}
} else if (field == 3) {
for (counter = 0; counter < field; counter++) {
$("#example").append('<div class="grid-3-5"><p class="test">Add optional img</p></div>');
}
} else if (field == 4) {
for (counter = 0; counter < field; counter++) {
$("#example").append('<div class="grid-4-5"><p class="test">Add optional img</p></div>');
}
} else if (field == 5) {
for (counter = 0; counter < field; counter++) {
$("#example").append('<div class="grid-5-5"><p class="test">Add optional img</p></div>');
}
} else {
alert("Error!");
}

$(".test").on("click", function() {
$(this).parent().append('<input type="text" name="param2" id="param2" placeholder="Path to img" /><button type="button" class="submit-btn">Add</button>');
$(this).fadeOut("slow");
pathtoimg = $("#param2").val();

$(".submit-btn").on("click", function() {
$(this).parent().append('<img style="width: 100%;" src="' + pathtoimg + '" />');
$(this).fadeOut("slow");
$(this).prev().fadeOut("slow");
});
});
break;
}
}

$("#optional").on("click", function() {
popup("enable");

$("#generate").on("click", function() {
param("optional");
});
});

$("#close").on("click", function() {
popup("disabled");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="optional">Additional box</a>
<div id="popup" style="position: absolute; top: 50%; transform: translateY(-50%); width: 500px; left: 50%; margin-left: -250px; background: #000; color: #fff; display: none;">
<p>Params <button type="button" id="close">x</button></p>
<div style="position: relative; overflow: hidden; width: 173px;">
<button type="button" id="incrementer" style="position: absolute; right: 0; top: 0; height: 21px; width: 21px; border: 0;">+</button>
<button type="button" id="decrementer" style="position: absolute; right: 21px; top: 0; height: 21px; width: 21px; border: 0;">-</button>
<input class="param1" type="text" placeholder="0" value="" />
</div>
<button type="button" id="generate">Generate</button>
<div id="example"></div>




Answer Source

You are trying to get input value before submit click.

You need to get input value when user click on submit like below and it will work.

 $(".submit-btn").on("click", function() {
              pathtoimg = $(this).prev().val();

Remove pathtoimg = $("#param2").val(); on .test click.

inputval = 0;
$("#incrementer").on("click", function() {
  inputval = $(".param1").val();
  if (inputval < 5) {
    inputval++;
    $(".param1").val(inputval);
  } else {
    alert("Error! Max five elements");
  }
});

$("#decrementer").on("click", function() {
  inputval = $(".param1").val();
  inputval--;
  if (inputval <= 0) {
    inputval = 0;
  }
  $(".param1").val(inputval);
});

function popup(enabled) {
  switch (enabled) {
    case "enable":
      $("#popup").css("display", "block");
      break;

    case "disabled":
      $("#popup").fadeOut("slow");
      break;
  }
}

function param(type) {
  $("#generate").off();
  field = $(".param1").val();

  switch (type) {
    case "optional":
      if (field == 1) {
        for (counter = 0; counter < field; counter++) {
          $("#example").append('<div class="grid-1-5"><p class="test">Add optional img</p></div>');
        }
      } else if (field == 2) {
        for (counter = 0; counter < field; counter++) {
          $("#example").append('<div class="grid-2-5"><p class="test">Add optional img</p></div>');
        }
      } else if (field == 3) {
        for (counter = 0; counter < field; counter++) {
          $("#example").append('<div class="grid-3-5"><p class="test">Add optional img</p></div>');
        }
      } else if (field == 4) {
        for (counter = 0; counter < field; counter++) {
          $("#example").append('<div class="grid-4-5"><p class="test">Add optional img</p></div>');
        }
      } else if (field == 5) {
        for (counter = 0; counter < field; counter++) {
          $("#example").append('<div class="grid-5-5"><p class="test">Add optional img</p></div>');
        }
      } else {
        alert("Error!");
      }

      $(".test").on("click", function() {
        $(this).parent().append('<input type="text" name="param2" class="param2" placeholder="Path to img" /><button type="button" class="submit-btn">Add</button>');
        $(this).fadeOut("slow");

        $(".submit-btn").on("click", function() {
          pathtoimg = $(this).prev().val();
          $(this).parent().append('<img style="width: 100%;" src="' + pathtoimg + '" />');
          $(this).fadeOut("slow");
          $(this).prev().fadeOut("slow");
        });
      });
      break;
  }
}

$("#optional").on("click", function() {
  popup("enable");

  $("#generate").on("click", function() {
    param("optional");
  });
});

$("#close").on("click", function() {
  popup("disabled");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="optional">Additional box</a>
<div id="popup" style="position: absolute; top: 50%; transform: translateY(-50%); width: 500px; left: 50%; margin-left: -250px; background: #000; color: #fff; display: none;">
  <p>Params <button type="button" id="close">x</button></p>
  <div style="position: relative; overflow: hidden; width: 173px;">
    <button type="button" id="incrementer" style="position: absolute; right: 0; top: 0; height: 21px; width: 21px; border: 0;">+</button>
    <button type="button" id="decrementer" style="position: absolute; right: 21px; top: 0; height: 21px; width: 21px; border: 0;">-</button>
    <input class="param1" type="text" placeholder="0" value="" />
  </div>
  <button type="button" id="generate">Generate</button>
  <div id="example"></div>