Jquery change textfield value and run function

I'm struggeling to get a function to run when a textfield is changed on a button click. So when clicking a plus/min button the text input is changed to a new value. However I want to run a function when textfield value is changed either by those buttons or by typing a value inside the textfield.

Manually typing is working but somehow the function won't run when using a button.

My html (there are multiple table cells like below):

<td class="amt">

  <button class="pp_order_min" type="button"><i class="fa fa-minus"></i></button>

  <input type="text" maxlength="4" class="pp_count" value="0" name="count[1]" min="0">

  <button class="pp_order_plus" type="button"><i class="fa fa-plus"></i></button>

</td>

My JS:

$(function(){ 



  $('.pp_order_min').bind("click", function(){

   if($(this).next().val() !== '0') $(this).next().val(parseInt($(this).next().val()) - 1);

      $(this).next().trigger('change') // next is the input field

  });

  $('.pp_order_plus').bind("click", function(){

   if($(this).prev().val() !== '999') $(this).prev().val(parseInt($(this).prev().val()) + 1);

      $(this).prev().trigger('change') // prev is the input field

  });



  $('.pp_count').each(function(){ // using each since there are more input fields like this

    $(this).bind('input', function(){ // also tried 'on change' etc

      var amt = $(this).val();

      getNewAttributes(amt);

      console.log(amt);

     });

   });



 });

I thought that trigger a change event and the bind an input event would work. But that's not the case! I also tried litterally every on change event that I could think off.

I'm probably overlooking something dumb here! Any help greatly appreciated.

edited Nov 20 '18 at 12:59

Itay Gal

7,81152560

asked Nov 20 '18 at 12:53

Meules

67331341

1

Why don't you trigger 'input'?

– yunzen
Nov 20 '18 at 13:02

@HerrSerker: Like I said I was missing something dumb :facepalm

– Meules
Nov 20 '18 at 13:05

BTW .bind() is deprecated as of jQuery 3. api.jquery.com/bind/#entry-longdesc You should use .on() instead api.jquery.com/on

– yunzen
Nov 20 '18 at 13:09

@HerrSerker: Yes you're right. I was mixing some old code with new code. Generally not the best idea in terms off making dumb mistakes like above :)

– Meules
Nov 20 '18 at 13:10

add a comment |

Manually typing is working but somehow the function won't run when using a button.

My html (there are multiple table cells like below):

<td class="amt">

  <button class="pp_order_min" type="button"><i class="fa fa-minus"></i></button>

  <input type="text" maxlength="4" class="pp_count" value="0" name="count[1]" min="0">

  <button class="pp_order_plus" type="button"><i class="fa fa-plus"></i></button>

</td>

My JS:

$(function(){ 



  $('.pp_order_min').bind("click", function(){

   if($(this).next().val() !== '0') $(this).next().val(parseInt($(this).next().val()) - 1);

      $(this).next().trigger('change') // next is the input field

  });

  $('.pp_order_plus').bind("click", function(){

   if($(this).prev().val() !== '999') $(this).prev().val(parseInt($(this).prev().val()) + 1);

      $(this).prev().trigger('change') // prev is the input field

  });



  $('.pp_count').each(function(){ // using each since there are more input fields like this

    $(this).bind('input', function(){ // also tried 'on change' etc

      var amt = $(this).val();

      getNewAttributes(amt);

      console.log(amt);

     });

   });



 });

I thought that trigger a change event and the bind an input event would work. But that's not the case! I also tried litterally every on change event that I could think off.

I'm probably overlooking something dumb here! Any help greatly appreciated.

edited Nov 20 '18 at 12:59

Itay Gal

7,81152560

asked Nov 20 '18 at 12:53

Meules

67331341

1

Why don't you trigger 'input'?

– yunzen
Nov 20 '18 at 13:02

@HerrSerker: Like I said I was missing something dumb :facepalm

– Meules
Nov 20 '18 at 13:05

BTW .bind() is deprecated as of jQuery 3. api.jquery.com/bind/#entry-longdesc You should use .on() instead api.jquery.com/on

