How to change value inside textfield HTML - javascript

How can I change the value inside my Revenue textfield by subtracting the Cost of Good value from the Sales Price value? I have attached an image of what it looks like currently, but I want to change whats displayed inside my Revenue field after I edit the previous 2 text fields. I have also attached my code.
See attached image
<div class="product-section">
<h3>
<b>{{ product.productLabel }}</b>
</h3>
<label for="sales-price">Sales Price: </label>
<br>
<input
type="text"
[(ngModel)]="product.salesPrice"
name="sales-label"
placeholder="Enter Sales Price"
/>
<p></p>
<label for="cogs">Cost of Good: </label>
<br>
<input
type="text"
[(ngModel)]="product.cogs"
name="cogs-label"
placeholder="Enter Cogs"
/>
<p></p>
<label for="rev">Revenue: </label>
<br>
<input
type="text"
[(ngModel)]="product.rev"
name="rev-label"
readonly
/>
</div>

Add (keyup)="getRev()" to your Sales Price and Cost of Goods inputs.
<div class="product-section">
<h3>
<b>{{ product.productLabel }}</b>
</h3>
<label for="sales-price">Sales Price: </label>
<br>
<input
type="text"
[(ngModel)]="product.salesPrice"
(keyup)="getRev()"
name="sales-label"
placeholder="Enter Sales Price"
/>
<p></p>
<label for="cogs">Cost of Good: </label>
<br>
<input
type="text"
[(ngModel)]="product.cogs"
(keyup)="getRev()"
name="cogs-label"
placeholder="Enter Cogs"
/>
<p></p>
<label for="rev">Revenue: </label>
<br>
<input
type="text"
[(ngModel)]="product.rev"
name="rev-label"
readonly
/>
</div>
Then add a function to your component's typescript file to handle the revenue calculation.
getRev() {
this.product.rev = this.product.cogs - this.product.salesPrice;
}

Can you post the body of getRev()? And, take the quotes away from getRev() so that it calls the function instead of sets the value as the literal string 'getRev()'
Edit:
Is there a way to just subtract the cogs value from my sales value?
Yes, you could use an onchange handler. Here is an example, assuming you set the ID of the three elements as 'cogs', 'sales', and 'revs':
const cogs = document.getElementById('cogs');
const sales = document.getElementById('sales');
const revs = document.getElementById('revs');
cogs.addEventListener('input', (event) => {
const salesNumber = Number(sales.value);
const cogsNumber = Number(cogs.value);
const difference = salesNumber - cogsNumber;
revs.value = difference;
});

Related

Show form fields only if the value of another field is X

I am looking to show form fields only if the user inputs a specific value in a different field. Specifically, I am asking users to input the number of children they have. If the user inputs 1, then a set of fields will appear for the user to add additional information on their child. If the user inputs 2, then 2 sets of fields will appear, one per child. From a JS perspective, I am looking to hide the field sets based on the response.
This is my HTML:
Form field based on which the JS should be based on:
<html>
<div class="_form_element _field10 _full_width ">
<label for="field[10]" class="_form-label">
How many children do you have? <span style="color: #eb636d;">*</span>
</label>
<div class="_field-wrapper">
<input type="text" id="field[10]" name="field[10]" value="" placeholder="" required />
</div>
</div>
</html>
Field set to appear based on value entered in the field above:
<html>
<div id=1 class="child_1">
<div class="_form_element _field51 _full_width " >
<label for="field[51]" class="_form-label">
First child's name
</label>
<div class="_field-wrapper">
<input type="text" id="field[51]" name="field[51]" value="" placeholder="" />
</div>
</div>
<div class="_form_element _field55 _full_width " >
<label for="field[55]" class="_form-label">
First child's birthdate
</label>
<div class="_field-wrapper">
<input type="date" class="date_field" id="field[55]" name="field[55]" value="" placeholder="" />
</div>
</div>
</div>
</html>
Thanks

How to limit the input based on the value of another input using javascript

