Urgent..Anyone please Assist
how to access data from the elements added via javascript dynamically using the jsp code.
i am adding empty records on .jsp page using javascript (by calling a below function on click event of button) as :-
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.value="";
cell1.appendChild(element1); //and so on for 5 columns too
Main problem is that i am not able to access these dynamically added textboxes values from my jsp code. (because they have been created dynamically by javascript)
Now,i want to save the value from these dynamically added textboxes(in form of table) from the .jsp page to database using jsp...(there can be several rows generated depending upon user input)
or else suggest me code to create them dynamically so that i can fetch data from added dynamic textboxes on jsp page.
And please ..i don't want to go for servlet concept...wants using jsp only..
thnks ....
Why dont you provide unique id and name to the textboxes you are adding?
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.value="";
element1.id="empName[0]";
element1.name="empName[0]";
cell1.appendChild(element1);
Like
<input type="text" id="empName[0]" name="empName[0]" value=""/>
<input type="text" id="empName[1]" name="empName[1]" value=""/>
Then on server side you can,
request.getParameter("empName[0]");
request.getParameter("empName[1]");
Try this:
var textboxes = [];
var inputs = cell1.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++){
if(inputs[i].type == "text")
textboxes.push(inputs[i]);
// or get name value pairs if not disabled:
// if(!inputs[i].disabled)
// myNameValues.push({ name: inputs[i].name, value: inputs[i].value });
}
Related
I am having trouble getting the input values from a div that I appended. It returns as undefined. So basically I am creating the input element and giving it an Id. I have a function that when I clicked a button it is suppose to show the input value..
I am relatively new to JavaScript and I can't seem to find any solution for this. Please help me.. thank you
I am currently doing this in the same JavaScript script so there is no HTML script.
var question1ProjectTitleDiv = document.createElement("div");
var question1ProjectTitle= document.createElement("span")
var question1ProjectTitleName= document.createTextNode("Project Title:")
var question1ProjectTitleInput = document.createElement("input");
question1ProjectTitleInput.type= "text"
question1ProjectTitleInput.maxLength = 256;
question1ProjectTitleInput.id="question1ProjectTitleInputID"
question1ProjectTitleDiv.append(question1ProjectTitle)
question1ProjectTitle.append(question1ProjectTitleName)
question1ProjectTitleDiv.append(question1ProjectTitleInput)
questions.append(question1ProjectTitleDiv) //Add project title
console.log(question1ProjectTitleInput) // Returns <input type="text" maxlength="256" id="question1ProjectTitleInputID">
JS CODE:
let question1ProjectTitleInputID = $("#question1ProjectTitleInputID").val(); //Jquery
let question1ProjectTitleInputID2 = document.getElementById('question1ProjectTitleInputID') //Vanilla JS
You have the following statement:
question1ProjectTitleInput.id="question1ProjectTitleInputID"
So, if you use jquery to read the input, you should
let question1ProjectTitleInputID = $("#question1ProjectTitleInputID").val(); //Jquery
Can someone suggest a solution for below:
I am taking inputs from a CSV file using javascript. On a button click, I would like to update two tables in HTML. I have set two dvis; dvCSV and alld.
When I click on button the table only gets updated in "alldc" not in "dvCSV".
If I remove var alld =......upto "alld.appendChild(table);" then only "dvCSV" table gets updated with the data.
var dvCSV = document.getElementById("dvCSV");
dvCSV.innerHTML = "";
dvCSV.appendChild(table);
var alld = document.getElementById("alld");
alld.innerHTML = "";
alld.appendChild(table);
I am trying to tweak an existing .html file to add a feature. I am very new to the frontend dev env.
<form action="javascript:void(0);">
<input type="button" name="Load" value="Load" onclick="fileLoad();"/>
<input type="button" name="showFiles" value="Select File" onclick="selectFiles();"/>
</form>
I would like to have a dropdown (dynamic list). Which occurs when i click the button "Select File". I have tried to use the selectFiles() function to achieve this. Eventhough, I can get the list of files from backend. How can i display it on the frontend
Once you get your list from the server you can do,
function makeList(fileNames) {
// create a container for the select in your html
var myDiv = document.getElementById("myDiv");
// Create and append select list
var selectList = document.createElement("select");
selectList.id = "filesSelect";
myDiv.appendChild(selectList);
// Create and append the options
for (var i = 0; i < fileNames.length; i++) {
var option = document.createElement("option");
option.value = fileNames[i]; // this will depend on the datastructure of your list items
option.text = fileNames[i]; // this will depend on the datastructure of your list items
selectList.appendChild(option);
}
}
This function should go as a callback to your server call.
I have not tested it, but it should give you a clear idea.
In my sharepoint list, I am dealing with items that should have attachments. I customized the template so that it would allow me to add attachments, but I see no possibilities to mark attachments as mandatory. I managed to check for attachments with the script
<script type="text/javascript" language="javascript">
function PreSaveAction()
{
var elm = document.getElementById("idAttachmentsTable");
if (elm == null || elm.rows.length == 0)
{
document.getElementById("idAttachmentsRow").style.display='none';
alert("Please attach Documents");
return false ;
}
else { return true ;}
}
</script>
but I was only able to use it in a custom form (not the template). Since the template is used for pretty much any interaction with the list, I want to use it and would like to execute the js code after the template has loaded. The template is referenced in between the tags <ZoneTemplate> and </ZoneTemplate>. There's much more code inside that form, but sharepoint-designer won't let me edit anything apart the stuff between those two tags.
It's really frustrating, because I seem to miss an obvious point. Hope I delivered enough information as I am not used to work with sharepoint and it's forms and templates for them...
When you need to add a JavaScript to a list form, you can browse to the form directly. For example, if your list is called MyList, then the new item form would be at http://url/Lists/MyList/newform.aspx and the edit form would be at EditForm.aspx. Browse to the page or pages where you want to insert your javascript code, then under Site Actions, click Edit Page. Add a Content Editor Web Part and either insert the javascript directly into the HTML of the content editor web part or add a link to an HTML file that has the javascript.
As for marking an attachment as mandatory, you may just need to include some wording to the form that will instruct the user to click Attach File button. Maybe something like this that would add a row to the bottom of the form table
<script type="text/javascript">
function addRow() {
var required = document.createTextNode("*");
var table = document.getElementsByClassName("ms-formtable")[0];
var tbody = table.getElementsByTagName("tbody")[0];
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.setAttribute("class","ms-formlabel");
td1.setAttribute("vAlign","top");
var h31 = document.createElement("h3");
h31.setAttribute("class","ms-standardheader");
var text1 = document.createTextNode("Attachment");
h31.appendChild(text1);
var span1 = document.createElement("span")
span1.setAttribute("class","ms-formvalidation");
span1.setAttribute("title","This is a required field");
span1.appendChild(required);
h31.appendChild(span1);
var td1.appendChild(h31);
var tr.appendChild(td1);
var td2 = document.createElement("td");
td2.setAttribute("class","ms-formbody");
td2.setAttribute("vAlign","top");
var text2 = document.createTextNode("Click the Attach File button in the ribbon to add an attachment");
var td2.appendChild(text2);
var tr.appendChild(td2);
var tbody.appendChild(tr);
}
</script>
This is pretty ugly and can be simplified with jQuery.
<script type="text/javascript">
function addRow() {
var h3 = $('<h3 class="ms-standardheader">Attachment</h3>').append('<span class="ms-formvalidation">*</span>');
var td1 = $("<td></td>").append(h3);
var td2 = $("<td>Click the Attach File button in the ribbon to add an attachment</td>");
var tr = $("<tr></tr>").append(td1);
$(tr).append(td2);
$(".ms-formtable").first().find("tbody").first().append(tr);
}
</script>
Keep in mind this is untested and probably has some bugs in it.
I have a dropdown box in a row that was dynamically created. I'm populating that box on within the screen. Is there a way that I can use cfquery to get the info from the sql server and populate the dropdown box. I would like to do it within the javascript?
Here is my code:
<script language="javascript" type="text/javascript">
function addRow() {
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// left cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration-3);
cellLeft.appendChild(textNode);
// select cell
var cellRightSel = row.insertCell(1);
var sel = document.createElement('select');
sel.name = 'sectCode' + iteration;
sel.id = 'sectCode' + iteration;
sel.options[0] = new Option('---Any---', '0');
sel.options[1] = new Option('Level 0.5: test1, '1');
sel.options[2] = new Option('Level I: test2', '2');
sel.options[3] = new Option('Level I.D: test3', '3');
sel.options[4] = new Option('Level II.1: test4', '4');
sel.options[5] = new Option('Level II.5: test5', '5');
cellRightSel.appendChild(sel);
}
Well, if your page is a .cfm (I assumed it was), why not simply generating the whole select HTML using ColdFusion directly? Is there any special reason you want to avoid this?
<select name="test">
<cfoutput query="yourQuery">
<option value="#yourQuery.value#">#yourQuery.text#</option>
</cfoutput>
</select>
However, if you want to pass a data structure from ColdFusion to JavaScript, it can be done using a data interchange format like JSON. Your JavaScript code could make an Ajax call to retrieve the data, or you could simply output the JSON directly in the page and make it accessible in the JS like this:
<script>
var optionsData = <cfoutput>#serializeJson(yourQuery)#</cfoutput>;
</script>
In that case, the optionsData JS variable would reference an object that contains your query's data. You can find more information about serializing queries here.
Another way is to use cfform and cfselect:
<cfform>
<cfselect name="something"
query="yourquery"
value="AFieldFromTheQuery"
display="AnotherFieldFromTheQuery">
... etc
</cfform>
plalx's answer is good, but if you really want to do it in Javascript, you can simply do something like this:
sel.options[0] = new Option('---Any---', '0');
<cfoutput query="yourQuery">
sel.options[#yourQuery.CurrentRow#] = new Option('#yourQuery.value#', '#yourQuery.text#');
</cfoutput>
You may also want to use ColdFusion's JSStringFormat function to prevent things like apostrophes within those values from the query causing any problems in your Javascript:
sel.options[0] = new Option('---Any---', '0');
<cfoutput query="yourQuery">
sel.options[#yourQuery.CurrentRow#] = new Option('#JSStringFormat(yourQuery.value)#', '#JSStringFormat(yourQuery.text)#');
</cfoutput>
You can do as plalx mentioned or you can use the CFSELECT tag similar to this.
<!--- Get data --->
<CFQUERY DATASOURCE="datasource" NAME="qData">
SELECT fieldname, ID
FROM qTable
ORDER BY ID
</CFQUERY>
<cfform>
<CFSELECT NAME="name"
query="qData"
display="fieldname"
width="250"
value="ID"><option value="" selected="selected">default value</option></CFSELECT>
</cfform>