Why python function doesn't works in the JS (using eel) - javascript

I know this issue has probably been dealt with before, however I can't find any proper workarounds to it.
I'm getting this message:
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
I also get other errors sometimes, like:
GET file:///C:/eel.js net::ERR_FILE_NOT_FOUND
when I running my main.py and index.html
here's the code:
JS
"use strict";
async function sendForm() {
alert(1);
// #region Input
let InputLinkBox = document.search.link;
let LinkVal = InputLinkBox.value;
let InputNumBox = document.search.num;
let NumVal = InputNumBox.value;
let InputNameBox = document.search.name;
let NameVal = InputNameBox.value;
let InputAressBox = document.search.adress;
let AdressVal = InputAressBox.value;
let InputTINBox = document.search.tin;
let TINVal = InputTINBox.value;
let InputGearboxBox = document.search.gearbox;
let GearboxVal = InputGearboxBox.value;
let InputContactBox = document.search.contact;
let ContactVal = InputContactBox.value;
let InputEmailBox = document.search.email;
let EmailVal = InputEmailBox.value;
let InputDirectorBox = document.search.director;
let DirectorVal = InputDirectorBox.value;
let InputDateBox = document.search.date;
let DateVal = InputDateBox.value;
let InputWarehouseBox = document.search.warehouse;
let WarehouseVal = InputWarehouseBox.value;
let PackVal;
let VATVal;
// #endregion
if (document.getElementById('packyes').checked) {
PackVal = document.getElementById('packyes').value;
}
else {
PackVal = document.getElementById('packno').value;
}
if (document.getElementById('vatyes').checked) {
VATVal = document.getElementById('vatyes').value;
}
else {
VATVal = document.getElementById('vatno').value;
}
let summ = await eel.summer_py(LinkVal, NumVal)();
alert(summ);
let ReturningMassive = [NumLink, NumVal, NameVal, AdressVal, TINVal, GearboxVal, ContactVal, EmailVal, DirectorVal, DateVal, WarehouseVal, PackVal, VATVal];
return ReturningMassive;
}
document.getElementById("Btn-send").onclick = sendForm;
Python
import eel
import os
eel.init(f'{os.path.dirname(os.path.realpath(__file__))}/web')
#eel.expose
def summer_py(a, b):
return a + b
eel.start('index.html')
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First Title</title>
<link href="style.css" rel="stylesheet">
<script type="text/javascript" src="/eel.js"></script>
</head>
<body bgcolor="#DCDCDC" text="2E2E2E">
<form name="search" action="#">
<div class="text-field">
<input class="text-field__input" type="text" name="link" id="input" autocomplete="off" placeholder="Link to the item">
<input class="text-field__input" type="text" name="num" id="input" autocomplete="off" placeholder="Number of item">
<input class="text-field__input" type="text" name="name" id="input" autocomplete="off" placeholder="Name of the company">
<input class="text-field__input" type="text" name="adress" id="input" autocomplete="off" placeholder="City, adress">
<input class="text-field__input" type="text" name="tin" id="input" autocomplete="off" placeholder="TIN(INN) of the company">
<input class="text-field__input" type="text" name="gearbox" id="input" autocomplete="off" placeholder="Gearbox(KPP) of the company">
<input class="text-field__input" type="text" name="contact" id="input" autocomplete="off" placeholder="Contact information">
<input class="text-field__input" type="text" name="email" id="input" autocomplete="off" placeholder="E-mail">
<input class="text-field__input" type="text" name="director" id="input" autocomplete="off" placeholder="Name of the director">
<input class="text-field__input" type="text" name="date" id="input" autocomplete="off" placeholder="Date">
<input class="text-field__input" type="text" name="warehouse" id="input" autocomplete="off" placeholder="Warehouse locatnion">
</div>
<fieldset>
<legend>is the cost of packaging and transport included?</legend>
<div>
<input type="radio" id="packyes" name="pack" value="true"
checked>
<label for="huey">Yes</label>
</div>
<div>
<input type="radio" id="packno" name="pack" value="false">
<label for="dewey">No</label>
</div>
</fieldset>
<fieldset>
<legend>is the cost of VAT included?</legend>
<div>
<input type="radio" id="vatyes" name="vat" value="true"
checked>
<label for="huey">Yes</label>
</div>
<div>
<input type="radio" id="vatno" name="vat" value="false">
<label for="dewey">No</label>
</div>
</fieldset>
<div class="text-field">
<button id="Btn-send" class="button blue">Send</button>
</div>
</form>
<script src="script.js"></script>
</body>
</html>
and I really confused 'cause it's looks ok...
Any help will be very appreciated in advance.