– yunzen
Nov 20 '18 at 13:09

@HerrSerker: Yes you're right. I was mixing some old code with new code. Generally not the best idea in terms off making dumb mistakes like above :)

– Meules
Nov 20 '18 at 13:10

add a comment |

Manually typing is working but somehow the function won't run when using a button.

My html (there are multiple table cells like below):

<td class="amt">

  <button class="pp_order_min" type="button"><i class="fa fa-minus"></i></button>

  <input type="text" maxlength="4" class="pp_count" value="0" name="count[1]" min="0">

  <button class="pp_order_plus" type="button"><i class="fa fa-plus"></i></button>

</td>

My JS:

$(function(){ 



  $('.pp_order_min').bind("click", function(){

   if($(this).next().val() !== '0') $(this).next().val(parseInt($(this).next().val()) - 1);

      $(this).next().trigger('change') // next is the input field

  });

  $('.pp_order_plus').bind("click", function(){

   if($(this).prev().val() !== '999') $(this).prev().val(parseInt($(this).prev().val()) + 1);

      $(this).prev().trigger('change') // prev is the input field

  });



  $('.pp_count').each(function(){ // using each since there are more input fields like this

    $(this).bind('input', function(){ // also tried 'on change' etc

      var amt = $(this).val();

      getNewAttributes(amt);

      console.log(amt);

     });

   });



 });

I thought that trigger a change event and the bind an input event would work. But that's not the case! I also tried litterally every on change event that I could think off.

I'm probably overlooking something dumb here! Any help greatly appreciated.

edited Nov 20 '18 at 12:59

Itay Gal

7,81152560

asked Nov 20 '18 at 12:53

Meules

67331341

Manually typing is working but somehow the function won't run when using a button.

My html (there are multiple table cells like below):

<td class="amt">

  <button class="pp_order_min" type="button"><i class="fa fa-minus"></i></button>

  <input type="text" maxlength="4" class="pp_count" value="0" name="count[1]" min="0">

  <button class="pp_order_plus" type="button"><i class="fa fa-plus"></i></button>

</td>

My JS:

$(function(){ 



  $('.pp_order_min').bind("click", function(){

   if($(this).next().val() !== '0') $(this).next().val(parseInt($(this).next().val()) - 1);

      $(this).next().trigger('change') // next is the input field

  });

  $('.pp_order_plus').bind("click", function(){

   if($(this).prev().val() !== '999') $(this).prev().val(parseInt($(this).prev().val()) + 1);

      $(this).prev().trigger('change') // prev is the input field

  });



  $('.pp_count').each(function(){ // using each since there are more input fields like this

    $(this).bind('input', function(){ // also tried 'on change' etc

      var amt = $(this).val();

      getNewAttributes(amt);

      console.log(amt);

     });

   });



 });

I thought that trigger a change event and the bind an input event would work. But that's not the case! I also tried litterally every on change event that I could think off.

I'm probably overlooking something dumb here! Any help greatly appreciated.

javascript jquery input onchange

edited Nov 20 '18 at 12:59

Itay Gal

7,81152560

asked Nov 20 '18 at 12:53

Meules

67331341

edited Nov 20 '18 at 12:59

Itay Gal

7,81152560

asked Nov 20 '18 at 12:53

Meules

67331341

edited Nov 20 '18 at 12:59

Itay Gal

7,81152560

edited Nov 20 '18 at 12:59

Itay Gal

7,81152560

edited Nov 20 '18 at 12:59

Itay Gal

7,81152560

asked Nov 20 '18 at 12:53

Meules

67331341

asked Nov 20 '18 at 12:53

Meules

67331341

asked Nov 20 '18 at 12:53

Meules

67331341

1

Why don't you trigger 'input'?

– yunzen
Nov 20 '18 at 13:02

@HerrSerker: Like I said I was missing something dumb :facepalm

– Meules
Nov 20 '18 at 13:05

