CODEWITHSUNDEEP
javascripthtmlcss
Faizan Sadiq
Faizan Sadiq

Reputation: 334

How to set value of multiple input fields with same button

I want to set input field value only when it is clicked and want to set value in two different input fields from same button, when one input field is selected only set value in this field when other selected/clicked value set their.

Try with different ways but not successful. I hope i will be helped in this problem.

thanks

var phoneScreen = $("#phone"); var phoneNumber = phoneScreen.val();
var delBtn = $("#del"); var clrBtn = $("#clr");
var numBtn = $(".number");

numBtn.click(function() {
    var number = $(this).val();
  updatePhoneNumber(number);
  printPhoneNumber();
});
delBtn.click(function() {
    deleteNumber();
  printPhoneNumber();
});
clrBtn.click(function() {
    clearNumber();
  printPhoneNumber();
});

function updatePhoneNumber(newNumber) {
    phoneNumber = phoneNumber + newNumber;
}
function deleteNumber() {
    phoneNumber = phoneNumber.slice(0,-1);
}
function clearNumber() {
    phoneNumber = "";
}
function printPhoneNumber() {
    phoneScreen.val(phoneNumber);
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>


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

  <style>
  </style>
</head>
<body>
<input type="number" id="phone" placeholder="(123) 45-7" min="0" step="1"/>

<input type="number" id="phone2" placeholder="(123) 45-7" min="0" step="1"/>

<form action="#" method="post" id="form">
<button type="button" class="rightside__pad-btn number" value="1">1</button>
<button type="button" type="button" class="rightside__pad-btn number" value="2">2</button>
<button type="button" type="button" class="rightside__pad-btn number" value="3">3</button>
<br />
<button type="button" type="button" class="rightside__pad-btn number" value="4">4</button>
<button type="button" type="button" class="rightside__pad-btn number" value="5">5</button>
<button type="button" type="button" class="rightside__pad-btn number" value="6">6</button>
<br />
<button type="button" type="button" class="rightside__pad-btn number" value="7">7</button>
<button type="button" type="button" class="rightside__pad-btn number" value="8">8</button>
<button type="button" type="button" class="rightside__pad-btn number" value="9">9</button>
<br />
<button type="button" id="del" class="rightside__pad-btn del">
</button>
<button type="button" class="rightside__pad-btn number" value="0">0</button>
<button type="button" id="dial" class="rightside__pad-btn" value="">
</button>
    
    
    </form>

  
</body>
</html>

Upvotes: 1

Views: 1288

Answers (2)

Akhil Aravind
Akhil Aravind

Reputation: 6130

I just added few changes

  1. var hasFocus = $('#phone'); Set #phone as default focused element.

  2. Update the hasFocus to selected input element.

   $('input[type=number]').on('click', function(){
      hasFocus = $(this);
    });

Now added function to set value to focused element hasFocus.val(hasFocus.val() +number);

Please update

var phoneScreen = $("#phone"); 
var phoneNumber = phoneScreen.val();
var delBtn = $("#del"); var clrBtn = $("#clr");
var numBtn = $(".number");
var hasFocus = $('#phone');
$('input[type=number]').on('click', function(){
  hasFocus = $(this);
})
numBtn.click(function() {
    var number = $(this).val();  
    hasFocus.val(hasFocus.val() +number);
  //updatePhoneNumber(number);
  //printPhoneNumber(number);
});
delBtn.click(function() {
    deleteNumber();
  printPhoneNumber();
});
clrBtn.click(function() {
    clearNumber();
  printPhoneNumber();
});

function updatePhoneNumber(newNumber) {
    phoneNumber = phoneNumber + newNumber;
}
function deleteNumber() {
    phoneNumber = phoneNumber.slice(0,-1);
}
function clearNumber() {
    phoneNumber = "";
}
function printPhoneNumber() {
    phoneScreen.val(phoneNumber);
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>


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

  <style>
  </style>
</head>
<body>
<input type="number" id="phone" placeholder="(123) 45-7" min="0" step="1"/>

<input type="number" id="phone2" placeholder="(123) 45-7" min="0" step="1"/>

<form action="#" method="post" id="form">
<button type="button" class="rightside__pad-btn number" value="1">1</button>
<button type="button" type="button" class="rightside__pad-btn number" value="2">2</button>
<button type="button" type="button" class="rightside__pad-btn number" value="3">3</button>
<br />
<button type="button" type="button" class="rightside__pad-btn number" value="4">4</button>
<button type="button" type="button" class="rightside__pad-btn number" value="5">5</button>
<button type="button" type="button" class="rightside__pad-btn number" value="6">6</button>
<br />
<button type="button" type="button" class="rightside__pad-btn number" value="7">7</button>
<button type="button" type="button" class="rightside__pad-btn number" value="8">8</button>
<button type="button" type="button" class="rightside__pad-btn number" value="9">9</button>
<br />
<button type="button" id="del" class="rightside__pad-btn del">
</button>
<button type="button" class="rightside__pad-btn number" value="0">0</button>
<button type="button" id="dial" class="rightside__pad-btn" value="">
</button>
    
    
    </form>

  
</body>
</html>

Upvotes: 1

Jins Thomas Shaji
Jins Thomas Shaji

Reputation: 877

Try with the below code:

var activeElement = '';
var phoneNumber = '';

var phoneScreen = $("#phone"); 
phoneScreen.focusin(function() {
 console.log('phoneScreen');
 phoneNumber = phoneScreen.val();
 activeElement = phoneScreen;
});

var phoneScreen2 = $("#phone2"); 
phoneScreen2.focusin(function() {
 console.log('phoneScreen2');
 phoneNumber = phoneScreen2.val();
 activeElement = phoneScreen2;
});

var delBtn = $("#del"); var clrBtn = $("#clr");
var numBtn = $(".number");

numBtn.click(function() {
  var number = $(this).val();
  updatePhoneNumber(number);
  printPhoneNumber();
});
delBtn.click(function() {
    deleteNumber();
  printPhoneNumber();
});
clrBtn.click(function() {
  clearNumber();
  printPhoneNumber();
});

function updatePhoneNumber(newNumber) {
    phoneNumber = phoneNumber + newNumber;
}
function deleteNumber() {
    phoneNumber = phoneNumber.slice(0,-1);
}
function clearNumber() {
    phoneNumber = "";
}
function printPhoneNumber() {
    activeElement.val(phoneNumber);
    activeElement.focus();
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>


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

  <style>
  </style>
</head>
<body>
<input type="number" id="phone" placeholder="(123) 45-7" min="0" step="1"/>

<input type="number" id="phone2" placeholder="(123) 45-7" min="0" step="1"/>

<form action="#" method="post" id="form">
<button type="button" class="rightside__pad-btn number" value="1">1</button>
<button type="button" type="button" class="rightside__pad-btn number" value="2">2</button>
<button type="button" type="button" class="rightside__pad-btn number" value="3">3</button>
<br />
<button type="button" type="button" class="rightside__pad-btn number" value="4">4</button>
<button type="button" type="button" class="rightside__pad-btn number" value="5">5</button>
<button type="button" type="button" class="rightside__pad-btn number" value="6">6</button>
<br />
<button type="button" type="button" class="rightside__pad-btn number" value="7">7</button>
<button type="button" type="button" class="rightside__pad-btn number" value="8">8</button>
<button type="button" type="button" class="rightside__pad-btn number" value="9">9</button>
<br />
<button type="button" id="del" class="rightside__pad-btn del">
</button>
<button type="button" class="rightside__pad-btn number" value="0">0</button>
<button type="button" id="dial" class="rightside__pad-btn" value="">
</button>
    
    
    </form>

  
</body>
</html>

Upvotes: 1

Related Questions