Develop Reference

Using PHP to populate Javascript Variables

I'm trying to populate a Drop-Down menu from a csv file located on a network share.
I've come as far to get the file to create all the options successfully when the file is in the wwwroot folder however, now I'm faced with the external url reference issue.
Ajax does not support local File:/// directories and when attempting to use the network share location it also fails: \\Server\Folder\File.csv
Is there any way to read the data from the csv file using php or other server-side language in order to perform my work on the data?
Code Below for your reference:
<script>
function SubmitBy(){
$.ajax({
url: encodeURI('./PrinterLookup.csv'),
success: function(data) {
var splitData=data.split("\n");
for (var i = 0; i < splitData.length; i++) {
var colData = splitData[i];
var strucData = colData.substr(0, colData.indexOf("="));
$('#SubmitBy').append("<option value=\"" + strucData + "\">" +
strucData + "</option>");
}
}
});
}
</script>
Looking for something like this,,, to bypass the ajax url limitation:
<script>
function SubmitBy(){
<?php
$Datapath = "\\Server\Folder\Document.csv";
$Data = file_get_contents($Datapath);
?>
var data = $Data;
var splitData=data.split("\n");
for (var i = 0; i < splitData.length; i++) {
var colData = splitData[i];
var strucData = colData.substr(0, colData.indexOf("="));
$('#SubmitBy').append("<option value=\"" + strucData + "\">" +
strucData + "</option>");
}
}
});
}
</script>
Any assistance on this will be greatly appreciated.
Thank you in advance.

in this line var data = $Data; you need to print $Data see below
<script>
function SubmitBy(){
<?php
$Datapath = "file:///Server/Folder/Document.csv";
$Data = file_get_contents($Datapath);
?>
var data = <?php echo $Data; ?> //correction here
var splitData=data.split("\n");
for (var i = 0; i < splitData.length; i++) {
var colData = splitData[i];
var strucData = colData.substr(0, colData.indexOf("="));
$('#SubmitBy').append("<option value=\"" + strucData + "\">" +
strucData + "</option>");
}
}
});
}
</script>

Please check first this is .php file .
If this is .php file.
<?php
$Datapath = "\\Server\Folder\Document.csv";
$Data = file_get_contents($Datapath);
?>
<script>
function SubmitBy(){
var data = <?php print_r( $data ); ?>;
var splitData=data.split("\n");
for (var i = 0; i < splitData.length; i++) {
var colData = splitData[i];
var strucData = colData.substr(0, colData.indexOf("="));
$('#SubmitBy').append("<option value=\"" + strucData + "\">" +
strucData + "</option>");
}
}
});
}
</script>

Cant execute script function myFunction from another function

function editBaancode() {
var baan1 = "<div class='dropdown'>";
var baan2 = "<button onclick=myFunction() class='dropbtn'>Dropdown</button>";
var baan4 = "<div id='myDropdown' class='dropdown-content'>";
var baan5 = "<div id='myDropdown' class='dropdown-content'><input type='text' placeholder='Search..' id='myInput' onkeyup=filterFunction()";
var baan7 = "><a>About</a>";
var baan8 = "<a>Base</a>";
var baan9 = "<a>Blog</a>";
var baan10 = "<a href=#>CREATE</a>";
var baan11 = "</div>";
var baan12 = "</div>";
var res = baan1.concat(baan1, baan2, baan4, baan5, baan7, baan8, baan9, baan10, baan11, baan12);
document.getElementById('mylocation').innerHTML = res;
}

see working link here -> are you doing in the same way which is herein
jsbin
function editBaancode(){var n="<div class='dropdown'>",o=n.concat(n,"<button onclick=myFunction() class='dropbtn'>Dropdown</button>","<div id='myDropdown' class='dropdown-content'>","<div id='myDropdown' class='dropdown-content'><input type='text' placeholder='Search..' id='myInput' onkeyup=filterFunction()","><a>About</a>","<a>Base</a>","<a>Blog</a>","<a href=#>CREATE</a>","</div>","</div>");document.getElementById("mylocation").innerHTML=o}function myFunction(){alert("executing on button click")}window.onload=function(){editBaancode()};

