Send data from input to custom.js and make calculations on the basis of input in custom.js file

Question

Send data from input to custom.js and make calculations on the basis of input in custom.js file & send value of sum from custom.js to create.blade.js

create.blade.php

<div class="form-group col-md-4">                           
<label for="amount_received">Amount Received</label>
<input type="text" class="form-control" name="p_amount_received" 
id="p_amount_received" oninput="myfunction()" placeholder="Enter Amount 
Received" required="">  
</div>

get p_amount_received in custom.js by id

custom.js

function myFunction() {
  var x = document.getElementById("p_amount.received").value;
  var sum=x+10;
}

create.blade.php

<p></p>    

how i get back sum in

create.blade.php

Answer 1

You can load the custom.js using script tag in header or alike in create.blade.php and use onchange even to call the myFunction like,

<input type="text" class="form-control" name="p_amount_received" 
id="p_amount_received" onChange="myFunction()" placeholder="Enter Amount 
Received" required="">
<label id='p_sum_display'>Sum</label>
<input type="hidden"  name="p_sum" id="p_sum" > 

create sum as input for submitting to server and sum as display label for ui display and populate values in through myFunctions like,

function myFunction() {
  var x = document.getElementById("p_amount_received").value;
  var sum=x+10;
  document.getElementById("p_sum").value = sum  //for submit to server
  document.getElementById("p_sum_display").innerHTML = sum // to display to user on ui
}