We Keep Coding

When button is clicked, display the value on my textbox

newbie here. My target is when is when I click the button, my 2nd textbox will do the copy without comma. How can I make this work? I provided my JS fiddle and codes below. Any help will be appreciated. Thank you
JS Fiddle: https://jsfiddle.net/rain0221/auk4rfdg/6/ // I provided more explanation here
html:
<input type="text" value="" class="form-control" id="box"/>
<input type="text" value="" id="textbox2" required name="amount1" min="100" autocomplete="off"/>
<input id="bet4" class="amount btn btn-success" type="button" onclick="showme('5,000')" value="5000">
script:
//this function copies the textbox1 values with autocomma and produces same value but without comma on textbox2
function updateTextView(_obj) {
var num = getNumber(_obj.val());
if (num == 0) {
_obj.val('');
} else {
$("#textbox2").val(num);
_obj.val(num.toLocaleString());
}
}
function getNumber(_str){
var arr = _str.split('');
var out = new Array();
for(var cnt=0;cnt<arr.length;cnt++){
if(isNaN(arr[cnt])==false){
out.push(arr[cnt]);
}
}
return Number(out.join(''));
}
$(document).ready(function(){
$('#box').on('keyup',function(){
updateTextView($(this));
});
});
//this function shows the value of my button to the textbox
$(document).ready(function(){
$("#bet4").on("click", function(e)
{
e.preventDefault();
let box = $("#box").val();
$("#betAmountResult").html(box);
})
})
function showme(count){
document.getElementById("box").value=count;
}

When 5000 clicked, change textbox2 value!
Code snippet:
function updateTextView(_obj) {
var num = getNumber(_obj.val());
if (num == 0) {
_obj.val('');
} else {
$("#textbox2").val(num);
_obj.val(num.toLocaleString());
}
}
function getNumber(_str){
var arr = _str.split('');
var out = new Array();
for(var cnt=0;cnt<arr.length;cnt++){
if(isNaN(arr[cnt])==false){
out.push(arr[cnt]);
}
}
return Number(out.join(''));
}
$(document).ready(function(){
$('#box').on('keyup',function(){
updateTextView($(this));
});
});
$(document).ready(function(){
$("#bet4").on("click", function(e)
{
e.preventDefault();
let box = $("#box").val();
$("#betAmountResult").html(box);
})
})
function showme(count){
document.getElementById("box").value=count;
document.getElementById("textbox2").value=count.replace(',','');
}
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<input type="text" value="" class="form-control" placeholder="autocomma textbox" id="box"/>
<input type="text" value="" placeholder="same value but no comma" id="textbox2" required name="amount1" min="100" autocomplete="off"/>
<input id="bet4" class="amount btn btn-success" type="button" onclick="showme('5,000')" value="5000">

document.addEventListener("input", action)
document.addEventListener("click", action)
function action(ev){if (ev.target.tagName=="INPUT"){
const ch=ev.target.closest("div").children;
if(ev.target!=ch[1])
ch[1].value=(ev.target.value-0).toLocaleString()
if(ev.target==ch[2])
ch[0].value=ev.target.value;
}}
<div>
<input type="text" value="" class="form-control" required/>
<input type="text" value=""/>
<input class="amount btn btn-success" type="button" value="5000">
</div>
<div>
<input type="text" value="" class="form-control" required/>
<input type="text" value=""/>
<input class="amount btn btn-success" type="button" value="2000000">
</div>
I wrote my snippet without jQuery as it is not really needed here and I reversed the roles of the input fields as it is
a better user experience if the input is not tampered with directly
difficult to "undo" a .toLocaleString(), see here
The trigger for action is the input event which also includes paste actions done via mouse clicks.
I also removed the id attributes from your input values. This way you can add further input groups to your page and re-use the script without further change.
All my addEventListener() actions are done in the "delegated" mode, to the parent document. By doing it this way the event will also be triggered by dynamically added elements (elements that might get added through some user interaction).

How to handle events in dynamic elements?