Related

Make the first form field of a group active onfocus of div

I'm not sure if I worded the title correctly to describe my issue.
I am constructing a custom phone number 'field' within a form on my website, which is actually composed of 10 individual fields (digits), all grouped within a particular div (Id=numberContainer).
Currently, I am using some script to force the cursor to start at the first field (Id=userPhone_digit-01), no matter which field within the group the user clicks on.
The code also advances the cursor to the next 'digit' after data is entered into each field.
The code seems to work fine for all of that so far.
However, I would like to expand or modify the code, to have the cursor also start on the first field (Id=userPhone_digit-01) when the user clicks anywhere at all within the entire div (Id=numberContainer) or any elements within the div.
I have experimented with several 'tweaks', including some 'onfocus' things. But so far, I can't seem to get anything to work.
I have included a very stripped down version of the form, containing only the 'phone number' field(s).
I also left the link to the CSS in the 'head' section'.
I left out my failed attempts at tweaking the code and left in only what is currently working.
If anyone has any suggestions, it would be greatly appreciated.
Thanks, Maddison
HTML
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="https://www.jamiesexton.com/css/forcefield3.css">
</head>
<body>
<div class="pageContainer">
<div class="blankSpace"></div>
<div class="formContainer">
<form id="requestForm" action="/formHandler.php" method="post" enctype="multipart/form-data">
<div class="center_Wrapper">
<div class="formHeader">- THE FORM -</div>
</div>
<div class="phoneNumber_Container">
<div class="left_Wrapper">
<div class="section_Header">Phone Number</div>
<button class="phoneReset_button" title="Reset"><img src="/images/refreshbutton.png"
width="20px" height="20px"></button>
</div>
<!-- //////////////////// Start 'numberContainer' Div //////////////////// -->
<div Id="numberContainer" class="phoneField_Wrapper">
<div class="leftSpace"><img
src="https://www.jamiesexton.com/images/smallflag.jpg" width="40px"
height="24px"></div>
<p class="plusOne">+1</p>
<p class="phoneNumber_Parentheses_Left">(</p>
<input type="number" id="userPhone_digit-01" name="userPhone_digit-01" class="phoneField"
minlength="1" maxlength="1" tabindex="2" required>
<input type="number" id="userPhone_digit-02" name="userPhone_digit-02" class="phoneField"
minlength="1" maxlength="1" tabindex="3" required>
<input type="number" id="userPhone_digit-03" name="userPhone_digit-03" class="phoneField"
minlength="1" maxlength="1" tabindex="4" required>
<p class="phoneNumber_Parentheses_Right">)</p>
<input type="number" id="userPhone_digit-04" name="userPhone_digit-04" class="phoneField4"
minlength="1" maxlength="1" tabindex="5" required>
<input type="number" id="userPhone_digit-05" name="userPhone_digit-05" class="phoneField"
minlength="1" maxlength="1" tabindex="6" required>
<input type="number" id="userPhone_digit-06" name="userPhone_digit-06" class="phoneField"
minlength="1" maxlength="1" tabindex="7" required>
<p class="phoneNumber_Dash">-</p>
<input type="number" id="userPhone_digit-07" name="userPhone_digit-07" class="phoneField"
minlength="1" maxlength="1" tabindex="8" required>
<input type="number" id="userPhone_digit-08" name="userPhone_digit-08" class="phoneField"
minlength="1" maxlength="1" tabindex="9" required>
<input type="number" id="userPhone_digit-09" name="userPhone_digit-09" class="phoneField"
minlength="1" maxlength="1" tabindex="10" required>
<input type="number" id="userPhone_digit-10" name="userPhone_digit-10" class="phoneField"
minlength="1" maxlength="1" tabindex="11" required>
<div class="rightSpace"></div>
</div>
<!-- //////////////////// End 'numberContainer' Div //////////////////// -->
</div>
<!-- Start Force-Field/Next-Field Script -->
<script>
const
forceField = document.querySelector('#requestForm')
, f_nums = [...forceField.querySelectorAll('#numberContainer input')]
;
forceField.oninput = e =>
{
if ( e.target.matches('#numberContainer input[maxlength="1"]')
&& e.target.value.length===1
){
let nextOneIndx = f_nums.findIndex(el=>el===e.target) +1;
if (nextOneIndx < f_nums.length)
{
f_nums[nextOneIndx].focus();
}
else
{
let nextTab = +e.target.getAttribute('tabindex') +1;
forceField.querySelector(`[tabindex="${nextTab}"]`).focus();
}
}
}
forceField.onclick = e =>
{
if ( e.target.matches('#numberContainer input[maxlength="1"]')
&& e.target.value.length===0
){
let freeOne = f_nums.find(el=>el.value===''); // find 1st input free
if (freeOne) freeOne.focus()
}
}
</script>
<!-- End Force-Field/Next-Field Script -->
<!-- Start Clear-Number-Fields Script -->
<script>
let btnClear = document.querySelector('button');
let inputs = document.querySelectorAll('.phoneField,.phoneField4');
btnClear.addEventListener('click', () => {
inputs.forEach(input => input.value = '');
});
</script>
<!-- End Clear-Number-Fields Script -->
<div class="submitButton_Container">
<div class="center_Wrapper" ><input type="submit" class="submit__button" value="Submit"></div>
</div>
</form>
</div>
</div>
</body>
</html>
Query the numberContainer so you add an onclick event listener. Then onclick get the closest numberContainer, just in case event target is a child of the numberContainer element, we can then query the first input element using the number container element like this e.target.closest('#numberContainer').querySelector('#userPhone_digit-01')
Then any time the user clicks anywhere on the number container element, the first input will focus.
const numCont = document.getElementById('numberContainer')
numCont.onclick = e => e.target.closest('#numberContainer').querySelector('#userPhone_digit-01').focus()
const forceField = document.querySelector('#requestForm'),
f_nums = [...forceField.querySelectorAll('#numberContainer input')];
const numCont = document.getElementById('numberContainer')
numCont.onclick = e => e.target.closest('#numberContainer').querySelector('#userPhone_digit-01').focus()
forceField.oninput = e => {
if (e.target.matches('#numberContainer input[maxlength="1"]') &&
e.target.value.length === 1
) {
let nextOneIndx = f_nums.findIndex(el => el === e.target) + 1;
if (nextOneIndx < f_nums.length) {
f_nums[nextOneIndx].focus();
} else {
let nextTab = +e.target.getAttribute('tabindex') + 1;
forceField.querySelector(`[tabindex="${nextTab}"]`).focus();
}
}
}
forceField.onclick = e => {
if (e.target.matches('#numberContainer input[maxlength="1"]') &&
e.target.value.length === 0
) {
let freeOne = f_nums.find(el => el.value === ''); // find 1st input free
if (freeOne) freeOne.focus()
}
}
let btnClear = document.querySelector('button');
let inputs = document.querySelectorAll('.phoneField,.phoneField4');
btnClear.addEventListener('click', () => {
inputs.forEach(input => input.value = '');
});
<link rel="stylesheet" href="https://www.jamiesexton.com/css/forcefield3.css">
<div class="pageContainer">
<div class="blankSpace"></div>
<div class="formContainer">
<form id="requestForm" action="/formHandler.php" method="post" enctype="multipart/form-data">
<div class="center_Wrapper">
<div class="formHeader">- THE FORM -</div>
</div>
<div class="phoneNumber_Container">
<div class="left_Wrapper">
<div class="section_Header">Phone Number</div>
<button class="phoneReset_button" title="Reset"><img src="/images/refreshbutton.png"
width="20px" height="20px"></button>
</div>
<!-- //////////////////// Start 'numberContainer' Div //////////////////// -->
<div id="numberContainer" class="phoneField_Wrapper">
<div class="leftSpace"><img src="https://www.jamiesexton.com/images/smallflag.jpg" width="40px" height="24px"></div>
<p class="plusOne">+1</p>
<p class="phoneNumber_Parentheses_Left">(</p>
<input type="number" id="userPhone_digit-01" name="userPhone_digit-01" class="phoneField" minlength="1" maxlength="1" tabindex="2" required>
<input type="number" id="userPhone_digit-02" name="userPhone_digit-02" class="phoneField" minlength="1" maxlength="1" tabindex="3" required>
<input type="number" id="userPhone_digit-03" name="userPhone_digit-03" class="phoneField" minlength="1" maxlength="1" tabindex="4" required>
<p class="phoneNumber_Parentheses_Right">)</p>
<input type="number" id="userPhone_digit-04" name="userPhone_digit-04" class="phoneField4" minlength="1" maxlength="1" tabindex="5" required>
<input type="number" id="userPhone_digit-05" name="userPhone_digit-05" class="phoneField" minlength="1" maxlength="1" tabindex="6" required>
<input type="number" id="userPhone_digit-06" name="userPhone_digit-06" class="phoneField" minlength="1" maxlength="1" tabindex="7" required>
<p class="phoneNumber_Dash">-</p>
<input type="number" id="userPhone_digit-07" name="userPhone_digit-07" class="phoneField" minlength="1" maxlength="1" tabindex="8" required>
<input type="number" id="userPhone_digit-08" name="userPhone_digit-08" class="phoneField" minlength="1" maxlength="1" tabindex="9" required>
<input type="number" id="userPhone_digit-09" name="userPhone_digit-09" class="phoneField" minlength="1" maxlength="1" tabindex="10" required>
<input type="number" id="userPhone_digit-10" name="userPhone_digit-10" class="phoneField" minlength="1" maxlength="1" tabindex="11" required>
<div class="rightSpace"></div>
</div>
<!-- //////////////////// End 'numberContainer' Div //////////////////// -->
</div>
<div class="submitButton_Container">
<div class="center_Wrapper"><input type="submit" class="submit__button" value="Submit"></div>
</div>
</form>
</div>
</div>

