Can't change width of input with dynamic value in jquery

Question

I've added <input type="text"> and set its static width. The value of input of total is coming dynamically and it also has a static width.

Problem Statement: input of total has a static width which will not be changed when the number increases. I don't want a static width.. I want to change its width dynamically as number changes.

What I've tried:

$('#resizeme').keydown(function(){
 var contents = $(this).val();
 var charlength = contents.length;
 newwidth =  charlength*9;
 $(this).css({width:newwidth});
});

But it did not work as it works on keydown..But in this case.. The value comes dynamically which does not change on keypress or keydown..

Here is my code:

var $j = jQuery.noConflict();
(function($j) {
  var primaryincome4 = $j("#addnumber4");
  var otherincome = $j(".totalamountremaining");
  $j(".calculate4").click(function() {
    var totalincome = parseInt(primaryincome4.val() || 0) + parseInt(otherincome.val() || 0);
    $j(".totalamountremaining").val(totalincome);
  })
  var primaryincome5 = $j("#addnumber5");
  $j(".calculate5").click(function() {
    var totalincome = parseInt(primaryincome5.val() || 0) + parseInt(otherincome.val() || 0);
    $j(".totalamountremaining").val(totalincome);
  })
})(jQuery);

.add {
  font-size: 40px;
  text-transform: uppercase;
  color: green;
  font-weight: 600;
  letter-spacing: 1px;
  /* margin-left: 20px; */
  width: 120px;
  cursor: pointer;
}

.dolorsign {
  font-size: 40px;
}

.primaryincome.priceleft {
  width: 45px !important;
}

.primaryincome {
  border: none;
  background: white !important;
  font-size: 40px;
  width: 90px !important;
  position: relative;
  top: 0px;
  margin: 0px !important;
  padding: 0px !important;
  /* display: inline-block; */
}

.super {
  font-size: 20px;
  position: relative;
  top: -20px;
}

.price-bold-total {
  width: 50px !important;
  text-align: center;
}