I want to create a dynamic questionnaire, loading the next question dynamically, but when I load the second question, the event of the button next2 doesn't respond as if there were no event.
I think it's because I load the input with a JavaScript function. What do I have to do to make it work?
$(document).ready(function() {
var question2 = `
<form>
<input type="number" id="age" placeholder="age">
<input type="submit" id="next2">
</form>
`;
var question3 = `
<form>
<input type = "email" id="email" placeholder="email">
<input type="submit" id="next3">
</form>
`;
$('#next').click(function(e) {
e.preventDefault();
console.log(1);
$(".questions").html(question2);
});
$("#next2").click(function(e) {
e.preventDefault();
$(".questions").html(question3);
});
$("#next3").click(function() {
alert('Cool');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="questions">
<form>
<input type="text" id="name" placeholder="Name">
<button type="submit" value="Next" id="next">Next</button>
</form>
</div>
</html>

You should use $(document). It is a function trigger for any click event in the document. Then inside you can use the jquery on("click","#idname",somefunction), where the second argument specifies which specific element to target. In this case every element inside the body.
$(document).on('click', '#next', function(e) {
e.preventDefault();
$(".questions").html(question2);
});

You only need one event handler for all this, not multiple.
You are inserting the HTML into the element with the class questions with $(".questions").html. Given that you should hook the event handlers to that element with the questions class to be as close to the element as possible (not make it traverse the entire DOM looking for things in the events.
Here I took the CURRENT html and saved it to myApp which I created to hold stuff and not pollute the global namespace; Then I cycle back to it on the last. Odd that you have both button and input type submit but I also handle that. Since these are submit buttons in a form, I added the submit event in case that is how it gets triggered.
$(function() {
let myApp = {};
myApp.question2 = ` <form>I am 2
<input type="number" id="age" placeholder="age">
<input type="submit" id="next2" data-nextthing="question3">
</form>
`;
myApp.question3 = ` <form>I am 3
<input type = "email" id="email" placeholder="email">
<input type="submit" id="next3" data-nextthing="question1">
</form>
`;
myApp.question1 = $(".questions").html(); // just to store it
$(".questions")
.on('click submit', 'form, button[type="submit"], input[type="submit"]', function(event) {
event.preventDefault()
let d = $(this).data('nextthing');
$(event.delegateTarget).html(myApp[d]);
return false;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="questions">
<form>
<input type="text" id="name" placeholder="Name">
<button type="submit" value="Next" id="next" data-nextthing="question2">Next</button>
</form>
</div>

add red border on click jquery on inputs

Using jQuery and HTML
When user clicks on button, I just want to put red border if value is empty. Otherwise do not put border.
Issue: first when you click on a button it works fine, but than if you enter a value, and hit button, than red border should be removed
$('.mybutton').click(function() {
if ($(".input").val().trim() == '')
$(".input").css('border-color', 'red');
else
$(".input").css('border-color', '');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" name="fname1" class="input"><br>
<input type="text" name="fname2" class="input"><br>
<input type="text" name="fname3" class="input"><br>
<input type="text" name="fname4" class="input"><br>
<input type="submit" value="Submit" class="mybutton">

Since you have more than one .input class, you have to iterate through them and check whether each input has some value or not.
JSFiddle can works the way you expected.
$(function () {
$('.mybutton').click(function () {
$(".input").each(function () {
if ($(this).val().trim() == '')
$(this).css('border-color', 'red');
else
$(this).css('border-color', '');
});
});
});

Loop each input after every click
Use .addClass() and .removeClass()
use this context to refer to current input to be evaluated if needed to add class or remove class
$('.mybutton').click(function() {
$(".input").each(function() {
if ($(this).val().trim() == '')
$(this).addClass('border');
else
$(this).removeClass('border');
})
});
.border {
border-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" name="fname1" class="input"><br>
<input type="text" name="fname2" class="input"><br>
<input type="text" name="fname3" class="input"><br>
<input type="text" name="fname4" class="input"><br>
<input type="submit" value="Submit" class="mybutton">

You're currently selecting all inputs with your selector .input. When you do this and access the value it would return the value of the first selected element. (You'll notice that the highlighting works based on the value of the first input).
What you should instead do is iterate through the matched elements using .each and check the value/set style using this.
e.g.
$('.mybutton').click(function() {
$(".input").each(function() {
if (this.value.trim().length === 0)
$(this).css('border-color', 'red');
else
$(this).css('border-color', '');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" name="fname1" class="input"><br>
<input type="text" name="fname2" class="input"><br>
<input type="text" name="fname3" class="input"><br>
<input type="text" name="fname4" class="input"><br>
<input type="submit" value="Submit" class="mybutton">
You should also have a look at the required attribute which is a much simpler way of displaying required fields.

You need to add an event handler for the input.
$('.input').on("input", function () {
if ($(".input").val().trim() == '')
$(".input").css('border-color', 'red');
else
$(".input").css('border-color', '');
});
You could go one step further and put this in a function.
Something like this
<script>
function validateInput() {
if ($(".input").val().trim() == '')
$(".input").css('border-color', 'red');
else
$(".input").css('border-color', '');
}
$(function () {
// The JQuery "on" function is generally preferred for
// attaching event handlers
$('.mybutton').on("click" ,validateInput);
$('.input').on("input", validateInput);
});
</script>

jQuery Mobile: Why are onClick and onKeyPress events not working?

In my jQuery Mobile code, I have some onClick and onKeyPress events but they are not firing. I am converting my client's website to a mobile version that includes lot of javascript functions. I don't know if it works if I convert everything into jQuery but I prefer not to do so and would like to keep the javascript functions as it is.
Is there a way to make this work entirely with javascript and not with jQuery?
onClick="javascript:alert('test');" seems to work fine. It's just the functions that are not being called.
http://jsfiddle.net/jetlag/CtkTV/1/
HTML:
<div data-role="fieldcontain">
<label for="textA">Input A</label>
<input class="inputField" id="textA" value="" type="text" onFocus="javascript:clearText(this);" value="This is default text A" />
</div>
<div data-role="fieldcontain">
<label for="textB">Input B</label>
<input class="inputField" id="textB" value="" type="text" onKeyPress="javascript:keyPressEvent(e);" onFocus="javascript:clearText(this);" value="This is default text B" />
</div>
<div class="ui-grid-b">
<div class="ui-block-a"><input type="button" id="goButton" onClick="javascript:goButtonPress();" value="Go" />
</div>
<div class="ui-block-b"><input type="button" id="testButton" onClick="javascript:alert('Alerted!');" value="Alert" />
</div>
</div>
Javascript:
function keyPressEvent(e) {
var evt = e || window.event;
var keyPressed = evt.which || evt.keyCode;
if (keyPressed == 13) {
document.getElementById('goButton').click();
evt.cancel = true;
}
}
function goButtonPress() {
alert('Button Pressed");
}

Working example: http://jsfiddle.net/Gajotres/aLB6T/
While there's nothing wrong with inline java script you should not use it when working with jQuery Mobile. Because of its architecture it can cause big problems. That is why if possible use classic jQuery.
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#testButton', function(){
alert('Alerted!');
});
$(document).on('click', '#goButton', function(){
alert('Button Pressed');
});
$(document).on('keypress', '#textB, #textA', function(evt){
var keyPressed = evt.which || evt.keyCode;
alert(keyPressed);
if (keyPressed == 13) {
document.getElementById('goButton').click();
evt.cancel = true;
}
});
});

There is no e it should be event in your markup. i.e javascript:keyPressEvent(event)
<input class="inputField" id="textB" value="" type="text" onKeyPress="javascript:keyPressEvent(event);" onFocus="javascript:clearText(this);" value="This is default text B" />
Also
Your quotes are at wrong:-
function goButtonPress() {
alert('Button Pressed"); <-- here quotes should match
}
Fiddle
See events

Making Enter key (on keyboard) to submit the information --Jquery

My Form looks like this:
<body>
<form id="myForm" method="post">
<label>id:</label>
<input type="text" name="id" id="id" size="50"/>
<div id="hidden" style="display: none;">
<label>Name:</label>
<input type="text" name="name" size="50"/><br/>
<input type="button" id="button2" value="Update" size="25" /> <br/>
</div>
<input type="button" id="button1" value ="Get Info" onclick="document.getElementById('hidden').style.display = ''; this.style.display = 'none'" size="25"/>
I have JS that looks like this
$(document).ready(function(){
$("#button1").click(function(){
$.post(
'xxx.php',
{ id: $('input[name="id"]', '#myForm').val() },
function(json) {
if (json.abc === 'no'){
alert('does not exist');
}
else{
$("input[name='name']").val(json.name);
}},
"json"
);
});
$("#button2").click(function(){
$('form#myForm').attr({action: "xxx1.php"});
$('form#myForm').submit();
});
});
The problem is that the user can only submit this form by clicking on the submit button. Any ideas on how i can adjust the js so that the enter button(on keyboard) also submits the form?
Note: there are two submit buttons both are interlinked.

You could give your input element an id, for easier retrieval:
<input id="txtName" type="text" name="name" size="50"/><br/>
Then you may bind your function to the keypress event:
$('#txtName').keypress(function (e) {
if (e.which == 13) {
$("#button1").click()
}
});
Or, for a general case, you may want to just bind the function to every text box of the form:
$('#myForm input:text').keypress(function (e) {
if (e.which == 13) {
$("#button1").click()
}
});

This code works for me.
$('#yourform').bind('submit', function() {