Increment textarea name to javascript function

So what I am trying to achieve is to increment the points".$id." in the javascript code below starting from 0 like points+n and it would be a dynamic value according to rows in a table. Same for the value 'button".$id."' and all this is because of styled radiobutton labels that are looped etc.
So all I want to do is get rid of all the hardcoded different var txt1 to txt+n, button0 to button+n and points0 to points+n in the JavaScript function.
The real problem here for me is the line: var buttons1 = document.forms[0].button0; how to replace the 0 in button0 to the 'i' in a for loop. Someting like button + i won't work.
Oh and what I'm trying to do is get the values from the radiobuttons to a textarea with one buttongroup and textarea per tablerow.
The code below works for the first 7 rows in my table...
echo "
<td>
<div class='radio'>
<input id='".$temp1."' type='radio' name='button".$id."' onclick='myFunction()' value='4'>
<label for='".$temp1."'></label>
<input id='".$temp2."' type='radio' name='button".$id."' onclick='myFunction()' value='3'>
<label for='".$temp2."'></label>
<input id='".$temp3."' type='radio' name='button".$id."' onclick='myFunction()' value='2'>
<label for='".$temp3."'></label>
<input id='".$temp4."' type='radio' name='button".$id."' onclick='myFunction()' value='1'>
<label for='".$temp4."'></label>
</div>";
echo"<textarea id='points".$id."' name='points".$id."' cols='1' rows='1' ;> </textarea>
</td>
</tr>";
The Javascript function:
function myFunction() {
var txt1 ='';
var txt2 ='';
var txt3 ='';
var txt4 ='';
var txt5 ='';
var txt6 ='';
var txt7 ='';
var buttons1 = document.forms[0].button0;
var buttons2 = document.forms[0].button1;
var buttons3 = document.forms[0].button2;
var buttons4 = document.forms[0].button3;
var buttons5 = document.forms[0].button4;
var buttons6 = document.forms[0].button5;
var buttons7 = document.forms[0].button6;
var buttons8 = document.forms[0].button7;
for (var i = 0; i < 4; i++) {
if (buttons1[i].checked) {
txt1 = txt1 + buttons1[i].value + " ";
}
if (buttons2[i].checked) {
txt2 = txt2 + buttons2[i].value + " ";
}
if (buttons3[i].checked) {
txt3 = txt3 + buttons3[i].value + " ";
}
if (buttons4[i].checked) {
txt4 = txt4 + buttons4[i].value + " ";
}
if (buttons5[i].checked) {
txt5 = txt5 + buttons5[i].value + " ";
}
if (buttons6[i].checked) {
txt6 = txt6 + buttons6[i].value + " ";
}
if (buttons7[i].checked) {
txt7 = txt7 + buttons7[i].value + " ";
}
}
document.getElementById("points0").value = txt1;
console.log(txt1);
document.getElementById("points1").value = txt2;
console.log(txt2);
document.getElementById("points2").value = txt3;
console.log(txt3);
document.getElementById("points3").value = txt4;
console.log(txt4);
document.getElementById("points4").value = txt5;
console.log(txt5);
document.getElementById("points5").value = txt6;
console.log(txt6);
document.getElementById("points6").value = txt7;
console.log(txt7);
}

i think what you need is use the "eval" function in javascript
try the following
var buttons1;
var buttons2;
var buttons3;
var buttons4;
var buttons5;
var buttons6;
var buttons7;
var buttons8;
var j;
for(var i=0;i<8;i++){
j=i+1;
eval("buttons" +j+ " = document.forms[0].button" +i+ ";");
}