.plan-total-text {
  font-size: 15px;
  margin-right: 12px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="plan wptask">
  <span class="plan-qty qtywidth">
		<span class="add calculate5">
  			<i class="fa fa-plus-square-o" aria-hidden="true"></i>
  			<button>Add</button>
  		</span>
  <span class="dolorsign">$</span>
  <input value="39" id="addnumber5" class="primaryincome priceleft" disabled="" type="text">
  <span class="super">/month</span>
  </span>
</div>
<div class="plan yetadd designtask">
  <span class="plan-qty qtywidth">
		<span class="add calculate4">
  			<i class="fa fa-plus-square-o" aria-hidden="true"></i>
  			<button>Add</button>
  		</span>
  <span class="dolorsign">$</span>
  <input value="1499" id="addnumber4" class="primaryincome" disabled="" type="text">
  <span class="super">/month</span>
  </span>
</div>
<span class="plan-total-text">TOTAL</span>
<span class="dolorsign">$</span>
<input class="totalamountremaining primaryincome priceleft2 price-bold-total" value="0" disabled="" id="txt" type="text">
<span class="super">/month</span>

Carsten Løvbo Andersen · Accepted Answer · 2018-06-19 12:28:21Z

You can try do it like this:

  $j('.totalamountremaining').on("input", function() {
    var contents = $j(this).val();
    var charlength = contents.length;
    newwidth = charlength * 22;
    console.log(newwidth)
    $j(this).css({
      width: newwidth
    });
  });

Your biggest problem is the use of !important because that will overrule width: newwidth

demo

var $j = jQuery.noConflict();
(function($j) {
  var primaryincome4 = $j("#addnumber4");
  var otherincome = $j(".totalamountremaining");
  $j(".calculate4").click(function() {
    var totalincome = parseInt(primaryincome4.val() || 0) + parseInt(otherincome.val() || 0);
    $j(".totalamountremaining").val(totalincome).trigger("input");
  })
  var primaryincome5 = $j("#addnumber5");
  $j(".calculate5").click(function() {
    var totalincome = parseInt(primaryincome5.val() || 0) + parseInt(otherincome.val() || 0);
    $j(".totalamountremaining").val(totalincome).trigger("input");
  })
  $j('.totalamountremaining').on("input", function() {
    var contents = $j(this).val();
    var charlength = contents.length;
    newwidth = charlength * 22;
    console.log(newwidth)
    $j(this).css({
      width: newwidth
    });
  });
})(jQuery);

.add {
  font-size: 40px;
  text-transform: uppercase;
  color: green;
  font-weight: 600;
  letter-spacing: 1px;
  /* margin-left: 20px; */
  width: 120px;
  cursor: pointer;
}

.dolorsign {
  font-size: 40px;
}

.primaryincome.priceleft {
  width: 45px !important;
}

.primaryincome {
  border: none;
  background: white !important;
  font-size: 40px;
  width: 90px;
  position: relative;
  top: 0px;
  margin: 0px !important;
  padding: 0px !important;
  /* display: inline-block; */
}

.super {
  font-size: 20px;
  position: relative;
  top: -20px;
}

.price-bold-total {
  width: 50px;
  text-align: center;
}

.plan-total-text {
  font-size: 15px;
  margin-right: 12px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="plan wptask">
  <span class="plan-qty qtywidth">
		<span class="add calculate5">
  			<i class="fa fa-plus-square-o" aria-hidden="true"></i>
  			<button>Add</button>
  		</span>
  <span class="dolorsign">$</span>
  <input value="39" id="addnumber5" class="primaryincome priceleft" disabled="" type="text">
  <span class="super">/month</span>
  </span>
</div>
<div class="plan yetadd designtask">
  <span class="plan-qty qtywidth">
		<span class="add calculate4">
  			<i class="fa fa-plus-square-o" aria-hidden="true"></i>
  			<button>Add</button>
  		</span>
  <span class="dolorsign">$</span>
  <input value="1499" id="addnumber4" class="primaryincome" disabled="" type="text">
  <span class="super">/month</span>
  </span>
</div>
<span class="plan-total-text">TOTAL</span>
<span class="dolorsign">$</span>
<input class="totalamountremaining primaryincome priceleft2 price-bold-total" value="0" disabled="" id="txt" type="text">
<span class="super">/month</span>

Carsten Løvbo Andersen · Accepted Answer · 2018-06-19 13:49:37Z

var $j = jQuery.noConflict();
(function($j) {
  var primaryincome4 = $j("#addnumber4");
  var otherincome = $j(".totalamountremaining");
  $j(".calculate4").click(function() {
    var totalincome = parseInt(primaryincome4.val() || 0) + parseInt(otherincome.val() || 0);
    $j(".totalamountremaining").val(totalincome);
    $j(".totalamountremaining1").text(totalincome);
  })
  var primaryincome5 = $j("#addnumber5");
  $j(".calculate5").click(function() {
    var totalincome = parseInt(primaryincome5.val() || 0) + parseInt(otherincome.val() || 0);
    $j(".totalamountremaining").val(totalincome);
    $j(".totalamountremaining1").text(totalincome);
  })
})(jQuery);

.add {
  font-size: 40px;
  text-transform: uppercase;
  color: green;
  font-weight: 600;
  letter-spacing: 1px;
  /* margin-left: 20px; */
  width: 120px;
  cursor: pointer;
}

.dolorsign {
  font-size: 40px;
}

.primaryincome.priceleft {
  width: 45px !important;
}

.primaryincome {
  border: none;
  background: white !important;
  font-size: 40px;
  width: 90px !important;
  position: relative;
  top: 0px;
  margin: 0px !important;
  padding: 0px !important;
  /* display: inline-block; */
}

.super {
  font-size: 20px;
  position: relative;
  top: -20px;
}

.price-bold-total {
  width: 50px !important;
  text-align: center;
}

.plan-total-text {
  font-size: 15px;
  margin-right: 12px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="plan wptask">
  <span class="plan-qty qtywidth">
		<span class="add calculate5">
  			<i class="fa fa-plus-square-o" aria-hidden="true"></i>
  			<button>Add</button>
  		</span>
  <span class="dolorsign">$</span>
  <input value="39" id="addnumber5" class="primaryincome priceleft" disabled="" type="text">
  <span class="super">/month</span>
  </span>
</div>
<div class="plan yetadd designtask">
  <span class="plan-qty qtywidth">
		<span class="add calculate4">
  			<i class="fa fa-plus-square-o" aria-hidden="true"></i>
  			<button>Add</button>
  		</span>
  <span class="dolorsign">$</span>
  <input value="1499" id="addnumber4" class="primaryincome" disabled="" type="text">
  <span class="super">/month</span>
  </span>
</div>
<span class="plan-total-text">TOTAL</span>
<span class="dolorsign">$</span>
<input class="totalamountremaining primaryincome priceleft2 price-bold-total" value="0" disabled="" id="txt" type="hidden">
<span class="totalamountremaining1 primaryincome priceleft2 price-bold-total"> 0 </span>
<span class="super">/month</span>

Carsten Løvbo Andersen · Accepted Answer · 2018-06-19 13:49:27Z

You can make a function that will do that for you and call it every time a click happens. Example:

var $j = jQuery.noConflict();
(function($j) {
  var primaryincome4 = $j("#addnumber4");
  var otherincome = $j(".totalamountremaining");
  $j(".calculate4").click(function() {
    var totalincome = parseInt(primaryincome4.val() || 0) + parseInt(otherincome.val() || 0);
    $j(".totalamountremaining").val(totalincome);
    setWidth();
  })
  var primaryincome5 = $j("#addnumber5");
  $j(".calculate5").click(function() {
    var totalincome = parseInt(primaryincome5.val() || 0) + parseInt(otherincome.val() || 0);
    $j(".totalamountremaining").val(totalincome);
    setWidth();
  })

  function setWidth() {
    var contents = $j(".totalamountremaining").val();
    var charlength = contents.length;
    newwidth = charlength * 25;
    $j(".totalamountremaining").attr('style', 'width: ' + newwidth + 'px !important;')
  }

})(jQuery);

.add {
  font-size: 40px;
  text-transform: uppercase;
  color: green;
  font-weight: 600;
  letter-spacing: 1px;
  /* margin-left: 20px; */
  width: 120px;
  cursor: pointer;
}

.dolorsign {
  font-size: 40px;
}

.primaryincome.priceleft {
  width: 45px !important;
}

.primaryincome {
  border: none;
  background: white !important;
  font-size: 40px;
  width: 90px !important;
  position: relative;
  top: 0px;
  margin: 0px !important;
  padding: 0px !important;
  /* display: inline-block; */
}

.super {
  font-size: 20px;
  position: relative;
  top: -20px;
}

.price-bold-total {
  width: 50px !important;
  text-align: center;
}

.plan-total-text {
  font-size: 15px;
  margin-right: 12px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="plan wptask">
  <span class="plan-qty qtywidth">
		<span class="add calculate5">
  			<i class="fa fa-plus-square-o" aria-hidden="true"></i>
  			<button>Add</button>
  		</span>
  <span class="dolorsign">$</span>
  <input value="39" id="addnumber5" class="primaryincome priceleft" disabled="" type="text">
  <span class="super">/month</span>
  </span>
</div>
<div class="plan yetadd designtask">
  <span class="plan-qty qtywidth">
		<span class="add calculate4">
  			<i class="fa fa-plus-square-o" aria-hidden="true"></i>
  			<button>Add</button>
  		</span>
  <span class="dolorsign">$</span>
  <input value="1499" id="addnumber4" class="primaryincome" disabled="" type="text">
  <span class="super">/month</span>
  </span>
</div>
<span class="plan-total-text">TOTAL</span>
<span class="dolorsign">$</span>
<input class="totalamountremaining primaryincome priceleft2 price-bold-total" value="0" disabled="" id="txt" type="text">
<span class="super">/month</span>

Collectives™ on Stack Overflow

Can't change width of input with dynamic value in jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related