I'm having trouble to append multiple inputs. I am reading a list with items and values and want to submit them over Javascript (POST), but I can't figure out why this doesn't want to work. I tried in several ways, finally I came up with this, but it doensn't want to iterate over it and throw an error:
var form = document.createElement("form");
form.action = "submitform.php";
form.method = "post";
form.target = "_blank";
input = [];
var kvarray = document.getElementsByClassName('ua_mattext');
for (var i = 0; i < kvarray.length; i++) {
var fieldname = kvarray[i].id;
var fieldvalue = kvarray[i].value;
input[i] = "input_" + i;
document.createElement(input[i]);
input[i].type = "hidden";
input[i].name = fieldname;
input[i].value = fieldvalue;
form.appendChild(input[i]);
}
document.body.appendChild(form);
form.submit();
What am I doing wrong?
I figured it out by myself. Firstly, I wasn't declaring the input variable properly (Forgot the "var " at the beginning)
Secondly, I wasn't setting the document.createElement() to the input.
Thirdly, I was naming the input input_1,input_2, which was invalid. There is only one, which is input.
So, now it's working. Below is the corrected code:
var form = document.createElement("form");
form.action = "submitform.php";
form.method = "post";
form.target = "_blank";
var input = [];
var kvarray = document.getElementsByClassName('ua_mattext');
for (var i = 0; i < kvarray.length; i++) {
var fieldname = kvarray[i].id;
var fieldvalue = kvarray[i].value;
input[i] = "input_" + i;
input[i] = document.createElement("input");
input[i].type = "hidden";
input[i].name = fieldname;
input[i].value = fieldvalue;
form.appendChild(input[i]);
}
document.body.appendChild(form);
form.submit();
When you say
input[i] = "input_" + i;
nothing about this line actually creates an input HTML element. Instead, you can do something like this
input[i] = <input type="hidden" name="${fieldname}" value="${fieldvalue}">
which would also have the added benefit of replacing the 3 lines following that one.
p.s: you should also declare input in the beginning by saying:
var input = []
p.p.s: You should check your assumptions as to what kvarray[i] is equal to. If you are doing kvarray[i].value in the subsequent line, I doubt that kvarray[i] is going to be a string, which is what you will need it to be in order to set the input's name attribute equal to it.
Related
i keep on trying to manipulate my codes i put something that will define the variable but still not working and having a hard time with the error "Cannot read property '0' of undefined"
Here's my code:
Ecwid.OnPageLoad.add(function(page) {
var x = "ecwid-BuyNow";
for (i = 0; i < x.length; i++) {
var container = document.getElementsByClassName("x")[0];
var t = document.createTextNode("\n\n");
container[i].appendChild(t);
var input = document.createElement('input');
input.type = "number";
input.placeholder = "Quantity";
input.min = "1";
input.name = "qtyAdd";
container[i].appendChild(input);
}
});
Assuming that you placed your javascript code after HTML code, your loop is invalid. You iterate over length of string x, not over elements with class ecwid-BuyNow. And you don't event call variable x, but you search for elements with class x.
BuyNowEcwid.OnPageLoad.add(function(page) {
var x = "ecwid-BuyNow";
var elements = document.getElementsByClassName(x);
for (var i = 0; i < elements.length; i++) {
var container = elements[i];
var t = document.createTextNode("\n\n");
container.appendChild(t);
var input = document.createElement('input');
input.type = "number";
input.placeholder = "Quantity";
input.min = "1";
input.name = "qtyAdd";
container.appendChild(input);
}
});
The on click event that I add to an input in javascript isn't working in the proper manner.
My code so far looks like so:
function order(option) {
if(option.checked) {
document.getElementId("col_order").value = document.getElementById("col_order").value + " " + option.value;
}
}
...//somewhere further down
for(var i = 0; i < options.length; i++) {
var check = document.createElement("input");
var label = document.createElement("label");
var description = document.createTextNode(options[i]);
check.type = "checkbox";
check.name = "order_list[]";
check.value = options[i];
check.onclick = "order(check)"; //Problem here
label.appendChild(check);
label.appendChild(description);
element.appendChild(label);
}
I have also tried:
check.onclick = (function() { var option = check; return function() {order(option);}})();
The problem that I am having is the check.onlick line of code. When I add this with normal HTML:
<input type = "checkbox" name = "order_list[]" onclick = "order(this)" value = "randVal">randVal</input>
I don't have any problem whatsoever; the method executes with the intended results. Any thoughts?
Let me clarify: I make it to the order function just fine, but I never get into the if statement, even though the checkbox was just clicked
Use addEventListener instead, and even if it looks like it should work, you're overwriting the same variables on each iteration as there is no closure in for loops, so I would probably add a closure to avoid issues.
For a checkbox you would listen for the change event, not click
for(var j = 0; j < options.length; j++) {
(function(i) {
var check = document.createElement("input");
var label = document.createElement("label");
var description = document.createTextNode(options[i]);
check.type = "checkbox";
check.name = "order_list[]";
check.value = options[i];
check.addEventListener('change', function() {
if (this.checked) {
var col_order = document.getElementById("col_order");
col_order.value = col_order.value + " " + this.value;
}
}, false);
label.appendChild(check);
label.appendChild(description);
element.appendChild(label);
})(j);
}
FIDDLE
check.onclick = "order(check)"; assigns a String as an on-click handler. That doesn't work; the browser expects a function there:
check.onclick = function() {
order(check);
}
I am trying to go through a select list with 200+ entries and click on each one. When an element is clicked on it executes a function selectCountry() which adds a line to a table. I want to have it create a table with every option selected. The page of interest is at: http://www.world-statistics.org/result.php?code=ST.INT.ARVL?name=International%20tourism,%20number%20of%20arrivals.
So far I have the following, but it doesn't seem to work:
var sel = document.getElementById('selcountry');
var opts = sel.options;
for(var opt, j = 0; opt = opts[j]; j++) {selectCountry(opt.value)}
I am trying to do this in the console in Chrome.
One of the most useful features of dev tools is that when you write the name of a function, you get back its source code. Here's the source code for the selectCountry function:
function selectCountry(select) {
if (select.value == "000") return;
var option = select.options[select.selectedIndex];
var ul = select.parentNode.getElementsByTagName('ul')[0];
var choices = ul.getElementsByTagName('input');
for (var i = 0; i < choices.length; i++)
if (choices[i].value == option.value) {
$("#selcountry:selected").removeAttr("selected");
$('#selcountry').val('[]');
return;
}
var li = document.createElement('li');
var input = document.createElement('input');
var text = document.createTextNode(option.firstChild.data);
input.type = 'hidden';
input.name = 'countries[]';
input.value = option.value;
li.appendChild(input);
li.appendChild(text);
li.onclick = delCountry;
ul.appendChild(li);
addCountry(option.firstChild.data, option.value);
$("#selcountry:selected").removeAttr("selected");
$('#selcountry').val('');
}
Your flaw is now obvious. selectCountry accepts the entire select element as an argument as opposed to the select's value (which is a terrible design but meh). Instead of passing the value of the element, change its index:
var sel = document.getElementById('selcountry');
var opts = sel.options;
for(var i = 0; i < opts.length; i++) {
sel.selectedIndex = i
selectCountry(sel)
}
i trie to generate dynamic Input fields with unique Ids but i stucked:
function addTxtBx(){
var txtBxHolder = document.getElementById('txtBoxHolder');
var newTxtBx = document.createElement('input');
newTxtBx.type = 'text';
var i=1;
//newTxtBx.id = document.getElementById("txtWaypoint"[i])
if(i<10){
newTxtBx.id = "txtWaypoint"+[i];
i++;
break;
}
txtBoxHolder.appendChild(newTxtBx);
}
i tried it with a for() but always got Id='name'9,
i know im an trainee. :)
I think so where you miss to loop it properly.
function addTextBox(ops) {
var no = document.getElementById('id1').value;
for (var i = 0; i < Number(no); i++) {
var text = document.createElement('input');
text.type = "text";
text.id = "txtWaypoint" + i; //id created dynamically
document.getElementById('divsection').appendChild(text);
}
}
Try it
I'm using a plugin for Wordpress called WP User Frontend. Basically it allows users to post from the front-end of the website.
There is a feature which allows users to add tags themselves, however, this is just a normal input text field, and I don't want them to create countless of new tags.
So basically what I want is for them to be able to click on several buttons which will add the tags to the input field, while also disabling their manual input.
You will need a script that converts the checkbox input into whatever format (say, a string of words separated by spaces) was needed for the original tags input. Here is an example script that would both insert the checkboxes to the page underneath the original input and put the resulting values into the original field, ensuring it gets posted the same way. (You could then hide the original field if you don't want it displayed.) http://jsfiddle.net/zLVTp/8/
var tags = ['cows', 'sheep', 'dogs'],
inp, label, ch = document.createElement('fieldset'),
f = document.getElementById('tagField');
// ^ The original input has id=tagField
f.readOnly = true;
for (var i = 0; i < tags.length; i++) {
inp = document.createElement('input');
label = document.createElement('label');
label.innerHTML = tags[i];
label.htmlFor = 'tag_' + tags[i];
inp.type = "checkbox";
inp.name = "tagSet";
inp.className = 'tagCBs';
inp.value = tags[i];
inp.id = 'tag_' + tags[i];
ch.appendChild(inp);
ch.appendChild(label);
inp.onchange = (function() {
var th = inp;
return function() {
var sp, r = [];
if (th.checked && f.value.indexOf(th.value) == -1) {
if (f.value == '') f.value = th.value;
else f.value += ' ' + th.value;
}
else if (!th.checked) {
sp = f.value.split(' ');
for (var j = 0; j < sp.length; j++) {
if (sp[j] != th.value) r.push(sp[j]);
}
f.value = r.join(' ');
}
}
})();
}
f.parentNode.appendChild(ch);
html checkbox seems to fit your need, no ? you have to modify the form and replace the text-area with checkbox (dirty but simple)