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.
Related
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);
}
How to pass value from jsp to servlet ?
In Jsp there is input box which is dynamically created.
<input type="text" class="form-control" placeholder="Qty" min="0"
onkeypress="return newTextBox(event)">
this line is in html through which textbox is created.
<script>
/* starts here for the dynamic page*/
var instance = 0;
function newTextBox(event) {
instance++;
var x = event.which || event.keyCode;
if (x == 13) {
var table = document.getElementById('tableOne');
var rowCount = document.getElementById('tableOne').rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
// cell1 starts here//
var newInput1 = document.createElement("input");
newInput1.id = "itemId" + instance;
newInput1.name = "itemId" + instance;
newInput1.type = "text";
newInput1.className = "form-control";
newInput1.placeholder = "Item Id";
event.target.onkeypress = null;
newInput1.style.marginBottom = "5px";
newInput1.style.marginTop = "5px";
var newDiv1 = document.createElement("div");
newDiv1.className = "col-md-4";
newDiv1.appendChild(newInput1);
var newDiv1Form = document.createElement("div");
newDiv1Form.className = "form-group";
newDiv1Form.appendChild(newDiv1);
//item item one//
var newInput2 = document.createElement("input");
newInput2.id = "itemNum" + instance;
newInput2.name = "itemNum" + instance;
newInput2.type = "text";
newInput2.className = "form-control";
newInput2.placeholder = "Item Num";
event.target.onkeypress = null;
newInput2.style.marginBottom = "5px";
newInput2.style.marginTop = "5px";
var newDiv2 = document.createElement("div");
newDiv2.className = "col-md-7";
newDiv2.appendChild(newInput2);
newDiv1Form.appendChild(newDiv2);
var newDiv1Row = document.createElement("div");
newDiv1Row.className = "row";
newDiv1Row.appendChild(newDiv1Form);
cell1.appendChild(newDiv1Row);
// cell1 ends here//
//cell2 starts here but named as cell 3 //
var cell3 = row.insertCell(1);
var newInput3 = document.createElement("input");
newInput3.id = "qty" + instance;
newInput3.name = "qty" + instance;
newInput3.type = "text";
newInput3.className = "form-control";
newInput3.placeholder = "Qty";
newInput3.onkeypress = newTextBox;
// Line added
event.target.onkeypress = null;
newInput3.style.marginBottom = "5px";
newInput3.style.marginTop = "5px";
var newDiv3 = document.createElement("div");
newDiv3.className = "col-md-10";
newDiv3.appendChild(newInput3);
newDiv3form = document.createElement("div");
newDiv3form.className = "form-group";
newDiv3form.appendChild(newDiv3);
newDiv3Row = document.createElement("div");
newDiv3Row.className = "row";
newDiv3Row.appendChild(newDiv3form);
cell3.appendChild(newDiv3Row);
//cell 2 ends here but cell 3 name is taken//
//cell 3 starts here with cell 4 name//
var cell4 = row.insertCell(2);
var newInput4 = document.createElement("input");
newInput4.id = "unitPrice" + instance;
newInput4.name = "unitPrice" + instance;
newInput4.type = "text";
newInput4.className = "form-control";
newInput4.placeholder = "Price(Rs)";
newInput4.style.marginBottom = "5px";
newInput4.style.marginTop = "5px";
var newDiv4 = document.createElement("div");
newDiv4.className = "col-md-10";
newDiv4.appendChild(newInput4);
newDiv4form = document.createElement("div");
newDiv4form.className = "form-group";
newDiv4form.appendChild(newDiv4);
newDiv4Row = document.createElement("div");
newDiv4Row.className = "row";
newDiv4Row.appendChild(newDiv4form);
cell4.appendChild(newDiv4Row);
//cell 3 starts here with cell 4 name//
//cell 4 starts here with cell 5 name//
var cell5 = row.insertCell(3);
var newInput5 = document.createElement("input");
newInput5.id = "amountPrice" + instance;
newInput5.name = "amountPrice" + instance;
newInput5.type = "text";
newInput5.className = "form-control";
newInput5.placeholder = "Price(Rs)";
newInput5.style.marginBottom = "5px";
newInput5.style.marginTop = "5px";
var newDiv5 = document.createElement("div");
newDiv5.className = "col-md-10";
newDiv5.appendChild(newInput5);
newDiv5form = document.createElement("div");
newDiv5form.className = "form-group";
newDiv5form.appendChild(newDiv5);
newDiv5Row = document.createElement("div");
newDiv5Row.className = "row";
newDiv5Row.appendChild(newDiv5form);
cell5.appendChild(newDiv5Row);
//cell 4 ends here with cell 5 name//
//cell 5 ends here with cell 6 name//
var cell6 = row.insertCell(4);
var spanOne = document.createElement("span");
spanOne.id = "spanOne" + instance;
spanOne.className = "glyphicon glyphicon-remove-sign col-md-offset-5";
spanOne.style.lineHeight = "2.5";
spanOne.style.marginBottom = "5px";
spanOne.style.marginTop = "5px";
spanOne.onclick = deleteRowOne;
cell6.appendChild(spanOne);
}
}
/*ends here for the dynamic page*/
</script>
This is the code where textbox is created dynamically.
How could I pass the value from jsp to servlet
What you want to do is passing the value from client side to server side.
You can Submit the value to server by using form submit or ajax.
After adding textbox in you jsp if you want to move on servlet then simply u can dynamically submit form and include new text box in this form or you u can write ajax to get data from newly created text box to servlet.
You can do it in two ways
After creating those elements append it in your form and send data to Servlet through ajax call.
var clone = document.createElement('INPUT');
clone.type="text";
clone = elem.cloneNode(true);
clone.setAttribute("id", "file_"+index);
clone.setAttribute("name", "file_"+index);
$('#myform').append(clone);
var formData = new FormData($('#myform')[0]);
and send this form data in your ajax call as below :
$.ajax({
url : "ServletName" ,
type : "POST",
dataType : 'text',
contentType : false,
processData : false,
cache : false,
async: false,
data : formData,
success : function(response) {
$console.text('Successfully saved.');
},
error : function() {
$console.text("Failure");
}
});
Just send your extra fields as parameter to your servlet with ¶metername=parametervalue
var pvalue = document.getElementById("dynamicfield").value;
or
var pvalue = $("#dynamicfield").val();
$.ajax({
url : "servletname?" + "&pname=" + pvalue,
type : "POST",
dataType : 'text',
contentType : false,
processData : false,
cache : false,
async: false,
success : function(response) {
$console.text('Successfully saved.');
},
error : function() {
$console.text("failure");
}
});
So I have a code with check boxes and I need a suggestion for a function to get data from database if the check box is checked. The table name for the database is Shifliigid and the column name which data I use in the check box is shiffer. So any suggestions would be nice (English isn't my first or even second language, so don't be mad for the short and shady explanation)
var nodeTr = document.createElement("tr");
var td_tekst = document.createElement("td");
td_tekst.innerHTML="Motoorika";
var td = document.createElement("td");
td.style.width = "370px";
var input = document.createElement("textarea");
//input.type = "text";
input.name = "//funktsioonide hindamine/funktsioon[" + count + "]/motoorika";
input.value = rowData.motoorika.replace(/<br\/>/g, "\r\n");
input.className = "txt_left";
input.style.width = "368px";
input.style.fontSize = "9pt";
var nodeMotoorika = input;
addChangeListener(input);
td.appendChild(input);
nodeTr.appendChild(td_tekst);
nodeTr.appendChild(td);
evaluationContainer.appendChild(nodeTr);
//This is the part that makes the checkboxes
var nodeTr = document.createElement("tr");
var td_tekst = document.createElement("td");
var td = document.createElement("td");
var echeckbox = document.createElement("input");
echeckbox.type="checkbox";
echeckbox.name = "//funktsioonide hindamine/funktsioon[" + count + "]/nagemine/vahend_0301";
td.appendChild(echeckbox);
td.innerHTML+="käeprotees/-ortoos";
nodeTr.appendChild(td_tekst);
nodeTr.appendChild(td);
evaluationContainer.appendChild(nodeTr);
var nodeTr = document.createElement("tr");
var td_tekst = document.createElement("td");
td_tekst.innerHTML="Liikumine";
var td = document.createElement("td");
td.style.width = "370px";
var input = document.createElement("textarea");
//input.type = "text";
input.name = "//funktsioonide hindamine/funktsioon[" + count + "]/liikumine";
input.value = rowData.liikumine.replace(/<br\/>/g, "\r\n");
input.className = "txt_left";
input.style.width = "368px";
input.style.fontSize = "9pt";
var nodeLiikumine = input;
addChangeListener(input);
td.appendChild(input);
nodeTr.appendChild(td_tekst);
nodeTr.appendChild(td);
evaluationContainer.appendChild(nodeTr);
//This is the part that makes the checkboxes
var nodeTr = document.createElement("tr");
var td_tekst = document.createElement("td");
var td = document.createElement("td");
var echeckbox = document.createElement("input");
echeckbox.type="checkbox";
echeckbox.name = "//funktsioonide hindamine/funktsioon[" + count + "]/nagemine/vahend_0302";
td.appendChild(echeckbox);
td.innerHTML+="jalaprotees/-ortoos";
nodeTr.appendChild(td_tekst);
nodeTr.appendChild(td);
evaluationContainer.appendChild(nodeTr);
There is no JS "function to get data from database".
You will have to choose a backend technology to access the database. For example PHP.
Use ajax calls to get the data from database using PHP or asp.
You can check if a particular checkbox is checked using the checked property of DOM.
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();
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>