Putting specific element into variable

Question

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

Every ID should be unique. Both form and input should not have `id="123"`. — Krycke, Sep 01 '12 at 23:53
And here's a nice jQuery answer: http://stackoverflow.com/questions/2276463/get-form-data-with-javascript-jquery — Krycke, Sep 01 '12 at 23:56
Yes, the `id` must be unique. In your case both your forms and submit button have same `id` so use class as I suggested. — Starx, Sep 02 '12 at 00:12

Starx · Answer 1 · 2012-09-02T00:13:26.483

0

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];
});

edited Sep 02 '12 at 00:13

answered Sep 01 '12 at 23:48

Starx

77,474
47
185
261

Ok great, but say i had 100 submit buttons that had text inputs attached to them, would i need to write the code your provided 100 times, or is there a way to condense it down? – Al Hennessey Sep 01 '12 at 23:51
@Arken, Are you comfortable with jQuery? I could provide a simple understandable code that way more. – Starx Sep 01 '12 at 23:53
ok that looks great, so the `var txtbox` should hold the value of the textbox? – Al Hennessey Sep 01 '12 at 23:59
@Arken, It holds the reference to whole `txtbox` you can use, `txtbox.value` to get the value. – Starx Sep 02 '12 at 00:00
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/16146/discussion-between-arken-and-starx) – Al Hennessey Sep 02 '12 at 00:26
@Arken, The reason your fiddle didn't work was because of `children` follows as per the DOM tree so, you can use `.find()` instead of `children()`. [Here](http://jsfiddle.net/DygeB/1/) is a working version – Starx Sep 02 '12 at 00:56

Krycke · Answer 2 · 2012-09-02T00:55:02.780

0

If you accept using jQuery you can do this:

DOM

<form class="form" action="false">
    <input type="text" value="some input" name="textInput" />
    <input type="text" value="some text" name="textInput2" />
    <input type="submit" class="sumbit" value="Send" />
    <div id="results"></div>
</form>

And JavaScript

$(".form").submit( function(){
    var inputs = $(this).serializeArray();
    $.each(inputs , function(i, input){
        $("#results").append(input.value + "<br />");
    });
    return false;
} );

EDIT: Updated code and Fiddle: http://jsfiddle.net/65Xtp/4/

edited Sep 02 '12 at 00:55

answered Sep 02 '12 at 00:25

Krycke

3,106
1
17
21

ok, but will the code work if i had, say 10-15 different forms, each containing their own text input and submit button? – Al Hennessey Sep 02 '12 at 00:33
They will. The event will trigger the parent specific submit buttons parent form, and just get those inputs. In this example every form needs the `class="form"`, and every submit button needs `class="submit"`, but you could as easily remove that. – Krycke Sep 02 '12 at 00:36
i tested your code, but i don't seem to get any output, i am not sure why, i just copied your code and changed the form class and submit class to my own? – Al Hennessey Sep 02 '12 at 00:39
actually i just noticed that i do get an output, it outputs the result to the header like this `?supp_bro_qty_input=123&supp_bro_add_to_cart=Submit` Is there anyway to only get the value of the text input into a variable? – Al Hennessey Sep 02 '12 at 00:44
Hi, i tried your update, but for some reason i still am not getting any output, not even in the results div, its weird, can't seem to find any reason why, thanks for your help so far. – Al Hennessey Sep 02 '12 at 01:03
Do you have names on all your inputs, and classes on the submit buttons and forms? – Krycke Sep 02 '12 at 01:14
Without more specific code I can't help you. The fiddle I made works fine, so I can't say what your problem is. Sorry. – Krycke Sep 02 '12 at 01:26

Putting specific element into variable

2 Answers2