Using Javascript to set dynamic value for forms

[eluser]boony[/eluser]
Hi,

I'm trying to pass a value to a hidden field in a form dynamically with javascript. Essentially, the user needs to select a number of images to upload to server and a form is built dynamically with javascript. The number of files is then passed to the hidden field by setting the value with set attribute. This value along with all other form values should then be posted to the controller.

Now, this has all been tested and works outside of CI. I can get a simple script to run and upload the files and update the database no problem. However, when I implement the same code within CI I can't get the hidden value to be set to the number of files.

I am setting the value of the hidden fields like so:

Code:

document.getElementById("filesnum").setAttribute("value", $filesnum);

where $filesnum is the javascript value (not a php value

This is an urgent job so if anyone has any thoughts they would be most welcome.

Cheers
Boony

[eluser]PravinS[/eluser]
try using

document.getElementById("filesnum").value = $filesnum;

instead of

document.getElementById("filesnum").setAttribute("value", $filesnum);

[eluser]boony[/eluser]
Hi,

Thanks for your reply, unfortunately that didn't make any difference. As I noted above this script works perfectly outside of CI but fails in CI.

But adding to the issue I find that none of the values and field names set by my javascript are put into the $_POST array.

So it seems that CI is not picking up the field names and values that are built dynamically with the javascript.

So my question is really, how do I get CI to see the dynamic form that is built by javascript and include those in the $_POST array???

TIA
Boony

[eluser]PravinS[/eluser]
Try debugging using some of the ways

Print the post array using : print_r($_POST)
Create you dynamic form in form tag
Or give fieldname and id as array name(fieldname[]) and try to print the post array

may this will help you to debug the code

[eluser]TheFuzzy0ne[/eluser]
So your file upload is dependent on Javascript? What if the hidden form field is manipulated by the user?

Can you not just use <input type="file" name="userfile" multiple="" />? The files will be uploaded together, in an array. You can then count the array on the server side.

[eluser]boony[/eluser]
Hi,

Well, as stated above, I'm building part of a form dynamically using some javascript. The user enters the number of images to upload into an input field. The script then creates the number of required input fields. Here is the js function to do this.

Code:

function BuildFormFields($num)
  {
    var
      $container = document.getElementById('FormFields'),
     $item, $field, $i;

      $filesnum = $num + 2; //I need to add 2 to this original value and post the new value back to the hidden field
      document.getElementById("filesnum").value = $filesnum;

    $container[removed] = '';
    for ($i = 0; $i < $num; $i++)
    {
      $item = document.createElement('div');
      $item.style.margin = '3px';

      $field = document.createElement('span');
      $field[removed] = 'Image';
      $field.style.marginRight = '10px';
      $item.appendChild($field);

      $field = document.createElement('input');
      $field.name = 'fileupload' + ($i + 3); [b]//this value is not sent to the controller as expected [/b]
      $field.type = 'file';
      $field.className = 'btn'
      $item.appendChild($field);

      $field = document.createElement('span');
      $field[removed] = 'Image caption';
      $field.style.margin = '0px 10px';
      $item.appendChild($field);

      $field = document.createElement('input');
      $field.name = 'caption' + ($i + 3);
      $field.type = 'text';
      $item.appendChild($field);


      $container.appendChild($item);
      // $filesnum = $num + 2;
      // document.getElementById("filesnum").setAttribute("value", $filesnum);
    }

  }

However, when the images are selected and the form submitted the field names or any values created dynamically via the javascript are not passed to the $_POST array. When I test this process in a simple form and post to a simple php file this works as expected. The dynamically created field names and values are passed to the $_POST array and available in the php file.

So, for some reason, CI is not reading the dynamically created field names etc. Why is this so?

[eluser]TheFuzzy0ne[/eluser]
Is your form a multipart form?

I still think you'll make it much easier using <input type=“file” name=“userfile” multiple=”“ />. It has the following benefits:

* It saves you from writing Javascript
* It allows users to select multiple files to upload by holding CTRL whilst clicking.
* The user doesn't have to figure out how many files they want to upload in advance. What happens if I think I have 9 images to upload, and then, after setting up each file upload, I realise it's actually 10? Won't your script add another 10 input fields, and also cause duplicate field names?

If you insist on doing it your way, you'd be much better off using an array for the file uploads. Then the server will know exactly how many files there are, and your Javascript doesn't even need to know how many upload fields there are. It can just happily append more.

Personally, I've never been keen on non-degradable Javascript, and I don't see the point in making your life more difficult than it needs to be. Sorry...

[eluser]boony[/eluser]
Ahhh, but what you fail to realise here is, you are dealing with a total incompetent fool

I did have some reason to do it my way, because I needed a way to allow the user to add a caption to each image so that I could save the image name to an image table along with the caption. Still can't think of a easy solution to complete that task.

But some how I have lived a life of ignorant bliss as to the notion of a input that allows multiple files to be uploaded from a single field. And I'm sure I've studied the HTML5 form fields in the past. So your point is well taken...doh!! hut:

But but but....what of the mystery of the fact that CI didn't see the dynamically generated value for the hidden field??? Still got no clue on that one (which is but one of a long long list)

Boony

[eluser]TheFuzzy0ne[/eluser]
Please post your controller code. The only time CI won't see submitted form fields is if they haven't been submitted.

Also, have you tried enabling the profiler? At the top of your controller method, paste this:

Code:

$this->output->enable_profiler(TRUE);

Now when you submit the form, the profiler should show you exactly what fields were submitted to the server.

[eluser]TheFuzzy0ne[/eluser]
In fact, if you could post your view too, I might be able to replicate your problem.