How can I set the value in a textbox on form load?

This is what I tried for setting the textbox values but it doesn't seem to be working. I want the textboxes to have the values in them when the page loads. the function is within the script tag.
function setMSRP()
{
var MSRP = "$29,120.00";
var destinationCharge = "$875.00";
var rebate = "-$10,000.00";
var taxes = "6%"
var titlesAndFees = "$209.00";
document.getElementById("txtMSRP").value = MSRP;
document.getElementById("txtDestinationCharge").value = destinationCharge;
document.getElementById("txtRebates").value = rebate;
document.getElementById("txtTaxes").value = taxes;
document.getElementById("txtElectricTitleAndFees").value = titlesAndFees;
}
</script>
</head>
<body onload="setMSRP()">
<form>
<h1>Calculate Focus Price</h1>
<hr/>
<label for="txtMSRP">MSRP:</label>
<input autofocus id="txtMSRP" type="text" readonly="readonly"/>
<br/>
<label for="txtDestinationCharge">Destination Charge:</label>
<input type="text" id="txtDestinationCharge" readonly="readonly"/>
<br/>
<label for="txtRebates">Rebates:</label>
<input type="text" id="txtRebates" readonly="readonly"/>
<br/>
<label for="txtTaxes">Taxes:</label>
<input type="text" id="txtTaxes" readonly="readonly"/>
<br/>
<label for="txtElectricTitleAndFees">Electric Title and Fees:</label>
<input type="text" id="txtElectricTitleAndFees" readonly="readonly"/>
<br/>
<input type="button" id="btnCalculateTotal" onclick="calcTotal()"
</form>
</body>
You have some syntax errors in code. Look at the modified example below:
<html>
<head>
<script>
function setMSRP() {
var MSRP = "$29,120.00";
var destinationCharge = "$875.00";
var rebate = "-$10,000.00";
var taxes = "6%"
var titlesAndFees = "$209.00";
document.getElementById("txtMSRP").value = MSRP;
document.getElementById("txtDestinationCharge").value = destinationCharge;
document.getElementById("txtRebates").value = rebate;
document.getElementById("txtTaxes").value = taxes;
document.getElementById("txtElectricTitleAndFees").value = titlesAndFees;
}
</script>
</head>
<body onload="setMSRP()">
<form>
<h1>Calculate Focus Price</h1>
<hr/>
<label for="txtMSRP">MSRP:</label>
<input autofocus id="txtMSRP" type="text" readonly="readonly" />
<br/>
<label for="txtDestinationCharge">Destination Charge:</label>
<input type="text" id="txtDestinationCharge" readonly="readonly" />
<br/>
<label for="txtRebates">Rebates:</label>
<input type="text" id="txtRebates" readonly="readonly" />
<br/>
<label for="txtTaxes">Taxes:</label>
<input type="text" id="txtTaxes" readonly="readonly" />
<br/>
<label for="txtElectricTitleAndFees">Electric Title and Fees:</label>
<input type="text" id="txtElectricTitleAndFees" readonly="readonly" />
<br/>
<input type="button" id="btnCalculateTotal" onclick="calcTotal()">
</form>
</body>
</html>
I want the textboxes to have the values in them when the page loads.
You don't need JS for this:
<input id="txtMSRP" type="text" value="<your_value>" />
If you wanted placeholders inside the input[type=text], simply use
var textbox = document.querySelector("#textbox");
textbox.setAttribute("placeholder", "This is the Placeholder");
Or use the HTML Attribute to set the value/placeholder:
<input type="text" id="textbox" value="Hello" placeholder="Introductory Statement" />