If i understood correctly,
Try something like this:
change your onclick as following:
<input id='".$temp4."' type='radio' name='button".$id."' onclick='myFunction(this)' value='1'>
and change function :
function myFunction(button){
var name= button.name;
var id= name.split('button')[1];;
document.getElementById("points"+id).value = buttons.value +" ";
}

How to insert php script inside jquery?

I have this jquery sample, just wondering how to insert php (e.g. /a href="/?php echo $sample['SAMPLE\']; ?/"/) in the "var para1" in the below.
var storyIndictor = jQuery(_storyIndictors[position]);
var _content = jQuery("div.jqans-content", container);
var img = jQuery('<img style="float:left;clear:left;"></img>');
var para = jQuery('<div ></div>');
var para1 = jQuery('<h1> </h1>');
var title = jQuery(settings.contentTitle + " a", story).attr('title') || jQuery(settings.contentTitle, story).text();
img.attr('src', jQuery('img', story).attr('longdesc') || jQuery('img', story).attr('src'));
para1.html("<h1>" + title + "</h1>");

You can just echo out a variable
var para1 = jQuery('<h1><?php echo $another_variable; ?></h1>');

var _content = jQuery("div.jqans-content", container);
var img = jQuery('<img style="float:left;clear:left;"></img>');
var para = jQuery('<div ></div>');
var para1 = jQuery('<h1><?php echo $phpvar; ?></h1>');
var title = jQuery(settings.contentTitle + " a", story).attr('title') || jQuery(settings.contentTitle, story).text();
img.attr('src', jQuery('img', story).attr('longdesc') || jQuery('img', story).attr('src'));
para1.html("<h1>" + title + "</h1>");
para.html("<p>" + jQuery(settings.contentDescription, story).html() + "</p>");
You mean like that?

Try this:
var para1 = jQuery('<h1> <?php echo $sample['SaMPLE_SAMPLE']; ?> </h1>');

Its not a good practice to embedded php code in javascript. I have post a way you can try this.
<input type="hidden" id="sample" value="<?php echo $sample['SaMPLE_SAMPLE']; ?>" />
or <div id="sample" data-sample="<?php echo $sample['SaMPLE_SAMPLE']; ?>"></div>
<script>
var sample = $('#sample').val();
//or
var sample = $('#sample').data(); //if you use data atrr
var para1 = $('<h1>' +sample+ '</h1>');
</script>

Simply you can use php inside your js code:-
var varName = '<?php echo $sample['SAMPLE']; ?>';
don't forget to echo. as you missed in your example
so your var para1 will be:-
var para1 = jQuery('<h1><?php echo $sample['SAMPLE']; ?></h1>');

how to append new element in javascript on each button click

When i click a link, JS adds a new file tag to the page but every time it reloads all the file tags. What i need is that when i click on a link, it should append a file tag without re-loading earlier file tags.
Please suggest if any one has an idea about this.
Following is my code.
var intTextBox = 0;
function addElement()
{
intTextBox = intTextBox + 1;
var contentID = document.getElementById('content');
contentID.innerHTML = "";
var howManyTextBoxes = intTextBox;
for ( var i = 0; i < howManyTextBoxes; i++)
{
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id', 'strText' + intTextBox);
newTBDiv.innerHTML += "<input type=file name='fileUpload' size='40'/>";
contentID.appendChild(newTBDiv);
}
and this is how i call to JS function.
Attach more files

You should return false from that function, otherwise the link reloads the page:
function addElement() {
intTextBox = intTextBox + 1;
var contentID = document.getElementById('content');
contentID.innerHTML = "";
var howManyTextBoxes = intTextBox;
for ( var i = 0; i < howManyTextBoxes; i++) {
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id', 'strText' + intTextBox);
newTBDiv.innerHTML += "<input type=file name='fileUpload' size='40'/>"; contentID.appendChild(newTBDiv);
return false;
}

You can call like this :
Attach more files
do not forget the return false;