Jump to content

replace php array objects with javascript

Plugnz13

By Plugnz13
in Javascript Help

 Share

Recommended Posts

Plugnz13 Member

Plugnz13

Posted
Posted

Hi All,

I have been trying to work out how to use javascript to change the objects inside a php array using an onchange command.

The array looks like this: 

$mtharray = [4,5,6,7,8,9,10,11,12,1,2,3];

I'd like it to look like this after the onchange event has occured  

$mtharray = [1,2,3,4,5,6,7,8,9,10,11,12];

is there an easy way to approach this? 

the onchange comes from this dropdown 

 <div class="dropdown">
                    <select id="periodDropdown" name="period" class="btn btn-outline-primary">
                        <option value="CurrentFY" <?php if(isset($_POST['period']) && $_POST['period'] == 'CurrentFY'){ ?> selected="selected" <?php } ?> >Current Fiscal Year</option>
                        <option value="CurrentCY" <?php if(isset($_POST['period']) && $_POST['period'] == 'CurrentCY'){ ?> selected="selected" <?php } ?> >Current Calendar Year</option>
                        <option value="NextFY" <?php if(isset($_POST['period']) && $_POST['period'] == 'NextFY'){ ?> selected="selected" <?php } ?> >Next Fiscal Year</option>
                        <option value="NextCY" <?php if(isset($_POST['period']) && $_POST['period'] == 'NextCY'){ ?> selected="selected" <?php } ?> >Next Calendar Year</option>
                        <option value="PreviousFY" <?php if(isset($_POST['period']) && $_POST['period'] == 'PreviousFY'){ ?> selected="selected" <?php } ?> >Previous Fiscal Year</option>
                        <option value="PreviousCY" <?php if(isset($_POST['period']) && $_POST['period'] == 'PreviousCY'){ ?> selected="selected" <?php } ?> >Previous Calendar Year</option>
                    </select>
                </div>

and it currently changes month data Var mSC to var mSF which is identifying by the row id  . I'd like to do similar but identifying the array variable $mtharray.  

function initListeners() {
	filterListener();
	createChart();//create empty chart
}

