Getting values from a hidden field Javascript

Hi

I currently have a hidden field that holds the User id.

The user draws an image signature and then i need to capture the users id

i am having some trouble getting the Uid to pass to the web service

      <img id="saveSignature" alt="Saved image png" />
    <button type="button" onclick="SaveImage()">
        Save Image
    </button>

* Code for Hidden Field
<asp:hiddenfield id="HiddenField" value="Hidden Field" runat="server"></asp:hiddenfield>

That s the code for the button to call the function

function signatureCapture() {

      var parent = document.getElementById("canvas");
      parent.childNodes[0].nodeValue = "";

      var canvasArea = document.createElement("canvas");
      canvasArea.setAttribute("id", "newSignature");
      parent.appendChild(canvasArea);

      var canvas = document.getElementById("newSignature");
      var context = canvas.getContext("2d");

      if (!context) {
            throw new Error("Failed to get canvas' 2d context");
      }

      screenwidth = screen.width;

      if (screenwidth < 480) {
            canvas.width = screenwidth - 8;
            canvas.height = (screenwidth * 0.63);
      } else {
            canvas.width = 464;
            canvas.height = 304;
      }

      context.fillStyle = "#fff";
      context.strokeStyle = "#444";
      context.lineWidth = 1.2;
      context.lineCap = "round";

      context.fillRect(0, 0, canvas.width, canvas.height);

      context.fillStyle = "#3a87ad";
      context.strokeStyle = "#3a87ad";
      context.lineWidth = 1;
      context.moveTo((canvas.width * 0.042), (canvas.height * 0.7));
      context.lineTo((canvas.width * 0.958), (canvas.height * 0.7));
      context.stroke();

      context.fillStyle = "#fff";
      context.strokeStyle = "#444";

      var disableSave = true;
      var pixels = [];
      var cpixels = [];
      var xyLast = {};
      var xyAddLast = {};
      var calculate = false;
      //functions
      {
            function remove_event_listeners() {
                  canvas.removeEventListener('mousemove', on_mousemove, false);
                  canvas.removeEventListener('mouseup', on_mouseup, false);
                  canvas.removeEventListener('touchmove', on_mousemove, false);
                  canvas.removeEventListener('touchend', on_mouseup, false);

                  document.body.removeEventListener('mouseup', on_mouseup, false);
                  document.body.removeEventListener('touchend', on_mouseup, false);
            }

            function get_board_coords(e) {
                  var x, y;

                  if (e.changedTouches && e.changedTouches[0]) {
                        var offsety = canvas.offsetTop || 0;
                        var offsetx = canvas.offsetLeft || 0;

                        x = e.changedTouches[0].pageX - offsetx;
                        y = e.changedTouches[0].pageY - offsety;
                  } else if (e.layerX || 0 == e.layerX) {
                        x = e.layerX;
                        y = e.layerY;
                  } else if (e.offsetX || 0 == e.offsetX) {
                        x = e.offsetX;
                        y = e.offsetY;
                  }

                  return {
                        x : x,
                        y : y
                  };
            };

            function on_mousedown(e) {
                  e.preventDefault();
                  e.stopPropagation();

                  canvas.addEventListener('mousemove', on_mousemove, false);
                  canvas.addEventListener('mouseup', on_mouseup, false);
                  canvas.addEventListener('touchmove', on_mousemove, false);
                  canvas.addEventListener('touchend', on_mouseup, false);

                  document.body.addEventListener('mouseup', on_mouseup, false);
                  document.body.addEventListener('touchend', on_mouseup, false);

                  empty = false;
                  var xy = get_board_coords(e);
                  context.beginPath();
                  pixels.push('moveStart');
                  context.moveTo(xy.x, xy.y);
                  pixels.push(xy.x, xy.y);
                  xyLast = xy;
            };

            function on_mousemove(e, finish) {
                  e.preventDefault();
                  e.stopPropagation();

                  var xy = get_board_coords(e);
                  var xyAdd = {
                        x : (xyLast.x + xy.x) / 2,
                        y : (xyLast.y + xy.y) / 2
                  };

                  if (calculate) {
                        var xLast = (xyAddLast.x + xyLast.x + xyAdd.x) / 3;
                        var yLast = (xyAddLast.y + xyLast.y + xyAdd.y) / 3;
                        pixels.push(xLast, yLast);
                  } else {
                        calculate = true;
                  }

                  context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y);
                  pixels.push(xyAdd.x, xyAdd.y);
                  context.stroke();
                  context.beginPath();
                  context.moveTo(xyAdd.x, xyAdd.y);
                  xyAddLast = xyAdd;
                  xyLast = xy;

            };

            function on_mouseup(e) {
                  remove_event_listeners();
                  disableSave = false;
                  context.stroke();
                  pixels.push('e');
                  calculate = false;
            };

      }//end

      canvas.addEventListener('mousedown', on_mousedown, false);
      canvas.addEventListener('touchstart', on_mousedown, false);
}

function signatureSave() {

      var canvas = document.getElementById("newSignature");
      // save canvas image as data url (png format by default)
      var dataURL = canvas.toDataURL("image/png");
      document.getElementById("saveSignature").src = dataURL;
};

function signatureClear() {

      var parent = document.getElementById("canvas");
      var child = document.getElementById("newSignature");
      parent.removeChild(child);

      signatureCapture();

}

function signatureSend() {

      var canvas = document.getElementById("newSignature");
      var dataURL = canvas.toDataURL("image/png");
      document.getElementById("saveSignature").src = dataURL;
      var sendemail = document.getElementById('sendemail').value;
      var replyemail = document.getElementById('replyemail').value;

      var form = document.createElement("form");
      form.setAttribute("action", "upload_file.php");
      form.setAttribute("enctype", "multipart/form-data");
      form.setAttribute("method", "POST");
      form.setAttribute("target", "_self");
      form.innerHTML = '<input type="text" name="image" value="' + dataURL + '"/>' + '<input type="email" name="email" value="' + sendemail + '"/>' + '<input type="email" name="replyemail" value="' + replyemail + '"/>';
      form.submit();

}

function SaveImage() {
    var canvas = document.getElementById("newSignature");
    // save canvas image as data url (png format by default)
    var dataURL = canvas.toDataURL("image/png");
    var image = document.getElementById("saveSignature").src = dataURL;
    var name = document.getElementById("ctl00_PageContent_txtName").value;
    var Uid = document.getElementById("HiddenField").value;
    image = image.replace('data:image/png;base64,', '');

    $.ajax({
 
        url: 'CaptureSignature.aspx/UploadImage',
        data: "{ 'imageData': '" + image + "','name':'"+ name +"','Uid':'" + 4 +"' }",
        dataType: "json",
        type: 'POST',
        contentType: 'application/json; charset=utf-8',

       

        success: function (msg) {
            alert('Quote saved successfully !');
            window.location.href = "Home.aspx"
           
            //failure: function (errmsg) {
           // }
        }

    });
}
EasyToHelpAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Big MontyWeb Ninja at largeCommented:
try changing

var Uid = document.getElementById("HiddenField").value;

to

var Uid = document.getElementById("<%=HiddenField.ClientID%>").value;

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.