Javascript - Object reference returning null even though it shoudn't

I've got this:
var strBox = document.getElementById("txtSTR");
var strModBox = document.getElementById("txtSTRMod");
var refBox = document.getElementById("txtREF");
var refModBox = document.getElementById("txtREFMod");
var fortBox = document.getElementById("txtFOR");
var forModBox = document.getElementById("txtFORMod");
var intBox = document.getElementById("txtINT");
var intModBox = document.getElementById("txtINTMod");
These vars all point to text boxes (read only) in my HTML document.
They rely on populating their .value with the following array:
//0-STR, 1-REF, 2-FOR, 3-INT, 4-JUD, 5-CHA, 6-WIL, 7-TOU
var charAttsAR = ["8","8","8","8","8","8","8","8"];
They are populated with the relevant array entry manually from a function called popDefDat() like this:
strBox.value = charAttsAR[0];
strModBox.value = modSetter(charAttsAR[0]);
refBox.value = charAttsAR[1];
refModBox.value = modSetter(charAttsAR[1]);
fortBox.value = charAttsAR[2];
forModBox.value = modSetter(charAttsAR[2]);
intBox.value = charAttsAR[3];
intModBox.value = modSetter(charAttsAR[3]);
....and so on
My issue is that strBox, strModBox, refBox and refModBox all initialise their data fine. However, at fortBox, it throws "fortBox is null" and I have no idea why. The code is identical, I have my script loaded just before the end of my tag and I also have:
//initialise default data when page loads
window.onload = popDefDat()
Honestly, I'm stuck. Any advice appreciated.
Here's the html too:
<form id="form3" name="form3" method="post" onsubmit="return false" action="">
<p><label></label>
<label for="lblHeadATT"></label>
<input name="lblHeadATT" type="text" disabled="disabled" id="lblHeadATT" value="Points" readonly="readonly" />
<label for="lbHeadMOD"></label>
<input name="lbHeadMOD" type="text" disabled="disabled" id="lbHeadMOD" value="Mod" readonly="readonly" />
<label for="txtPointBuy"></label>
<input name="txtPointBuy" type="text" id="txtPointBuy" readonly="readonly" />
<p>Strength:
<label for="txtSTR"></label>
<input name="txtSTR" type="text" id="txtSTR" readonly="readonly" />
<label for="txtSTRMod"></label>
<input name="txtSTRMod" type="text" id="txtSTRMod" readonly="readonly" />
<input type="button" name="Btn_StrMinus" id="Btn_StrMinus" value="-" onclick="FNCstrSub()" />
<input type="button" name="Btn_StrPlus" id="Btn_StrPlus" value="+" onclick="FNCstrPlus()"/>
<p>Reflex:
<label for="txtREF"></label>
<input name="txtREF" type="text" id="txtREF" readonly="readonly" />
<label for="txtREFMod"></label>
<input name="txtREFMod" type="text" id="txtREFMod" readonly="readonly" />
<input type="button" name="Btn_RefMinus" id="Btn_RefMinus" value="-" onclick="FNCrefSub()" />
<input type="button" name="Btn_RefPlus" id="Btn_RefPlus" value="+" onclick="FNCrefPlus()"/>
<p>Fortitude:
<label for="txtREF"></label>
<input name="txtFOR" type="text" id="txtREF" readonly="readonly" />
<label for="txtFORMod"></label>
<input name="txtFORMod" type="text" id="txtFORMod" readonly="readonly" />
<input type="button" name="Btn_ForMinus" id="Btn_ForMinus" value="-" onclick="FNCforSub()" />
<input type="button" name="Btn_ForPlus" id="Btn_ForPlus" value="+" onclick="FNCforPlus()"/>
</p>
<p>Intellect:
<label for="txtINT"></label>
<input name="txtINT" type="text" id="txtINT" readonly="readonly" />
<label for="txtINTMod"></label>
<input name="txtINTMod" type="text" id="txtINTMod" readonly="readonly" />
<input type="submit" name="Btn_IntMinus" id="Btn_IntMinus" value="-" onclick="FNCintSub()"/>
<input type="submit" name="Btn_IntPlus" id="Btn_IntPlus" value="+"onclick="FNCintPlus()" />
I've yet to write the tags for the other text boxes and buttons as I was hoping to solve this before carrying on.
Thanks