//Populate Year and Month in header according to Dropdown(FY or CY)
function filterListener() {

	var displayYear = document.getElementById("theadYear");

	var rowmonthS = document.getElementById("rowmonthSum");
	var rowmonthI = document.getElementById("rowmonthInc");
	var rowmonthE = document.getElementById("rowmonthExp");

	//var rowinc = document.getElementById("rowInc");
	//var rowexp = document.getElementById("rowExp");
	var mSC = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec','Total'];
	var mSF = ['Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec','Jan', 'Feb', 'Mar','Total'];
    var mtharray = document.getElementById('<?php echo $mtharray = [4,5,6,7,8,9,10,11,12,1,2,3]?>');
    document.write (mtharray);
	var mnthC = [4,5,6,7,8,9,10,11,12,1,2,3];
	var mnthF = [1,2,3,4,5,6,7,8,9,10,11,12];

	$("#periodDropdown").on("change",function()  {
			event.preventDefault();
			filterterm = $(this).val();
			console.log(filterterm);

			//Reset header
			rowmonthS.innerHTML="<th>Summary</th>";
			rowmonthI.innerHTML="<th>Income</th>";
			rowmonthE.innerHTML="<th>Expense</th>";
		//	rowinc.innerHTML="<td></td>";
		//	rowexp.innerHTML="<td></td>";

			if(filterterm === "CurrentCY" || filterterm === "CurrentFY"){
				//Dynamically change year
				displayYear.innerHTML="Year "+new Date().getFullYear();
				//Populate Month header
				if(filterterm === "CurrentCY"){
					for(var i=0;i<mSC.length;i++){
						var th = document.createElement("th");
						th.innerHTML=mSC[i];
						th.colSpan=2;
						$(th).clone().appendTo(rowmonthS);
						$(th).clone().appendTo(rowmonthI);
						$(th).clone().appendTo(rowmonthE);
                    }
                  element_replace();
                 

				}else if(filterterm === "CurrentFY"){
					for(var i=0;i<mSF.length;i++){
						var th = document.createElement("th");
						th.innerHTML=mSF[i];
						th.colSpan=2;
						$(th).clone().appendTo(rowmonthS);
						$(th).clone().appendTo(rowmonthI);
						$(th).clone().appendTo(rowmonthE);   
					}
                   // window.location.href="index.php?ft="+filterterm;
                   // document.write(filterterm);
                 //   for(var i=0;i<mnthF.length;i++){
				//		var td = document.createElement("td");
				//		td.innerHTML=mnthF[i];
				//		$(td).clone().appendTo(rowinc);
				//		$(td).clone().appendTo(rowexp);
                //    }
               // var mtha = json_encode($mtharray); 
               // console.log(mtha[1,2,3,4,5,6,7,8,9,10,11,12]);
				}

			}else if(filterterm === "NextCY" || filterterm === "NextFY"){
				//Dynamically change year
				displayYear.innerHTML="Year "+new Date(new Date().setFullYear(new Date().getFullYear() + 1)).getFullYear();
				//Populate Month header
				if(filterterm === "NextCY"){
					for(var i=0;i<mSC.length;i++){
						var th = document.createElement("th");
						th.innerHTML=mSC[i];
						th.colSpan=2;
						$(th).clone().appendTo(rowmonthS);
						$(th).clone().appendTo(rowmonthI);
						$(th).clone().appendTo(rowmonthE);
					}

                   // window.location.href="index.php?ft="+filterterm;
                    //document.write(filterterm);
                //    for(var i=0;i<mnthC.length;i++){
				//		var td = document.createElement("td");
				//		td.innerHTML=mnthC[i];
				//		$(td).clone().appendTo(rowinc);
				//		$(td).clone().appendTo(rowexp);
                 //   }

				}else if(filterterm === "NextFY"){
					for(var i=0;i<mSF.length;i++){
						var th = document.createElement("th");
						th.innerHTML=mSF[i];
						th.colSpan=2;
						$(th).clone().appendTo(rowmonthS);
						$(th).clone().appendTo(rowmonthI);
						$(th).clone().appendTo(rowmonthE);
					}
                   // window.location.href="index.php?ft="+filterterm;
                   // document.write(filterterm);
                //    for(var i=0;i<mnthF.length;i++){
				//		var td = document.createElement("td");
				//		td.innerHTML=mnthF[i];
				//		$(td).clone().appendTo(rowinc);
				//		$(td).clone().appendTo(rowexp);
                //    }
				}

			}else if(filterterm === "PreviousFY" || filterterm === "PreviousCY"){
				//Dynamically change year
				displayYear.innerHTML="Year "+new Date(new Date().setFullYear(new Date().getFullYear() - 1)).getFullYear();
				//Populate Month header
				if(filterterm === "PreviousCY"){
					for(var i=0;i<mSC.length;i++){
						var th = document.createElement("th");
						th.innerHTML=mSC[i];
						th.colSpan=2;
						$(th).clone().appendTo(rowmonthS);
						$(th).clone().appendTo(rowmonthI);
						$(th).clone().appendTo(rowmonthE);
					}
                  //  window.location.href="index.php?ft="+filterterm;
                   // document.write(filterterm);
                //    for(var i=0;i<mnthC.length;i++){
				//		var td = document.createElement("td");
				//		td.innerHTML=mnthC[i];
				//		$(td).clone().appendTo(rowinc);
				//		$(td).clone().appendTo(rowexp);
                //    }

				}else if(filterterm === "PreviousFY"){
					for(var i=0;i<mSF.length;i++){
						var th = document.createElement("th");
						th.innerHTML=mSF[i];
						th.colSpan=2;
						$(th).clone().appendTo(rowmonthS);
						$(th).clone().appendTo(rowmonthI);
						$(th).clone().appendTo(rowmonthE);
					}
                   // window.location.href="index.php?ft="+filterterm;
                   // document.write(filterterm);
                //    for(var i=0;i<mnthF.length;i++){
				//		var td = document.createElement("td");
				//		td.innerHTML=mnthF[i];
				//		$(td).clone().appendTo(rowinc);
				//		$(td).clone().appendTo(rowexp);
                //    }
				}
			}

I'm not that familiar with javascript so I'm just trying whatever I can get hold of to see if it works. :) your help would be much appreciated. Thanks in advance. 

Link to comment
Share on other sites
mac_gyver Prolific Member

mac_gyver

Posted
Posted

your apparent question is how to use javascript to change (assign) a php array definition or select which php array to use when building and outputting the page? if that's the question, you cannot directly do this in the browser. the php code is executed on the web server when the page is requested. to actually do this would require sending some value to the web server that tells the php code what to do, then the php code assigns or selects which array definition to use and outputs  it back to the browser.

if your question actually is how to use the correct mnthC or mnthF javascript arrays (which the definition appears to be backward), depending on which select/option was picked, you would just assign the correct one to a common working variable, then use that common variable where you want.

so. don't show us a non-working attempted solution, that doesn't indicate what you are trying to do, tell or show us what the overall goal is you are trying to achieve? are you actually trying to change something happening in the server-side php code or are you trying to do something entirely within the browser?

next, don't write out code for every value. the select/option menu should be dynamically built on the web server, by having an array of the choices, then loop over that defining array to build and output the option choices. in the javascript, where the only difference between all the repeated bocks of code is the year value and if using the mSC or mSF arrays. you should detect  the filterterm value and setup a common year and common array variable, then use those common variables as the input for one instance of the javascript code.

Link to comment
Share on other sites
mac_gyver Prolific Member

mac_gyver

Posted
Posted

for building the select/option menu, do something like this data-driven example - 

<?php
$period_choices = [];
$period_choices["CurrentFY"] = 'Current Fiscal Year';
$period_choices["CurrentCY"] = 'Current Calendar Year';
$period_choices["NextFY"] = 'Next Fiscal Year';
$period_choices["NextCY"] = 'Next Calendar Year';
$period_choices["PreviousFY"] = 'Previous Fiscal Year';
$period_choices["PreviousCY"] = 'Previous Calendar Year';
?>
<div class="dropdown">
	<select id="periodDropdown" name="period" class="btn btn-outline-primary">
		<option value=''>Select Report Period</option>
	<?php
	foreach($period_choices as $value=>$label)
	{
		// note: you should actually be using $_GET when determining what will be displayed on a page
		$sel = isset($_POST['period']) && $_POST['period'] == $value ? ' selected' : '';
		echo "<option value='$value'$sel>$label</option>\n";
	}
	?>
	</select>
</div>

for the repetitive javascript code, to select the year, mSC or mSF array, and mnthC or mnthF array to use, do something like this (untested) - 

	$("#periodDropdown").on("change",function(){
			event.preventDefault();
			filterterm = $(this).val();
			console.log(filterterm);

			//Reset header
			rowmonthS.innerHTML="<th>Summary</th>";
			rowmonthI.innerHTML="<th>Income</th>";
			rowmonthE.innerHTML="<th>Expense</th>";
		//	rowinc.innerHTML="<td></td>";
		//	rowexp.innerHTML="<td></td>";
		
		switch(filterterm) {
		case "CurrentFY":
			var yr = "Year "+new Date().getFullYear();
			var m = mSF;
			var mnth = mnthF;
		break;
		case "CurrentCY":
			var yr = "Year "+new Date().getFullYear();
			var m = mSC;
			var mnth = mnthC;
		break;

		case "NextFY":
			var yr = "Year "+new Date(new Date().setFullYear(new Date().getFullYear() + 1)).getFullYear();
			var m = mSF;
			var mnth = mnthF;
		break;
		case "NextCY":
			var yr = "Year "+new Date(new Date().setFullYear(new Date().getFullYear() + 1)).getFullYear();
			var m = mSC;
			var mnth = mnthC;
		break;
		
		case "PreviousFY":
			var yr = "Year "+new Date(new Date().setFullYear(new Date().getFullYear() - 1)).getFullYear();
			var m = mSF;
			var mnth = mnthF;
		break;
		case "PreviousCY":
			var yr = "Year "+new Date(new Date().setFullYear(new Date().getFullYear() - 1)).getFullYear();
			var m = mSC;
			var mnth = mnthC;
		break;
		}
		//Dynamically change year
		displayYear.innerHTML=yr;
		//Populate Month header
		for(var i=0;i<m.length;i++){
			var th = document.createElement("th");
				th.innerHTML=m[i];
				th.colSpan=2;
				$(th).clone().appendTo(rowmonthS);
				$(th).clone().appendTo(rowmonthI);
				$(th).clone().appendTo(rowmonthE);
		}
		element_replace(); // not sure what this is here for
	}

 

Link to comment
Share on other sites
Plugnz13 Member

Plugnz13

Posted
  • Author
Posted

Hi Mac_gyver,

Sorry, I think I've confused the question. 

Ignore the code I posted above, I have had some students work on this for me but they ran out of time so I'm trying to complete it, hence why some of the code is a bit experimental.

I have since managed to get what I want working in PHP with an onchange window.location.href element which I can then retrieve with $GET. It is quite clunky however due to the page refresh, and I'd like to see if it's possible to do it more smoothly with Javascript.

Thanks for that revised code though, that does look much more logical.

The problem I'm trying to fix is this. 

Quote

I have been trying to work out how to use javascript to change the objects inside a php array using an onchange command.

The array looks like this:

$mtharray = [4,5,6,7,8,9,10,11,12,1,2,3];

I'd like it to look like this after the onchange event has occured 

$mtharray = [1,2,3,4,5,6,7,8,9,10,11,12];

is there an easy way to approach this? 

The php array I have above is being used to retrieve data from a mysql request using a for loop to determine WHERE month ==$mtharray.  

$mtharray = [4,5,6,7,8,9,10,11,12,1,2,3];
            foreach ($mtharray as $mth) {

//fetch forecast expence cell data
                $query3= "SELECT SUM(expamount) FROM expenses WHERE expname='$expnm' AND MONTH(expstartdate) ='$mth' AND YEAR(expstartdate) = 2022 ORDER BY expstartdate" ;
                try{
                    $stmt = $mysqli->prepare($query3);
                    $stmt->execute();
                    $resultSet3 = $stmt->get_result(); 
                    $result3 = $resultSet3->fetch_all();
                }
                catch(Exception $ex){
                echo ($ex -> getMessage());
                }

this is then populating a table like this based on a fiscal year and all is good. 

image.thumb.png.8d23d8e1ce82eaa25a74ffd510acc4f8.png

what id like to do is then change that table to a fiscal year, but starting at january:

 image.thumb.png.b6a7483b688dd47ae45cb85fe5b21228.png

as I mentioned above, I've been able to achieve this successfully with php using the url variable passed with $GET to change the table with if else statements  

<form method ="post" accept-charset='UTF-8'>   
                    <select id="periodDropdown" name="period" class="btn btn-outline-primary" onchange="window.location.href=this.value">
                        <option value="?p=CFY" <?php if(isset($_GET['p']) && $_GET['p'] == 'CFY'){ ?> selected="selected" <?php } ?> >Current Fiscal Year</option>
                        <option value="?p=CCY" <?php if(isset($_GET['p']) && $_GET['p'] == 'CCY'){ ?> selected="selected" <?php } ?> >Current Calendar Year</option>
                        <option value="?p=NFY" <?php if(isset($_GET['p']) && $_GET['p'] == 'NFY'){ ?> selected="selected" <?php } ?> >Next Fiscal Year</option>
                        <option value="?p=NCY" <?php if(isset($_GET['p']) && $_GET['p'] == 'NCY'){ ?> selected="selected" <?php } ?> >Next Calendar Year</option>
                        <option value="?p=PFY" <?php if(isset($_GET['p']) && $_GET['p'] == 'PFY'){ ?> selected="selected" <?php } ?> >Previous Fiscal Year</option>
                        <option value="?p=PCY" <?php if(isset($_GET['p']) && $_GET['p'] == 'PCY'){ ?> selected="selected" <?php } ?> >Previous Calendar Year</option>
                    </select>
                </form>
 $getmth = $_GET['p'];
            if ($getmth == 'CFY' OR $getmth == 'NFY' OR $getmth == 'PFY') {
            $mtharray = [4,5,6,7,8,9,10,11,12,1,2,3];
            } else {
            $mtharray = [1,2,3,4,5,6,7,8,9,10,11,12];
            }
            foreach ($mtharray as $mth) {

I'd like to do the same with Javascript if possible, basically just switching the $mtharray data as I've shown above. 

So my question: is this possible using javascript document.getElementById() where the element is a php array rather than an id?

Hopefully that is a bit clearer this time. sorry about the confusion. 

image.png

image.png

Link to comment
Share on other sites
mac_gyver Prolific Member

mac_gyver

Posted
Posted

you are performing a search based on the expname and period. period is one of 6 possible choices, which determines the starting year/month and ending year/month for the data to match in the sql query. note: for a fiscal year from Apr 1st one year to March 31st the next year, the YEAR(expstartdate) won't be a single value. the sql query should actually build the full start date and full end date for the period that was chosen, then use a BETWEEN comparison in the query to find all the matching data.

once you get this to work using a get method form, it is easy to convert to use AJAX to submit the form and output the returned markup from the sever-side code.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.