Question

I have an HTML form which contains a drop down, a tinyMCE textarea, and a save button.
The dropdown is used to select a file to edit.

I load up the required file into the tinyMCE editor by making an ajax call when the jquery change() event is triggered from the dropdown. That works fine.

The problem I’m having is saving the file off. I am trying to do it by posting the form off to another php page which will write to the file and then send us back to the main page.

This is the php code within my writeFile.php page:

<?php
session_start();
if (!isset($_SESSION['id'])) {
    header ('Location: index.php?error=0');
}
else {
      if (isset($_POST['save'])) {
      $text = $_POST['mceContent'];
      $index = $_POST['files']; // << PROBLEM LINE!
      $array = array('homeText.txt', 'anotherText.txt');
      $fileName = $array[$index];
      $path = '../txt/'.$fileName;
      $length = strlen($text);
      echo "INDEX: $index"; // TO TEST THE INDEX VARIABLE.
      $fh = fopen($text,'w',true);
      fwrite($fh,$text,$length) or die('Could not write');
      fclose($fh);
      header ('Location: admin.php');
  }
}
?>

The $index variable is meant to be the selected index in the dropdown, however it is posted by my form as the selected string value in the dropdown.

I can think of three solutions (ordered from least likely to work to most likely)

1. There is some way to get the index from that php post?
2. I can make a change in the HTML form/select tag to tell it to post the index and not the value string
3. I change it to a jquery event, with the on-click, and pass in the index to a post manually with xhr.

If someone could help me with implementing one of these method that would be great.
If you have your own, better solution I would be happy to hear that as well.

Also note that I can’t build the path from the value string, because my dropdown uses descriptive strings, not actual file names.

Thanks in advance, bear in mind I’m new to php and especially jquery.

Answer 1

I am not sure why you can’t use the value attribute – the descriptive string would be the text portion of the option element, the filename to save could be the value:

<option value="path/to/file_to_save.php">Descriptive file name</option>

Doing it that way, the user sees the descriptive text, the server gets a useful bit of information it needs when the form posts.

If that is not an option, you could add an onSubmit event to the form in which you pass the selectedIndex property to a hidden form field, then return true and let the form submit normally.

Form snippet

<form onsubmit="return beforeSubmit()">
    <input type="hidden" name="file_index" value="" id="file_index_fld" />
    <select id="file_name_dropdown">
     <option>...</option>

Javascript snippet

var beforeSubmit = function () {
  $('#file_index_fld').val($('#file_name_dropdown').attr("selectedIndex"));
  return true;
}

… now in PHP’s $_POST variable, you’ll see $_POST['file_index'] contains the selectedIndex of the select element.

The long and short of it is that the selectedIndex property is a DOM item and not part of the POST data. No matter what, you are either going to have to intervene with javascript to add the data to POST, or modify your option elements to pass the desired data. I would always lean toward the former route as it is less complex.