creating dynamic objects for text field string in angularjs - javascript

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);
}

Related

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

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.

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

Javascript Array value not defined

I'm trying to get a preview box update with form data when you click on a checkbox. But it doesn't work for array values.
Here's the code:
<script>
function FillPreview(f) {
if(f.update.checked == true) {
f.preview_name.value = f.post_title.value;
f.preview_description.value = f._ecp_custom_13.value;
f.preview_date.value = f.EventStartDate.value;
f.preview_venue_name.value = f.venue[Venue].value;
f.preview_venue_address.value = f.venue[Address].value;
f.preview_venue_city.value = f.venue[City].value;
f.preview_venue_state.value = f.venue[Province].value;
f.preview_phone.value = f.organizer[Phone].value;
f.preview_website.value = f.organizer[Website].value;
}
}
</script>
The following form HTML is just a summary. I'm actually using The Community Events Add-on to The Events Calendar plugin for Wordpress.
<form name="eventForm">
<input type="text" name="post_title" />
<input type="text" name="_ecp_custom_13" />
<input type="text" name="EventStartDate" />
<input type="text" name="venue[Venue]" />
<input type="text" name="venue[Address]" />
<input type="text" name="venue[City]" />
<input type="text" name="venue[Province]" />
<input type="text" name="venue[Zip]" />
<input type="text" name="organizer[Phone]" />
<input type="text" name="organizer[Website]" />
</form>
And the preview box HTML
<div id="preview">
<h2>Print Preview</h2>
<input type="text" class="preview-date" name="preview_date" />
<div class="preview-category" name="preview_category"></div>
<input type="text" class="preview-name" name="preview_name" />
<input type="text" class="preview-time" name="preview_time" />
<input type="text" class="preview-venue-name" name="preview_venue_name" />
<input type="text" class="preview-venue-address" name="preview_venue_address" />
<input type="text" class="preview-venue-city" name="preview_venue_city" />
<input type="text" class="preview-venue-state" name="preview_venue_state" />
<input type="text" class="preview-venue-zip" name="preview_venue_zip" />
<input type="text" class="preview-description" name="preview_description" />
<input type="text" class="preview-phone" name="preview_phone" />
<input type="text" class="preview-website" name="preview_website" />
</div>
<div>
<input type="checkbox" id="update" name="update" onclick="FillPreview(this.form)" />
</div>
My problem is that the array values are undefined while the other values (title, description, etc.) work just fine. Like I said before, the form code is actually from The Community Events Add-on to Wordpress's "The Events Calendar" plugin, so anybody who knows that plugin well will be more helpful.
I grabbed the javascript from this link. I tested that on my submit event page by itself and it worked just fine. As you can see I'm an absolute script kiddie. Any help would be greatly appreciated.

Get dynamic Class Names

