Go Premium for a chance to win a PS4. Enter to Win


Using Jquery Input Element in Javascript Function

Posted on 2017-08-14
Medium Priority
Last Modified: 2017-08-19
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


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

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?
Question by:weekapaug
LVL 61

Expert Comment

ID: 42254757
need full code, or jsfiddle.net demo (or html from browser)

what is this by the way? #myVarFormID

Accepted Solution

weekapaug earned 0 total points
ID: 42254766
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
LVL 60

Expert Comment

by:Julian Hansen
ID: 42254992
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')

Author Closing Comment

ID: 42261456
figured it out
LVL 43

Expert Comment

ID: 42261903
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.


<!DOCTYPE html>
    <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>

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

Open in new window

function test(myval) {

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

Open in new window


Open in new window


Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

927 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question