September 2, 2012

Putting specific element into variable

Question by Arken

how can i get a specific element of a text input into a variable via javascript, in other words take the example below

   <form id="123">

        <input type="text" id="supply_qty" />

     <input type="submit" name="submit" id="123" />
  </form>

How do i get the element within the text input into a variable when the submit button is clicked, the problem i have is that i have multiple instances of the code above, with lots of text inputs, so i only want to get the element specific to the submit button clicked. Hopefully you will get what i mean. The reason i need this done via JavaScript and not php etc… is that i later want to use ajax with it, but for the moment i just need the variable.

Thanks

Answer by Starx

The most easiest way is to give and id to the element and user getElementById() method to grab the element on variable. Just like what you are doing right now

Simple Example:

var button = document.getElementyById("123");
button.onclick = function() {
    var text = document.getElementById('supply_qty'); //now you got your element in varaiblle
};

Using jQuery make a slight change to your markup. I am just going to add some classes.

   <form>
        <input type="text" class="textbox" />
        <input type="submit" class="submit" name="submit" />
  </form>

then

$(".submit").click(function() {
    var txtbox = $(this).parent("form").children(".textbox")[0];
});

Or, it might be better to bind to the submit handler of the form, on that case, give a common class to the form.

   <form class="tinyforms">
        <input type="text" class="textbox" />
        <input type="submit" class="submit" name="submit" />
   </form>

Then

$('.tinyforms').submit(function() {
    var txtbox = $(this).children(".textbox")[0];
});

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!