• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 87
  • Last Modified:

Using Jquery Input Element in Javascript Function

I have a form that posts via javascript / jquery / ajax

I am trying to validate some fields server side before actual submission I was doing this to set the variable

myVar=$('#myVarFormID').val();

Open in new window


when I check the console, my variable is set appropriately and shows as intended, but when I go like this after setting it
nextFunction(myVar);

Open in new window


The function thinks the variable is [htmlInputElement]

I dont understand why the output shows fine but the script function wont take it in.  Is there something extra I need to do to pass this form element into a different function?
0
weekapaug
Asked:
weekapaug
1 Solution
 
HainKurtSr. System AnalystCommented:
need full code, or jsfiddle.net demo (or html from browser)

what is this by the way? #myVarFormID
0
 
weekapaugAuthor Commented:
I already figured it out. I suspected I couldnt mix jQuery with javascript so when I set the variable with

document.getElementById('myVarFormID').value instead of the previous jquery code it worked
0
 
Julian HansenCommented:
I suspected I couldnt mix jQuery with javascript so when I set the variable with

document.getElementById('myVarFormID').value instead of the previous jquery code it worked
This does not make sense - jQuery is JavaScript - anything you set with one is available in the other.

To access the underlying Dom element from a jQuery object all you need to do is provide an index
var element = $('#someid');

Open in new window

Then element[0] is the same as document.getElementById('someid')
0
 
weekapaugAuthor Commented:
figured it out
0
 
RobOwner (Aidellio)Commented:
Further to Julian's comment, it should be noted that there is an error in the asker's code (that's not posted) as the code in the question does work when taken on its own.  In other words, it is wrong to assume that document.getElementById('myVarFormID').value will solve the issue.

https://jsbin.com/poqiteh/edit?html,js,console

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

  </head>
  <body>
    <form action="">
      <input type="hidden" value="somevalue" id="myVarFormID"/>
    </form>
  </body>
</html>

Open in new window


function test(myval) {
  console.log(myval);
}

$(function() {
  var myval = $('#myVarFormID').val();
  test(myval);
})

Open in new window


Outputs:
somevalue

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now