I need to create a form with a few inputs when an event happens. My code is below.
Chrome submits fine - the alert box shows and the page changes.
Firefox does not work - the alert box shows but the page stays the same. How can I get Firefox to submit the form?
var idsInput = document.createElement('input');
idsInput.name = 'itemIds';
idsInput.value = ids;
var quantityInput = document.createElement('input');;
quantityInput.name = 'quantity';
quantityInput.value = 1;
var authTokenInput = document.createElement('input');
authTokenInput.name = 'authenticityToken';
authTokenInput.value = '${session.getAuthenticityToken()}';
var submitInput = document.createElement('input');
submitInput.type = 'submit';
submitInput.value = 'anything';
var form = document.createElement('form');;
form.action = '#{Checkout.setItemsQuantityHandler}';
form.method = 'POST';
form.elements[0] = idsInput;
form.elements[1] = quantityInput;
form.elements[2] = authTokenInput;
form.elements[3] = submitInput;
form.submit();
alert('after submit()'); // for debugging only
FF requires it to be in the DOM already. Set form to display:none and add it to an existing element in DOM and then submit it.
Try This...
var idsInput = document.createElement('input');
idsInput.name = 'itemIds';
idsInput.value = ids;
var quantityInput = document.createElement('input');
quantityInput.name = 'quantity';
quantityInput.value = 1;
var authTokenInput = document.createElement('input');
authTokenInput.name = 'authenticityToken';
authTokenInput.value = '${session.getAuthenticityToken()}';
var submitInput = document.createElement('input');
submitInput.type = 'submit';
submitInput.value = 'anything';
var form = document.createElement('form');
form.action = '#{Checkout.setItemsQuantityHandler}';
form.method = 'POST';
form.elements[0] = idsInput;
form.elements[1] = quantityInput;
form.elements[2] = authTokenInput;
form.elements[3] = submitInput;
document.body.appendChild(form);
form.submit();
Related
Assumed I have a code like this:
var mapForm = document.createElement("form");
mapForm.target ="_top";
mapForm.method = "POST";
mapForm.action = myurl;
var mapInput = document.createElement("input");
mapInput.type = "hidden";
mapInput.name = "fileName";
mapInput.value = `${fileName}`;
mapForm.appendChild(mapInput);
document.body.appendChild(mapForm);
mapForm.submit();
So it will trigger a download, but the Chrome DevTool did not catch that. I want to print the data from that action.
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.
While i click the Add Row button it showing error. I want to append a new 'tr' of every time i click add row button. the each td must contain, checkbox, firstname, lastname, email, mobile edit & save.
i want to save the values if i click save button..
and edit button to edit the fields.
Checkbox is to select the multiple rows and delete the entire row.
Can someone please help me to do this.. thanks in advance.
var form = document.createElement('form');
document.body.appendChild(form);
var table = document.createElement('table');
table.setAttribute("id","myTable");
form.appendChild(table);
var btnClick = document.createElement('button');
btnClick.setAttribute('onclick','addTable()');
btnClick.innerHTML = "Add Row";
form.appendChild(btnClick);
var btnSave = document.createElement('button');
btnSave.innerHTML = "Save";
var btnDelete = document.createElement('button');
btnDelete.innerHTML = "Delete";
var btnEdit = document.createElement('button');
btnEdit.innerHTML = "Edit";
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
var input = document.createElement('input');
input.type = "text";
input.placeholder = "Firstname";
var input1 = document.createElement('input');
input1.type = "text";
input1.placeholder = "Lastname";
var input2 = document.createElement('input');
input2.type = "email";
input2.placeholder = "Email";
var input3 = document.createElement('input');
input3.type = "number";
input3.placeholder = "Number";
function addTable() {
var row = document.createElement('tr');
table.appendChild(row);
var cell = document.createElement('td');
row.appendChild(cell);
cell.appendChild(checkbox);
cell.appendChild(input);
cell.appendChild(input1);
cell.appendChild(input2);
cell.appendChild(input3);
cell.appendChild(btnSave);
cell.appendChild(btnEdit);
}
JsFiddle
First and most important thing to change is the tag you're using for your add row button. By using a button you're going to cause the form to submit each time you press it, thereby undoing your row add and any other page changes. Use an < input > tag with type button if you want the same look. You'll probably want to do the same with your save edit and delete buttons if you want the page to respond without reloading.
For everything else you're pretty much there. If I were you I would stop using setAttribute for everything. You can set the id and onclick of an element by a direct property set (ie table.id = "myTable";). I typically only use setAttribute for inline style when I want to set more than one property at once (ie table.setAttribute("style","border:2px solid;color:red;");
Here's my version of your code that works.
window.onload = function(){
var addTable = function() {
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
var input = document.createElement('input');
input.type = "text";
input.placeholder = "Firstname";
var input1 = document.createElement('input');
input1.type = "text";
input1.placeholder = "Lastname";
var input2 = document.createElement('input');
input2.type = "email";
input2.placeholder = "Email";
var input3 = document.createElement('input');
input3.type = "number";
input3.placeholder = "Number";
var btnSave = document.createElement('button');
btnSave.innerHTML = "Save";
var btnDelete = document.createElement('button');
btnDelete.innerHTML = "Delete";
var btnEdit = document.createElement('button');
btnEdit.innerHTML = "Edit";
var row = document.createElement('tr');
table.appendChild(row);
addCell(row,checkbox);
addCell(row,input);
addCell(row,input1);
addCell(row,input2);
addCell(row,input3);
addCell(row,btnSave);
addCell(row,btnEdit);
addCell(row,btnDelete);
};
var form = document.createElement('form');
form.method = "post";
document.body.appendChild(form);
var table = document.createElement('table');
table.id = "myTable";
form.appendChild(table);
var btnClick = document.createElement('input');
btnClick.type = "button";
btnClick.value = "Add Row";
btnClick.onclick = addTable;
form.appendChild(btnClick);
};
function addCell(row,elm){
var cell = document.createElement('td');
row.appendChild(cell);
cell.appendChild(elm);
}
I am creating a dynamic form to submit with few input elements, but it does not send a request. I use fiddler to check
Here is my code
var form_ref = document.createElement("form");
form_ref.id = "viewform";
form_ref.name = "viewform";
form_ref.action = "/csm/showResult.action";
form_ref.method = "post";
form_ref.target = "_self";
var cfgidField = document.createElement("input");
cfgidField.name = "cfgid";
cfgidField.type = "text";
cfgidField.value = configid;
form_ref.appendChild(cfgidField);
var cfgnameField = document.createElement("input");
cfgnameField.name = "cfgname";
cfgnameField.type = "text";
cfgnameField.value = configname;
form_ref.appendChild(cfgnameField);
var cfgdescField = document.createElement("input");
cfgdescField.name = "cfgdesc";
cfgdescField.type = "text";
cfgdescField.value = configdesc;
form_ref.appendChild(cfgdescField);
var cfgenvField = document.createElement("input");
cfgenvField.name = "cfgenv";
cfgenvField.type = "text";
cfgenvField.value = configenv;
form_ref.appendChild(cfgenvField);
var cfgfileField = document.createElement("input");
cfgenvField.name = "cfgfile";
cfgenvField.type = "text";
cfgenvField.value = absolutepath;
form_ref.appendChild(cfgfileField);
var cfgdateField = document.createElement("input");
cfgenvField.name = "updatedDate";
cfgenvField.type = "text";
cfgenvField.value = absolutepath;
form_ref.appendChild(cfgdateField);
form_ref.submit();
Maybe you have the same problem seen here:
Why can't I submit a dynamically created form in Firefox
it basically says to append it to your document.body before submitting.
I am trying to create a checkbox dynamically using following HTML/JavaScript. Any ideas why it doesn't work?
<div id="cb"></div>
<script type="text/javascript">
var cbh = document.getElementById('cb');
var val = '1';
var cap = 'Jan';
var cb = document.createElement('input');
cb.type = 'checkbox';
cbh.appendChild(cb);
cb.name = val;
cb.value = cap;
cb.appendChild(document.createTextNode(cap));
</script>
You're trying to put a text node inside an input element.
Input elements are empty and can't have children.
...
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "name";
checkbox.value = "value";
checkbox.id = "id";
var label = document.createElement('label')
label.htmlFor = "id";
label.appendChild(document.createTextNode('text for label after checkbox'));
container.appendChild(checkbox);
container.appendChild(label);
The last line should read
cbh.appendChild(document.createTextNode(cap));
Appending the text (label?) to the same container as the checkbox, not the checkbox itself
You can create a function:
function changeInputType(oldObj, oTyp, nValue) {
var newObject = document.createElement('input');
newObject.type = oTyp;
if(oldObj.size) newObject.size = oldObj.size;
if(oldObj.value) newObject.value = nValue;
if(oldObj.name) newObject.name = oldObj.name;
if(oldObj.id) newObject.id = oldObj.id;
if(oldObj.className) newObject.className = oldObj.className;
oldObj.parentNode.replaceChild(newObject,oldObj);
return newObject;
}
And you do a call like:
changeInputType(document.getElementById('DATE_RANGE_VALUE'), 'checkbox', 7);
/* worked for me */
<div id="divid"> </div>
<script type="text/javascript">
var hold = document.getElementById("divid");
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "chkbox1";
checkbox.id = "cbid";
var label = document.createElement('label');
var tn = document.createTextNode("Not A RoBot");
label.htmlFor="cbid";
label.appendChild(tn);
hold.appendChild(label);
hold.appendChild(checkbox);
</script>