BTW .bind() is deprecated as of jQuery 3. api.jquery.com/bind/#entry-longdesc You should use .on() instead api.jquery.com/on

– yunzen
Nov 20 '18 at 13:09

@HerrSerker: Yes you're right. I was mixing some old code with new code. Generally not the best idea in terms off making dumb mistakes like above :)

– Meules
Nov 20 '18 at 13:10

add a comment |

1

Why don't you trigger 'input'?

– yunzen
Nov 20 '18 at 13:02

@HerrSerker: Like I said I was missing something dumb :facepalm

– Meules
Nov 20 '18 at 13:05

BTW .bind() is deprecated as of jQuery 3. api.jquery.com/bind/#entry-longdesc You should use .on() instead api.jquery.com/on

– yunzen
Nov 20 '18 at 13:09

@HerrSerker: Yes you're right. I was mixing some old code with new code. Generally not the best idea in terms off making dumb mistakes like above :)

– Meules
Nov 20 '18 at 13:10

Why don't you trigger 'input'?

– yunzen
Nov 20 '18 at 13:02

@HerrSerker: Like I said I was missing something dumb :facepalm

– Meules
Nov 20 '18 at 13:05

BTW .bind() is deprecated as of jQuery 3. api.jquery.com/bind/#entry-longdesc You should use .on() instead api.jquery.com/on

– yunzen
Nov 20 '18 at 13:09

@HerrSerker: Yes you're right. I was mixing some old code with new code. Generally not the best idea in terms off making dumb mistakes like above :)

– Meules
Nov 20 '18 at 13:10

add a comment |

3 Answers
3

active

oldest

votes

You should trigger input instead of change, since this is what you are binding to.

answered Nov 20 '18 at 13:07

yunzen

20.2k84779

add a comment |

use .change() instead trigger