Html:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-2">
Paid Balance</strong>: <input type="text" name="paidbalance" id="paidbalance" class="form-control" />
</div>
<div class="col-md-2" >
Balance</strong>: <input type="text" name="balance" id="balance" class="form-control" value="200" readonly/>
</div>
Hello, Can anyone help me with this problem. How to limit the input based on the value of another input using javascript .
For Example the Value of Balance Input is 200 so that the possible input in PaidBalance is within 0-200 only.
Sorry, I'm just a student. Thanks :):)
Something like this?
$("#paidbalance").keyup(()=>{
const balance = parseFloat($("#balance").val())
const paidBalance = parseFloat($("#paidbalance").val())
if( paidBalance > balance)
$("#paidbalance").val(balance)
else if(paidBalance < 0)
$("#paidbalance").val(0)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Paid Balance
</strong>: <input type="text" name="paidbalance" id="paidbalance" class="form-control" />
Balance
</strong>: <input type="text" name="balance" id="balance" class="form-control" value="200" readonly/>
This is with pure javascript without jquery. Also, note that the accepted answer doesn't work if user paste some value with mouse right-click: paste option.
function f1()
{
var max = Number(document.getElementById("balance").value);
var paid = document.getElementById("paidbalance");
var v = Number(paid.value);
//if(isNaN(v)) {...} //input is not a number
if(v>max) {
paid.focus(); //to keep focus on input
paid.value=max; //you may comment out this line to don't override value
}
}
<div class="col-md-2">
Paid Balance</strong>: <input type="text" name="paidbalance" id="paidbalance" class="form-control" oninput="f1()" />
</div>
<div class="col-md-2" >
Balance</strong>: <input type="text" name="balance" id="balance" class="form-control" value="200" />
</div>
You might wanna change the type to number in this case and add max property in input. If the value of balance Input is different every time. You might considering assign it to a variable and pass it to the max property
Paid Balance</strong>:
<input type="number" name="paidbalance" id="paidbalance" max="200" class="form-control" />
Change the input to type="number" and add jQuery like this:
var balance = $('#balance')
var paidBalance = $('#paidbalance')
paidBalance[0].setAttribute('max', balance.val())
Example:
https://jsfiddle.net/Daniel_Knights/t4hb0z7p/8/

Javascript Functions/ innerHTML

So I'm trying to create a function that when the user clicks on a button or whereever I use the onclick method my problem is I have zero IDEA why my function won't work. I'm like 90% sure it worked yesterday and all I did was turn on my macbook......So I can get document.........innerHTML to work abstractly or in a void....but when I added it to this function it stopped working....I'm sure I did something I'm just not sure what.
const insurances = ["amica", "travelers","national general","infinity","cincinatti"];
Honestly the only thing I can think that I changed was I made the insurance array a const instead of defining that inside the function but I can't imagine that's my issue.
function cashBack1() {
var amount=1;
var statement = "Congratulations you just qualified for up to!! $";
var insurance= document.getElementById('insurance').value;
insurance = insurance.toLowerCase;
amount = !insurances.includes(insurance) ? "$200" : "$300";
alert("");
document.getElementById('lilDiv').innerHTML = statement + amount;
}
My second problem is I can't get my and or statements right.....if you notice
amount = !insurances.includes(insurance)? "200" :"$300";
I'm attempting to get it to an if statement but I started following vs code's suggestions lol. Here's the original version of the function
function cashBack() {
var amount=1;
var statement = "Congratulations you just qualified for up to!! $";
var insurance= document.getElementById('insurance').value;
insurance = insurance.toLowerCase;
if(!insurances.includes(insurance)){
amount = "$200";
}else {
amount = "$300";
}
alert("");//I added this alert just to see if it's making down to this part of the code..
// It's not......
document.getElementById("lilDiv").innerHTML = statement + amount;
}
So I guess in conclusion this is a double part question. I need help in properly forming my if statement so I can get it to check if the user entered on of the target companies and they receive 300 cash back shown in an empty div.....if it isn't it should state that they receive 200 cash back. Help!
THANKS IN ADVANCE
Here's the HTML This isn't a real project I'm just going through a textbook trying to learn the language before I take the class next..currently i'm only in a basic web development course on HTML-5 and CSS, so forgive me
<body>
<div id="top1" class="flex-box-container-1">
<header>
<h1>CASH BACK GLASS</h1>
</header>
</div>
<div id="main1" class="flex-box-container-1" >
<div class="col-3" >
<nav id="key"> <!--it's better to create function to change color then to
keep typing it-->
<li><a href="javascript:void(0)" onclick="getOne();">Get A
Windshield</a></li>
<li><a href="javascript:void(0)" id="getSome"
onmouseout="changeBlue('getSome')" onmouseover="changeRed('getSome');"
onclick="offerHelp();" >Get Some Help</a> </li>
<li> Leave A Message </li>
</nav>
<button id = "button2" onclick = "changeFont();" class="btn-
block">Enlarge Doc Text</button>
<button id="button1" onclick="makeBig();" onblur="makeSmall();" class="btn-outline-dark">Enlarge Nav</button>
<button id="button2" onclick="addList();" class="btn-outline-primary">Do This</button>
</div>
<div class="flex-box-container-1">
<img src="windshield.jpeg" id="photos" onmouseover="changePic('photos','money.jpeg');" onmouseout="changePic('photos', 'windshield.jpeg');">
</div>
<div class="flex-box-container-1" id="info" >
<form onsubmit="msg();">
<h3>Enter Your Contact Info</h3>
<label for = "fName">First:</label>
<input id="fName" type="text" onmouseover="this.style.background='red';" onmouseout="this.style.background='white';" onclick="this.style.background='yellow';" onblur="this.style.background='white';" required>
<br>
<label for = "lName">Last:</label>
<input id = "lName" type = "text" onmouseover="this.style.background='red';" onmouseout="this.style.background='white';" onclick="this.style.background='yellow';" onblur="this.style.background='white';" required>
<br>
<label for = "phone">Cell:</label>
<input id = "phone" type="tel" onmouseover="this.style.background='red';" onmouseout="this.style.background='white';" onclick="this.style.background='yellow';" onblur="this.style.background='white';" required>
<br>
<label for="insurance">Insurance:</label>
<input type="text" list="bigPay" id="insurance" onmouseover="this.style.background='red';" onmouseout="this.style.background='white';" onclick="this.style.background='yellow';" onblur="this.style.background='white';" name="insurance">
<datalist id="bigPay">
<option value="Amica">Amica</option>
<option value="Travelers">Travelers</option>
<option value="Nation General">Nation General</option>
<option value="Nationwide Private Client">Nationwide Private Client</option>
<option value="Infinity">Infinity</option>
<option value="Cincinatti">Cincinatti</option>
</datalist>
<br>
<fieldset>
<legend>Appointment date</legend>
<label for = "date">When?</label>
<input id = "date" type="date" onmouseover="this.style.background='red';" onmouseout="this.style.background='white';" onclick="this.style.background='yellow';" onblur="this.style.background='white';" required>
<label for = "time">Time?</label>
<input id="time" type="time" onmouseover="this.style.background='red';" onmouseout="this.style.background='white';" onclick="this.style.background='yellow';" onblur="this.style.background='white';" required>
<label for = "address">Where?</label>
<input id="address" type="text" onmouseover="this.style.background='red';" onmouseout="this.style.background='white';" onclick="this.style.background='yellow';" onblur="this.style.background='white';" required>
<br>
<label for = "zip">Zip?</label>
<input id="zip" type="text" onmouseover="this.style.background='red';" onmouseout="this.style.background='white';" onblur="fillCity();" onclick="this.style.background='white';" required>
<label for = "city">City?</label>
<input id=city type="text">
</fieldset>
<input type="submit" name="submit" id="submit" value="submit">
</form>
</div>
</div>
<div id = "bottom" class="flex-box-container-1">
<div class="col-2">
<label id="labelB" for="textA">Leave A Message</label>
<textarea id="textA" onmouseout="this.style.background='white';" onmouseover="this.style.background='purple';" onblur="this.style.background='white';" onclick="cashBack();" name="textA" size="60" rows="4";></textarea>
</div>
</div>
<!--Perhaps my favorite thing is making things appear -->
<div class="flex-box-container-1" id="lilDiv">
</div>
<div id="para1" class="flex-box-container-1">
<p id="para2">I know it's hard to find an autoglass company you can trust to install your windshield in a professional and responsable manner.
here at <strong>Cash Back Glass</strong> we strive to match you with a top Auto Glass Company who pays you top dollar to replace <em>Your</em>
windshield. We schedule mobile appointments at your home or place of business. Our Techs have years of experience and each shop that
we do business with has been in business for a minimum of 5 years.
</p>
</div>
<div>
</div>
<div>
</div>
<script src="javascript.js"> </script>
</body>
</html>

how to get set of input boxes values using getElemntById?

I have set of input boxes to add names and designaions.and iwant to print those in a <p> tag when user click print button. how to proceed.
<div class="form-group">
<label for="inputRegNo" >Name & Designation<span style="color:#c0392b;padding-left:5px;">*</span></label>
<div class="form-group">
<input required type="text" name="fname[]" class="fname" onkeyUp="document.getElementById('refa5').innerHTML = this.value" placeholder="Name" />
<input required type="text" name="lname[]" placeholder="Designation" />
</div>
</div>
<div class="form-group">
<label for="inputRegNo" ></label>
<div class="form-group">
<input type="text" name="fname[]" placeholder="Name" class="fname" onkeyUp="document.getElementById('refa5').innerHTML = this.value" />
<input type="text" name="lname[]" placeholder="Designation" />
</div>
</div>
print
<div>
<label>Name & Designation</label>
<p id="refa5"> - </p>
</div>
its looks you are new in javascript.. it's simple give the name to all the input field like
<input type="text/checkbox" name="txtName">
and in javascript you can access this field value by
<script type="text/javascript">
var name = document.getElementsByName("txtName");
</script>
if you wish to print the element on button click simply specify their click event on javascript like
function onClick() {
alert("helo from click function");
}
and then on button ..
<input type="button" onclick="onClick()">
w3schools is a great resource for this. Here is some example code on how to do this :
<button onclick="myFunction()">Click me</button>
<input id="inputID"></input>
<p id="demo"></p>
<script>
function myFunction() {
var inputID = document.getElementById("inputID").value;
document.getElementById("demo").innerHTML = inputID;
}
</script>
What the code above does is it takes the value of an input, then it sets the innerHTML of a <p> element to it. You can obviously do this with other things like <h1> elements as well.

JavaScript - set form input attribute in 'for' loop

This is my first real-world JavaScript project. Please be kind...
I'm creating a form with required fields. With JavaScript, I am collecting the required fields as objects in an Array, each object having the properties "object" (the HTML objects themselves, from which I can get object.id and object.value) "description" (to display to users) and "error" (the HTML objects beneath each input field where corresponding validation errors appear).
Then I have a function (to be used onBlur, for instant feedback) that checks to see if the value of the field is null, and if so, it displays the validation error beneath the corresponding field.
I'm trying to set the onblur attribute for each input field using a FOR loop that runs through the array of required fields. I have a setAttribute statement that works perfectly if I create an individual statement for each object in the Array, individually. But as soon as I change it to a FOR loop, the onblur event for ANY field pops up the validation error for the FIRST input field, only. This has got to be a freshman mistake, but I've searched high and low and rewritten this thing ten different ways and can't make it work with a loop...
I put my code in a Fiddle so you can see it -- but it doesn't actually work in the fiddle, only in my local dev environment (maybe that indicates another problem?). Here's the code:
//create array with constructor to identify all required fields
var allRequired = [];
function RequiredField(theID, theDescription) {
this.object = document.getElementById(theID);
this.description = theDescription;
this.error = document.getElementById("error-" + theID);
allRequired.push(this);
}
var fieldFname = new RequiredField("fname", "First Name");
var fieldLname = new RequiredField("lname", "Last Name");
var fieldEmail = new RequiredField("email", "Email");
var fieldPhone = new RequiredField("phone", "Phone");
var fieldRole = new RequiredField("role", "Desired Role");
var fieldPortfolio = new RequiredField("portfolio", "Portfolio/Website URL");
function requireField(theDescription, theValue, theError) {
if (theValue === "") {
theError.innerHTML = "<p>" + theDescription + " is required.</p>";
} else {
theError.innerHTML = "";
}
} //end function
for (i = 0; i < allRequired.length; i++) {
allRequired[i].object.setAttribute("onBlur", "requireField(allRequired[i].description, allRequired[i].object.value, allRequired[i].error);");
}
/* THIS WORKS IN MY LOCAL DEV ENVIRONMENT...
allRequired[0].object.setAttribute("onBlur", "requireField(allRequired[0].description, allRequired[0].object.value, allRequired[0].error);");
allRequired[1].object.setAttribute("onBlur", "requireField(allRequired[1].description, allRequired[1].object.value, allRequired[1].error);");
allRequired[2].object.setAttribute("onBlur", "requireField(allRequired[2].description, allRequired[2].object.value, allRequired[2].error);");
allRequired[3].object.setAttribute("onBlur", "requireField(allRequired[3].description, allRequired[3].object.value, allRequired[3].error);");
allRequired[4].object.setAttribute("onBlur", "requireField(allRequired[4].description, allRequired[4].object.value, allRequired[4].error);");
allRequired[5].object.setAttribute("onBlur", "requireField(allRequired[5].description, allRequired[5].object.value, allRequired[5].error);");
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form-careers" id="form-careers" action="form-process.php" enctype="multipart/form-data" onsubmit="return validateForm()" method="post">
<div class="form_labels">
<p>
<label for="fname">First Name:</label>
</p>
</div>
<div class="form_inputs">
<p>
<input type="text" name="fname" id="fname" required />
</p>
<div class="error" id="error-fname"></div>
</div>
<div class="form_labels">
<p>
<label for="lname">Last Name:</label>
</p>
</div>
<div class="form_inputs">
<p>
<input type="text" name="lname" id="lname" required />
</p>
<div class="error" id="error-lname"></div>
</div>
<div class="form_labels">
<p>
<label for="email">Email:</label>
</p>
</div>
<div class="form_inputs">
<p>
<input type="email" name="email" id="email" required />
</p>
<div class="error" id="error-email"></div>
</div>
<div class="form_labels">
<p>
<label for="phone">Phone:</label>
</p>
</div>
<div class="form_inputs">
<p>
<input type="tel" name="phone" id="phone" placeholder="###-###-####" pattern="\d{3}[\-]\d{3}[\-]\d{4}" required />
</p>
<div class="error" id="error-phone"></div>
</div>
<div class="form_labels">
<p>
<label for="role">Desired Role:</label>
</p>
</div>
<div class="form_inputs">
<p>
<input type="text" name="role" id="role" required />
</p>
<div class="error" id="error-role"></div>
</div>
<div class="form_labels">
<p>
<label for="portfolio">Portfolio/Website:</label>
</p>
</div>
<div class="form_inputs">
<p>
<input type="url" name="portfolio" id="portfolio" placeholder="http://" pattern="[a-z0-9.-]+\.[a-z]{2,63}$" required />
</p>
<div class="error" id="error-portfolio"></div>
</div>
<div class="clearboth"></div>
<input type="hidden" name="formtype" id="formtype" value="careers">
<div class="form_labels">
<p> </p>
</div>
<div class="form_inputs">
<a href="#">
<input type="submit" value="Submit" class="btn-red">
</a>
</div>
</form>
If someone would help point me in the right direction I would really appreciate it.
Code
for (i = 0; i < allRequired.length; i++) {
allRequired[i].object.setAttribute("onBlur", "requireField(allRequired[i].description, allRequired[i].object.value, allRequired[i].error);");
}
sets onblur event with value like requireField(allRequired[i].description.
So - what is it - i? No one knows.
Proper code is:
for (i = 0; i < allRequired.length; i++) {
allRequired[i].object.setAttribute("onBlur", "requireField(allRequired[" +i + "].description, allRequired[" + i + "].object.value, allRequired[" + i + "].error);");
}
See? I get real i value for each iteration.
As u_mulder said concat problem.
As for code I suggest to look up factory functions. It's more natural javascript then constructor.

Categories

Resources