For testing I have the alert, so the problem seem to be before the alert.
it throws errors at:
var firstPrevClass= "categClass"+PrevClass;
var newCategory = document.getElementsByClassName(firstPrevClass);
Uncaught TypeError: undefined is not a function
Basically in function addCategory I want to create dynamically new divs with different class names (which is creating dynamically).
After that I want to append the new category after the last category.
In function addField I want to put a new field at the category which selected from the selection box.
In function getClass I get the selected className so I can create a new field in the selected div.
How to do it?
/*add new category to SelextBox*/
function addCategory() {
var categoryValue = document.getElementById("newCateg").value;
var y = document.getElementById('selectCategory');
var option = document.createElement("option");
var hid = document.getElementById("nextValue").value;
var newClass = "categClass" + hid;
option.setAttribute("class", newClass);
option.value = categoryValue;
option.text = categoryValue;
y.add(option);
var PrevClass = hid-1 ;/*i do this to get the first previous class*/
var firstPrevClass= "categClass"+PrevClass;
alert(newClass);
var newCategory = document.getElementsByClassName(firstPrevClass);
var div = document.createElement('div');
div.setAttribute('class',newClass );
var a = document.createElement('a');
a.setAttribute('class', 'titles');
var input_checkC = document.createElement('input');
input_checkC.setAttribute('type', 'checkbox');
input_checkC.setAttribute('class', 'check');
var textNodeCateg = document.createTextNode(categoryValue);
div.appendChild(a);
div.appendChild(input_checkC);
div.appendChild(textNodeCateg);
var last = newCategory.length;
newCategory[last].appendChild(div);
document.getElementById("nextValue").value++;
alert(newClass);
}
function getClass(sel) {
var x =sel.options[sel.selectedIndex].className;
document.getElementById("submitSelection").value=x;
}
function addField() {
var val = document.getElementById("submitSelection").value;
var existedCategory = document.getElementsByClassName(val);
var fieldValue = document.getElementById("newField").value;
var div = document.createElement('div');
var input_check = document.createElement('input');
input_check.setAttribute('type', 'checkbox');
input_check.setAttribute('class', 'check');
var input = document.createElement('input');
input.setAttribute('type', 'text');
var br = document.createElement('br');
var textnode = document.createTextNode(fieldValue);
div.appendChild(input_check);
div.appendChild(textnode);
div.appendChild(input);
div.appendChild(br);
existedCategory.appendChild(div);
}
<ul>
<li>Προσθέστε το όνομα της νέας κατηγορίας</li>
<p>Ονομα Kατηγορίας:
<label>
<input type="text" id="newCateg" />
</label>
<input type="button" id="addCateg" value="Προσθήκη" onclick=" addCategory()" />
</p>
<p> </p>
<li>Επιλέξετε κατω απο ποια κατηγορία θα ανήκει το νεο πεδίο και εισάγεται το όνομα του νέου πεδίου.</li>
<p>Κατηγορία:</p>
<input type="hidden" value="4" id="nextValue" />
<input type="hidden" value="" id="submitSelection" />
<select id="selectCategory" onchange="getClass(this)">
<option>Επιλογή ...</option>
<option class="categClass1">Εξοδα Κατοικίας</option>
<option class="categClass2">Εξοδα Εκπαίδευσης</option>
<option class="categClass3">Εξοδα Ψηχαγωγίας</option>
</select>
<p>Ονομα πεδίου:
<label>
<input type="text" id="newField" />
<input type="button" value="Προσθήκη" onclick="addField()" />
<br />
</label>
</p>
<div class="class_1">
<p class="titles">
<input type="checkbox" class="catChk1 check" onchange="checkAll(subCheck1,subChks)" />Εξοδα Kατοικιας</p>
<div class="field">
<input type="checkbox" class="subCheck1 check" />Ενοίκιο
<input type="text" />
</br>
</div>
<div class="field">
<input type="checkbox" class="subCheck1 check" />Θέρμανση
<input type="text" />
</br>
</div>
<div class="field">
<input type="checkbox" class="subCheck1 check" />Διάφορα Yλικά
<input type="text" />
</br>
</div>
<div class="class_2">
<p class="titles">
<input type="checkbox" class="check" onchange="checkAll(this)" />Εξοδα Εκπαίδευσης παιδιού</p>
<div class="field">
<input type="checkbox" class="check" />Φροντιστήρια
<input type="text" />
</br>
</div>
<div class="field">
<input type="checkbox" class="check" />Βιβλία
<input type="text" />
</br>
</div>
<div class="field">
<input type="checkbox" class="check" />Σχολική Υλη
<input type="text" />
</br>
</div>
<div class="class_3">
<p class="titles">
<input type="checkbox" class="check chk" onchange="checkAll(this)" />Για Ψυχαγωγία</p>
<div class="field">
<input type="checkbox" class="check" />
<label>Θέατρο</label>
<input type="text" />
</br>
</div>
<div class="field">
<input type="checkbox" class="check" />
<label>Ψάρεμα</label>
<input type="text" />
</br>
</div>
<div class="field">
<input type="checkbox" class="check" />
<label>Γήπεδο</label>
<input type="text" />
</br>
</div>

Categories