Calculation between two inputs and result in another

The script below works only for the first block when you enter the quantity.
Is there any way the function performs the calculation depending on the block in which the quantity is entered.
$(document).ready(function() {
$('.somente-numero').keyup(function (e) {
$(this).val($(this).val().replace(/[^0-9\.]/g,''));
var v1 = Number(document.getElementById("v1").value);
var v2 = Number(document.getElementById("v2").value);
var v7 = document.getElementById("v7").value = parseFloat(v1 * v2).toFixed(2);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- bloco 1 -->
<label>preço</label> <input type="text" class="somente-numero" name="produto_solicitado[0][valor_org]" id="v1" size="10" value="100.00"/>
<label>quantidade</label> <input type="text" class="somente-numero" name="produto_solicitado[0][quantidade]" id="v2" size="10"/>
<label>total</label> <input type="text" name="produto_solicitado[0][valor_total_prod]" id="v7" size="10" readonly />
<br>
<!-- bloco 2 -->
<label>preço</label> <input type="text" class="somente-numero" name="produto_solicitado[1][valor_org]" id="x1" size="10" value="200.00"/>
<label>quantidade</label> <input type="text" class="somente-numero" name="produto_solicitado[1][quantidade]" id="x2" size="10"/>
<label>total</label> <input type="text" name="produto_solicitado[1][valor_total_prod]" id="x7" size="10" readonly />
<!-- bloco 3 -->
.................
<!-- bloco n -->
Please update your code with this script.
$(document).ready(function () {
$('.somente-numero').keyup(function (e) {
var currentVal = $(this).val();
var replaceD = currentVal.replace(/[^0-9\.]/g, '');
$(this).val(replaceD);
var v1 = Number($(this).prev().prev().val());
var v2 = Number($(this).val());
var calculatedval = parseFloat(v1 * v2).toFixed(2);
$(this).next().next().val(calculatedval);
});
});
You can keep your common block under a common class (say, .bloco). Then just find the closest .bloco and find .input1, .input2, .input3.
$(document).ready(function() {
$('.somente-numero').keyup(function (e) {
$(this).val($(this).val().replace(/[^0-9\.]/g,''));
$elBloco = $(this).closest('.bloco');
var v1 = Number($elBloco.find('.input1').val());
var v2 = Number($elBloco.find('.input2').val());
var v7 = $elBloco.find('.input3').val(parseFloat(v1 * v2).toFixed(2));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- bloco 1 -->
<div class="bloco">
<label>preço</label> <input type="text" class="somente-numero input1" name="produto_solicitado[0][valor_org]" size="10" value="100.00"/>
<label>quantidade</label> <input type="text" class="somente-numero input2" name="produto_solicitado[0][quantidade]" size="10"/>
<label>total</label> <input type="text" class="input3" name="produto_solicitado[0][valor_total_prod]" size="10" readonly />
</div>
<br>
<!-- bloco 2 -->
<div class="bloco">
<label>preço</label> <input type="text" class="somente-numero input1" name="produto_solicitado[1][valor_org]" size="10" value="200.00"/>
<label>quantidade</label> <input type="text" class="somente-numero input2" name="produto_solicitado[1][quantidade]" size="10"/>
<label>total</label> <input type="text" class="input3" name="produto_solicitado[1][valor_total_prod]" size="10" readonly />
</div>
<!-- bloco 3 -->
.................
<!-- bloco n -->
Try this one, only javascript updated:
$(document).ready(function() {
$('.somente-numero').keyup(function (e) {
$(this).val($(this).val().replace(/[^0-9\.]/g,''));
var _id = $(this).attr('id');
var result = 1.0;
$('input[id^='+_id.charAt(0)+']').each(function(i, el){
if ($(el).val().length != 0){
result *= Number($(el).val());
}
});
result = parseFloat(result).toFixed(2);
$('#'+_id.charAt(0)+'7').val(result);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- bloco 1 -->
<label>preço</label> <input type="text" class="somente-numero" name="produto_solicitado[0][valor_org]" id="v1" size="10" value="100.00"/>
<label>quantidade</label> <input type="text" class="somente-numero" name="produto_solicitado[0][quantidade]" id="v2" size="10"/>
<label>total</label> <input type="text" name="produto_solicitado[0][valor_total_prod]" id="v7" size="10" readonly />
<br>
<!-- bloco 2 -->
<label>preço</label> <input type="text" class="somente-numero" name="produto_solicitado[1][valor_org]" id="x1" size="10" value="200.00"/>
<label>quantidade</label> <input type="text" class="somente-numero" name="produto_solicitado[1][quantidade]" id="x2" size="10"/>
<label>total</label> <input type="text" name="produto_solicitado[1][valor_total_prod]" id="x7" size="10" readonly />
<!-- bloco 3 -->
.................
<!-- bloco n -->

creating dynamic objects for text field string in angularjs

I have my view in angular js as follows,
<label class="control-label">Name:</label>
<input type="text" class="form-control" ng-model="config.name" />
<br />
<label class="control-label">versionSpecificApiConfig:</label>
<input type="text" class="form-control" ng-model="config.versionSpecificApiConfig" />
<br />
<label class="control-label">schemaUrl:</label>
<input type="text" class="form-control" ng-model="config.versionSpecificApiConfig.schemaUrl" />
<br />
I am doing this because I need to have config object structure as follows,
{
"name":"string",
"versionSpecificApiConfig":{
"string":{
"schemaUrl":"string"
}
}
}
but am getting error "cannot set property for string in versionSpecificApiConfig field". please help me creating structure like this.("string" in structure refers to the respective values of the particular textboxes).
Do you want something like this ?
var app= angular.module("app" , []);
app.controller('Ctrl', ['$scope', Ctrl]);
function Ctrl($scope){
$scope.config = {};
$scope.Print = function(){
console.log($scope.config);
}
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div ng-controller="Ctrl" ng-app="app">
<label class="control-label">Name:</label>
<input type="text" class="form-control" ng-model="config.name" />
<br />
<label class="control-label">versionSpecificApiConfig:</label>
<input type="text" class="form-control" ng-model="config.versionSpecificApiConfig.string.schemaUrl" />
<br />
<label class="control-label">schemaUrl:</label>
<input type="text" class="form-control" ng-model="config.versionSpecificApiConfig.string.schemaUrl1" />
<br />
<button type="button" ng-click="Print()">Click to see object</button>
<br/>
{{config}}
</div>
I have tried work around for this and its works perfect, Please try it and let us known.
<form ng-submit="func(config)">
<label class="control-label">Name:</label>
<input type="text" class="form-control" ng-model="config.name" />
<br />
<label class="control-label">versionSpecificApiConfig:</label>
<input type="text" class="form-control" ng-model="config.versionSpecificApiConfig" />
<br />
<label class="control-label">schemaUrl:</label>
<input type="text" class="form-control" ng-model="config.schemaUrl" />
<br />
<button type="submit"> Save </button>
</form>
$scope.func = function(Obj){
var keyObj = {};
var versionObj = {};
var data = {};
var key = Obj.versionSpecificApiConfig;
keyObj['schemaUrl'] = Obj.schemaUrl;
versionObj[Obj.versionSpecificApiConfig] = keyObj;
data['name'] = Obj.name;
data['versionSpecificApiConfig'] = versionObj;
console.log(data);
var Json = JSON.stringify(data);
console.log(Json);
}

Categories