$(function(){ 



  $('.pp_order_min').bind("click", function(){

   if($(this).next().val() !== '0') $(this).next().val(parseInt($(this).next().val()) - 1);

      $(this).next().change() // next is the input field

  });

  $('.pp_order_plus').bind("click", function(){

   if($(this).prev().val() !== '999') $(this).prev().val(parseInt($(this).prev().val()) + 1);

      $(this).prev().change() // prev is the input field

  });



  $('.pp_count').each(function(){ // using each since there are more input fields like this

    $(this).bind('change input', function(){ // also tried 'on change' etc

      var amt = $(this).val();

      //getNewAttributes(amt)

      console.log(amt)

     });

   });



 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<td class="amt">

  <button class="pp_order_min" type="button"><i class="fa fa-minus"></i>-</button>

  <input type="text" maxlength="4" class="pp_count" value="0" name="count[1]" min="0">

  <button class="pp_order_plus" type="button"><i class="fa fa-plus"></i>+</button>

</td>

answered Nov 20 '18 at 13:01

Luis felipe De jesus Munoz

4,3901830

add a comment |

I suggest you to bind only one time change function to input box.

$(function(){ 



  $('.pp_order_min').on("click", function(){

     var currentObj=$(this);

     debugger;

     if(currentObj.next().val()  === '') return;

     if(currentObj.next().val() !== '0') currentObj.next().val(parseInt(currentObj.next().val()) - 1);

     currentObj.next().change(); // next is the input field

  });

  $('.pp_order_plus').on("click", function(){

   var currentObj=$(this);

   debugger;

   if(currentObj.prev().val()  === '') return;

   if(currentObj.prev().val() !== '999') currentObj.prev().val(parseInt(currentObj.prev().val()) + 1);

      currentObj.prev().change(); // prev is the input field

  });

  $('.pp_count').on('change input', function(){ // also tried 'on change' etc

      var amt = $(this).val();

      console.log(amt)

   });

   $('.pp_count').each(function(){ // using each since there are more input fields like this

      $(this).click();// 

   });

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<td class="amt">

  <button class="pp_order_min" type="button"><i class="fa fa-minus"></i>-</button>

  <input type="text" maxlength="4" class="pp_count" value="0" name="count[1]" min="0">

  <button class="pp_order_plus" type="button"><i class="fa fa-plus"></i>+</button>

</td>

Please take a look here for multiple textbox.

answered Nov 20 '18 at 13:21

Negi Rox

1,7051511

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53393445%2fjquery-change-textfield-value-and-run-function%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

You should trigger input instead of change, since this is what you are binding to.

answered Nov 20 '18 at 13:07

yunzen

20.2k84779

add a comment |

You should trigger input instead of change, since this is what you are binding to.

answered Nov 20 '18 at 13:07

yunzen

20.2k84779

add a comment |

You should trigger input instead of change, since this is what you are binding to.

answered Nov 20 '18 at 13:07

yunzen

20.2k84779

You should trigger input instead of change, since this is what you are binding to.

answered Nov 20 '18 at 13:07

yunzen

20.2k84779

answered Nov 20 '18 at 13:07

yunzen

20.2k84779

answered Nov 20 '18 at 13:07

yunzen

20.2k84779

answered Nov 20 '18 at 13:07

yunzen

20.2k84779

add a comment |

use .change() instead trigger

$(function(){ 



  $('.pp_order_min').bind("click", function(){

   if($(this).next().val() !== '0') $(this).next().val(parseInt($(this).next().val()) - 1);

      $(this).next().change() // next is the input field

  });

  $('.pp_order_plus').bind("click", function(){

   if($(this).prev().val() !== '999') $(this).prev().val(parseInt($(this).prev().val()) + 1);

      $(this).prev().change() // prev is the input field

  });



  $('.pp_count').each(function(){ // using each since there are more input fields like this

    $(this).bind('change input', function(){ // also tried 'on change' etc

      var amt = $(this).val();

      //getNewAttributes(amt)

      console.log(amt)

     });

   });



 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<td class="amt">

  <button class="pp_order_min" type="button"><i class="fa fa-minus"></i>-</button>

  <input type="text" maxlength="4" class="pp_count" value="0" name="count[1]" min="0">

  <button class="pp_order_plus" type="button"><i class="fa fa-plus"></i>+</button>

</td>

answered Nov 20 '18 at 13:01

Luis felipe De jesus Munoz

4,3901830

add a comment |

use .change() instead trigger

$(function(){ 



  $('.pp_order_min').bind("click", function(){

   if($(this).next().val() !== '0') $(this).next().val(parseInt($(this).next().val()) - 1);

      $(this).next().change() // next is the input field

  });

  $('.pp_order_plus').bind("click", function(){

   if($(this).prev().val() !== '999') $(this).prev().val(parseInt($(this).prev().val()) + 1);

      $(this).prev().change() // prev is the input field

  });



  $('.pp_count').each(function(){ // using each since there are more input fields like this

    $(this).bind('change input', function(){ // also tried 'on change' etc

      var amt = $(this).val();

      //getNewAttributes(amt)

      console.log(amt)

     });

   });



 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<td class="amt">

  <button class="pp_order_min" type="button"><i class="fa fa-minus"></i>-</button>

  <input type="text" maxlength="4" class="pp_count" value="0" name="count[1]" min="0">

  <button class="pp_order_plus" type="button"><i class="fa fa-plus"></i>+</button>

</td>

answered Nov 20 '18 at 13:01

Luis felipe De jesus Munoz

4,3901830

add a comment |

use .change() instead trigger

$(function(){ 



  $('.pp_order_min').bind("click", function(){

   if($(this).next().val() !== '0') $(this).next().val(parseInt($(this).next().val()) - 1);

      $(this).next().change() // next is the input field

  });

  $('.pp_order_plus').bind("click", function(){

   if($(this).prev().val() !== '999') $(this).prev().val(parseInt($(this).prev().val()) + 1);

      $(this).prev().change() // prev is the input field

  });



  $('.pp_count').each(function(){ // using each since there are more input fields like this

    $(this).bind('change input', function(){ // also tried 'on change' etc

      var amt = $(this).val();

      //getNewAttributes(amt)

      console.log(amt)

     });

   });



 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<td class="amt">

  <button class="pp_order_min" type="button"><i class="fa fa-minus"></i>-</button>

  <input type="text" maxlength="4" class="pp_count" value="0" name="count[1]" min="0">

  <button class="pp_order_plus" type="button"><i class="fa fa-plus"></i>+</button>

</td>

answered Nov 20 '18 at 13:01

Luis felipe De jesus Munoz

4,3901830

use .change() instead trigger

$(function(){ 



  $('.pp_order_min').bind("click", function(){

   if($(this).next().val() !== '0') $(this).next().val(parseInt($(this).next().val()) - 1);

      $(this).next().change() // next is the input field

  });

  $('.pp_order_plus').bind("click", function(){

   if($(this).prev().val() !== '999') $(this).prev().val(parseInt($(this).prev().val()) + 1);

      $(this).prev().change() // prev is the input field

  });



  $('.pp_count').each(function(){ // using each since there are more input fields like this

    $(this).bind('change input', function(){ // also tried 'on change' etc

      var amt = $(this).val();

      //getNewAttributes(amt)

      console.log(amt)

     });

   });



 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<td class="amt">

  <button class="pp_order_min" type="button"><i class="fa fa-minus"></i>-</button>

  <input type="text" maxlength="4" class="pp_count" value="0" name="count[1]" min="0">

  <button class="pp_order_plus" type="button"><i class="fa fa-plus"></i>+</button>

</td>

$(function(){ 



  $('.pp_order_min').bind("click", function(){

   if($(this).next().val() !== '0') $(this).next().val(parseInt($(this).next().val()) - 1);

      $(this).next().change() // next is the input field

  });

  $('.pp_order_plus').bind("click", function(){

   if($(this).prev().val() !== '999') $(this).prev().val(parseInt($(this).prev().val()) + 1);

      $(this).prev().change() // prev is the input field

  });



  $('.pp_count').each(function(){ // using each since there are more input fields like this

    $(this).bind('change input', function(){ // also tried 'on change' etc

      var amt = $(this).val();

      //getNewAttributes(amt)

      console.log(amt)

     });

   });



 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<td class="amt">

  <button class="pp_order_min" type="button"><i class="fa fa-minus"></i>-</button>

  <input type="text" maxlength="4" class="pp_count" value="0" name="count[1]" min="0">

  <button class="pp_order_plus" type="button"><i class="fa fa-plus"></i>+</button>

</td>

$(function(){ 



  $('.pp_order_min').bind("click", function(){

   if($(this).next().val() !== '0') $(this).next().val(parseInt($(this).next().val()) - 1);

      $(this).next().change() // next is the input field

  });

  $('.pp_order_plus').bind("click", function(){

   if($(this).prev().val() !== '999') $(this).prev().val(parseInt($(this).prev().val()) + 1);

      $(this).prev().change() // prev is the input field

  });



  $('.pp_count').each(function(){ // using each since there are more input fields like this

    $(this).bind('change input', function(){ // also tried 'on change' etc

      var amt = $(this).val();

      //getNewAttributes(amt)

      console.log(amt)

     });

   });



 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<td class="amt">

  <button class="pp_order_min" type="button"><i class="fa fa-minus"></i>-</button>

  <input type="text" maxlength="4" class="pp_count" value="0" name="count[1]" min="0">

  <button class="pp_order_plus" type="button"><i class="fa fa-plus"></i>+</button>

</td>

answered Nov 20 '18 at 13:01

Luis felipe De jesus Munoz

4,3901830

answered Nov 20 '18 at 13:01

Luis felipe De jesus Munoz

4,3901830

answered Nov 20 '18 at 13:01

Luis felipe De jesus Munoz

4,3901830

answered Nov 20 '18 at 13:01

Luis felipe De jesus Munoz

4,3901830

add a comment |

I suggest you to bind only one time change function to input box.

$(function(){ 



  $('.pp_order_min').on("click", function(){

     var currentObj=$(this);

     debugger;

     if(currentObj.next().val()  === '') return;

     if(currentObj.next().val() !== '0') currentObj.next().val(parseInt(currentObj.next().val()) - 1);

     currentObj.next().change(); // next is the input field

  });

  $('.pp_order_plus').on("click", function(){

   var currentObj=$(this);

   debugger;

   if(currentObj.prev().val()  === '') return;

   if(currentObj.prev().val() !== '999') currentObj.prev().val(parseInt(currentObj.prev().val()) + 1);

      currentObj.prev().change(); // prev is the input field

  });

  $('.pp_count').on('change input', function(){ // also tried 'on change' etc

      var amt = $(this).val();

      console.log(amt)

   });

   $('.pp_count').each(function(){ // using each since there are more input fields like this

      $(this).click();// 

   });

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<td class="amt">

  <button class="pp_order_min" type="button"><i class="fa fa-minus"></i>-</button>

  <input type="text" maxlength="4" class="pp_count" value="0" name="count[1]" min="0">

  <button class="pp_order_plus" type="button"><i class="fa fa-plus"></i>+</button>

</td>

Please take a look here for multiple textbox.

answered Nov 20 '18 at 13:21

Negi Rox

1,7051511

add a comment |

I suggest you to bind only one time change function to input box.

$(function(){ 



  $('.pp_order_min').on("click", function(){

     var currentObj=$(this);

     debugger;

     if(currentObj.next().val()  === '') return;

     if(currentObj.next().val() !== '0') currentObj.next().val(parseInt(currentObj.next().val()) - 1);

     currentObj.next().change(); // next is the input field

  });

  $('.pp_order_plus').on("click", function(){

   var currentObj=$(this);

   debugger;

   if(currentObj.prev().val()  === '') return;

   if(currentObj.prev().val() !== '999') currentObj.prev().val(parseInt(currentObj.prev().val()) + 1);

      currentObj.prev().change(); // prev is the input field

  });

  $('.pp_count').on('change input', function(){ // also tried 'on change' etc

      var amt = $(this).val();

      console.log(amt)

   });

   $('.pp_count').each(function(){ // using each since there are more input fields like this

      $(this).click();// 

   });

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<td class="amt">

  <button class="pp_order_min" type="button"><i class="fa fa-minus"></i>-</button>

  <input type="text" maxlength="4" class="pp_count" value="0" name="count[1]" min="0">

  <button class="pp_order_plus" type="button"><i class="fa fa-plus"></i>+</button>

</td>

Please take a look here for multiple textbox.

answered Nov 20 '18 at 13:21

Negi Rox

1,7051511

add a comment |

I suggest you to bind only one time change function to input box.

$(function(){ 



  $('.pp_order_min').on("click", function(){

     var currentObj=$(this);

     debugger;

     if(currentObj.next().val()  === '') return;

     if(currentObj.next().val() !== '0') currentObj.next().val(parseInt(currentObj.next().val()) - 1);

     currentObj.next().change(); // next is the input field

  });

  $('.pp_order_plus').on("click", function(){

   var currentObj=$(this);

   debugger;

   if(currentObj.prev().val()  === '') return;

   if(currentObj.prev().val() !== '999') currentObj.prev().val(parseInt(currentObj.prev().val()) + 1);

      currentObj.prev().change(); // prev is the input field

  });

  $('.pp_count').on('change input', function(){ // also tried 'on change' etc

      var amt = $(this).val();

      console.log(amt)

   });

   $('.pp_count').each(function(){ // using each since there are more input fields like this

      $(this).click();// 

   });

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<td class="amt">

  <button class="pp_order_min" type="button"><i class="fa fa-minus"></i>-</button>

  <input type="text" maxlength="4" class="pp_count" value="0" name="count[1]" min="0">

  <button class="pp_order_plus" type="button"><i class="fa fa-plus"></i>+</button>

</td>

Please take a look here for multiple textbox.

answered Nov 20 '18 at 13:21

Negi Rox

1,7051511

I suggest you to bind only one time change function to input box.

$(function(){ 



  $('.pp_order_min').on("click", function(){

     var currentObj=$(this);

     debugger;

     if(currentObj.next().val()  === '') return;

     if(currentObj.next().val() !== '0') currentObj.next().val(parseInt(currentObj.next().val()) - 1);

     currentObj.next().change(); // next is the input field

  });

  $('.pp_order_plus').on("click", function(){

   var currentObj=$(this);

   debugger;

   if(currentObj.prev().val()  === '') return;

   if(currentObj.prev().val() !== '999') currentObj.prev().val(parseInt(currentObj.prev().val()) + 1);

      currentObj.prev().change(); // prev is the input field

  });

  $('.pp_count').on('change input', function(){ // also tried 'on change' etc

      var amt = $(this).val();

      console.log(amt)

   });

   $('.pp_count').each(function(){ // using each since there are more input fields like this

      $(this).click();// 

   });

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<td class="amt">

  <button class="pp_order_min" type="button"><i class="fa fa-minus"></i>-</button>

  <input type="text" maxlength="4" class="pp_count" value="0" name="count[1]" min="0">

  <button class="pp_order_plus" type="button"><i class="fa fa-plus"></i>+</button>

</td>

Please take a look here for multiple textbox.

$(function(){ 



  $('.pp_order_min').on("click", function(){

     var currentObj=$(this);

     debugger;

     if(currentObj.next().val()  === '') return;

     if(currentObj.next().val() !== '0') currentObj.next().val(parseInt(currentObj.next().val()) - 1);

     currentObj.next().change(); // next is the input field

  });

  $('.pp_order_plus').on("click", function(){

   var currentObj=$(this);

   debugger;

   if(currentObj.prev().val()  === '') return;

   if(currentObj.prev().val() !== '999') currentObj.prev().val(parseInt(currentObj.prev().val()) + 1);

      currentObj.prev().change(); // prev is the input field

  });

  $('.pp_count').on('change input', function(){ // also tried 'on change' etc

      var amt = $(this).val();

      console.log(amt)

   });

   $('.pp_count').each(function(){ // using each since there are more input fields like this

      $(this).click();// 

   });

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<td class="amt">

  <button class="pp_order_min" type="button"><i class="fa fa-minus"></i>-</button>

  <input type="text" maxlength="4" class="pp_count" value="0" name="count[1]" min="0">

  <button class="pp_order_plus" type="button"><i class="fa fa-plus"></i>+</button>

</td>

$(function(){ 



  $('.pp_order_min').on("click", function(){

     var currentObj=$(this);

     debugger;

     if(currentObj.next().val()  === '') return;

     if(currentObj.next().val() !== '0') currentObj.next().val(parseInt(currentObj.next().val()) - 1);

     currentObj.next().change(); // next is the input field

  });

  $('.pp_order_plus').on("click", function(){

   var currentObj=$(this);

   debugger;

   if(currentObj.prev().val()  === '') return;

   if(currentObj.prev().val() !== '999') currentObj.prev().val(parseInt(currentObj.prev().val()) + 1);

      currentObj.prev().change(); // prev is the input field

  });

  $('.pp_count').on('change input', function(){ // also tried 'on change' etc

      var amt = $(this).val();

      console.log(amt)

   });

   $('.pp_count').each(function(){ // using each since there are more input fields like this

      $(this).click();// 

   });

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<td class="amt">

  <button class="pp_order_min" type="button"><i class="fa fa-minus"></i>-</button>

  <input type="text" maxlength="4" class="pp_count" value="0" name="count[1]" min="0">

  <button class="pp_order_plus" type="button"><i class="fa fa-plus"></i>+</button>

</td>

answered Nov 20 '18 at 13:21

Negi Rox

1,7051511

answered Nov 20 '18 at 13:21

Negi Rox

1,7051511

answered Nov 20 '18 at 13:21

Negi Rox

1,7051511

answered Nov 20 '18 at 13:21

Negi Rox

1,7051511

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu