How to pass javascript variable value from .aspx page to .ashx page

Question

I am trying to pass some JavaScript variable value from .aspx file to .ashx file when user uploads a document in the web form. The web form is a .aspx file and the uploading functionality is in .ashx file. So I need to pass the variables from .aspx file to .ashx file.

I was able to pass three variables but when I try to pass the fourth one then it does not work. It does not give any error but just do not pass any of the variables. When I debug the code I can see the debugger does not enters the process of upload. And the upload button also changes

This is my .aspx page code.

<%@ Page Title="" Language="VB" MasterPageFile="~/_resx/E4.master" AutoEventWireup="true" CodeFile="new.aspx.vb" Inherits="E4_Jobs_new" ValidateRequest="false" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">
     <script type="text/javascript">
         var id = '<%= ModeID%>', mode = '<%= Mode%>', employer = '<%= Employer.Name %>', jtitle = document.getElementById(<%= txtTitle.ClientID%>);
     </script>

 <asp:RequiredFieldValidator runat="server" ControlToValidate="txtTitle" Display="None" ErrorMessage="xx" ValidationGroup="NewJob" EnableViewState="False" />
     <div class="form-element">
          <input type="text" id="txtTitle" runat="server" maxlength="64" /></div>

          <div class="m-accor-body">
                <ul id="attachmentList">
                    <% For Each additionalDoc As DataRow In Vacancy.Attachemnts.Rows%>
                    <li id="da<%= additionalDoc.Item("id") %>">
                        <span><%= additionalDoc.Item("name") %></span>
                        <span class="rd" data-did="<%= additionalDoc.Item("id")%>"> remove</span>
                    </li>
                    <%Next%>
                </ul>
                <div id="queue"></div>
                <input id="file_upload" name="file_upload" type="file">
           </div>
</asp:Content>

And this is the code in the .aspx file where I am passing the variables into .ashx file

$(function () {

        dimNav('vacancy');

        $('#file_upload').uploadify({
            'buttonClass': 'button2',
            'buttonText': 'Select a PDF or DOCX file to upload..',
            'width': 250,
            'fileTypeExts': '*.pdf; *.doc; *.docx',
            'formData': {
                'draftId': id,
                'type': mode,
                'employer': employer,
                'jtitle': jtitle

            },
            'uploadLimit': 6,
            'swf': '/_resx/uploadify.swf',
            'uploader': '/e4/jobs/upload-job-attachments.ashx',
            'onUploadSuccess': function (file, data, response) {
                $('#attachmentList').append('<li id="da' + data + '"><span>' + file.name + '</span><span class="rd" data-did="' + data + '"> remove</span></li>');
            }
        });
    });

The first three variables values are obtained differently than the fourth one. In the fourth one I used javascript function to get the value (as it is the input value given by the user. Not a value stored already in database. ) .

This is my code for in the upload-job-attachments.ashx file where I retrieve the values

 Public Class upload_job_attachments : Implements IHttpHandler

Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
    context.Response.ContentType = "text/plain"
    context.Response.Expires = -1
    Try

        Dim Id As Integer = CInt(context.Request("draftid"))
        Dim type As String = CStr(context.Request("type"))
        Dim empname As String = CStr(context.Request("employer"))
        Dim postedFile As HttpPostedFile = context.Request.Files("Filedata")

          ********** other lines of code ***********

  End Sub
End Class

what can I do to overcome the problem. I am weak in advanced javascript functionalities. I appreciate your help

---

Addition

The whole script looks like

      $(function () {
        dimNav('vacancy');

        var jobTitle = $('#' + '<%= txtTitle.ClientID%>').val();

        $('#file_upload').uploadify({
            'buttonClass': 'button2',
            'buttonText': 'Select a PDF or DOCX file to upload..',
            'width': 250,
            'fileTypeExts': '*.pdf; *.doc; *.docx',
            'formData': {
                'draftId': id,
                'type': mode,
                'employer': employer,
                'jtitle': jobTitle

            },
            'uploadLimit': 6,
            'swf': '/_resx/uploadify.swf',
            'uploader': '/e4/jobs/upload-job-attachments.ashx',
            'onUploadSuccess': function (file, data, response) {
                $('#attachmentList').append('<li id="da' + data + '"><span>' + file.name + '</span><span class="rd" data-did="' + data + '"> remove</span></li>');
                alert($('#' + '<%= txtTitle.ClientID%>').val());
            }
        });

        $('body').on('click', '.rd', function () {
            var el = $(this);
            $.post('delete-job-attachment.ashx?id=' + el.attr('data-did'), '{}', function () {
                $('#da' + el.attr('data-did')).remove();
            });
        });


        $('.price-button').click(function () { $(this).next('.price-list').fadeToggle('slow'); });

        $('.m-lists table tr:nth-child(4) td:nth-child(1)').prepend('<div>Multiple job posting</div>');

        $('.jMedias').change(function () {
            suffleMedias();
        });

        var suffleMedias = function () {
            var mids = [];
            $('.jMedias:checked').each(function () {
                mids.push($(this).val());
            });
            $('.mediaLists').val(mids.toString());
        };


        $('.jType').change(function () {
            suffleJobType();
        });


        $('input:radio.p-option-radio').change(function () {
            var pOption = $(this).val();
            $('.p-option').val(pOption);
        });

        var suffleJobType = function () {
            var type = $('.jType').val();
            if (type == 0) {
                $('#contractLength, #jobHour').slideUp();
            } else if (type == 1) {
                $('#jobHour').slideDown();
                $('#contractLength').slideUp();
            } else if (type == 2) {
                $('#jobHour').slideDown();
                $('#contractLength').slideUp();
            } else if (type == 3) {
                $('#contractLength, #jobHour').slideDown();
            }

        };

        var suffleFeeType = function () {
            var fType = $('.feeType').val();

            if (fType == 0) {
                $('#salaryRateMax, #salaryRateMin, #agencyFee').slideDown();
            } else if (fType == 1) {
                if (parseFloat($('.referrerPercentage option:selected').text()) > 0) {
                 } else {
                    $('#salaryRateMax, #salaryRateMin').slideUp();
                }
                $('#agencyFee').slideDown();
            } else if (fType == 2) {
                $('#agencyFee').slideUp();
                if (parseFloat($('.referrerPercentage option:selected').text()) > 0) {
                 } else {
                    $('#salaryRateMax, #salaryRateMin').slideUp();
                }
            }
        };

        $('.feeType').change(function () {
            suffleFeeType();

        });
        $('.referrerPercentage').change(function () {
            if (parseFloat($('.referrerPercentage option:selected').text()) > 0) {
                $('#salaryRateMax, #salaryRateMin').slideDown();
            } else {
                if ($('.feeType').val() == 1) {
                    $('#salaryRateMax, #salaryRateMin').slideUp();
                }
            }
        });


        $('.calcFee').change(function () {
            CalculateAndDisplayFees();
        });


        $('.rAgency').chosen().change(function () {
            if ($(this).val() != '-1') {
                $('.psls').val('-1').trigger("liszt:updated");
                $('.retained').val('1');
            }
        });

        $('.psls').chosen().change(function () {
            if ($(this).val() != '-1') {
                $('.rAgency').val('-1').trigger("liszt:updated");
                $('.retained').val('0');
            }
        });


        var setPublishOption = function () {
            var p = $('.p-option').val();
            var $radios = $('input:radio.p-option-radio');
            $radios.filter('[value=' + p + ']').attr('checked', true);
        };


        suffleJobType();
        suffleFeeType();
        suffleMedias();
        CalculateAndDisplayFees();
        setPublishOption();
    });

Answer 1

If, for instance, the jtitle field needs to come from an input control, you can do:

'formData': {
    'jtitle': $("#somecontrol").val()
}

Which will get the value from a control. Is that what you mean?