Javascript: assign/pass a value to a inputbox

Question

I have this javascript for slider, my problem is i cant assign/pass the value of the slider to a inputbox. I already tried using this scripT "document.getElementByID('total').value = pos" in my javascript, but it didnt pass anything. any idea guys? Thanks in advance!

HTML CODE:

< input type="hidden" id="total" value="" style="border:0; color:#f6931f; font-weight:bold;" runat="server" />

JAVASCRIPT FUNCTION:

window.addEvent('domready', function() 
    {
        var mySlideB = new Slider($('slider_gutter_1'), $('slider_knob_1'),         $('slider_bkg_img_1'),
        {
            start: 1,
            end: 100,
            offset: 10,
            onChange: function(pos)
            {
                if (pos <= 10) {
                    $('slider_desc_value').setHTML("Not Important");
                }
                else if ((pos >= 11) && (pos <= 40)) {
                    $('slider_desc_value').setHTML("Partially Important");
                }
                else if ((pos >= 41) && (pos <= 60)) {
                    $('slider_desc_value').setHTML("Important");
                }
                else if ((pos >= 61) && (pos <= 85)) {
                    $('slider_desc_value').setHTML("Very Important");
                }
                else if (pos > 85) {
                    $('slider_desc_value').setHTML("Critical to our business");
                }

                $('slider_current_val').setHTML(pos + ' %');
                $('testjp').setHTML(pos);    

                                    // THIS IS NOT WORKING, HELP?
                **document.getElementById('total').value = pos;**

                                    //This work c/o Ravi. THanks!
                                    document.forms["form1"]["total"].value = pos;

            }
        }, null).setMin(1);

        $('slider_current_val').setHTML(100 + ' %');
    });

Try document.getElementById instead of document.getElementByID — jantimon
– jantimon, Commented Oct 14, 2011 at 8:19

ravi404 · Accepted Answer · 2011-10-14 08:54:40Z

2

Instead try this, give a name to your input and your form i.e

<form name="form"><input type="hidden" name="total"/></form>

and try this

document.forms["form"]["total"].value = xxx;

answered Oct 14, 2011 at 8:54

ravi404

7,3094 gold badges34 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user994991 Over a year ago

Thanks Ravi! this work perfect! finally.. document.forms["form1"]["total"].value = pos; =)

Jayantha Lal Sirisena · Accepted Answer · 2011-10-14 08:25:49Z

1

Try this,

$('#total').val(pos);

and check whether your onChange function is called by putting an alert inside the function.

change your function like thi,

$(document).ready(function(){

//your code here...
});

instead of window.addEvent('domready', function()

edited Oct 14, 2011 at 8:25

answered Oct 14, 2011 at 8:17

Jayantha Lal Sirisena

21.4k11 gold badges74 silver badges94 bronze badges

2 Comments

user994991 Over a year ago

thanks for the quick response. unfortunately, the code you mention didn't pass anything to the inputbox (total). i did also get an error when inspecting the element. "uncaught Typerror; Cannot call method 'val' of null" =(

Cystack Over a year ago

check my answer, I think your input doesn't even exist

Sitnam · Accepted Answer · 2011-10-14 08:39:14Z

1

The input has a runat="server" property, because of this the ASP.Net engine could be assigning the ID.

Just as a suggestion view the source of you application and you will see if the ID has changed.

if so the fix is easy.

document.getElementById('<%= total.ClientID %>').value = pos

or as the other two answers suggested

$('#<%=total.ClientID%>').val(pos);

Hope this helps.

regards.

edited Oct 14, 2011 at 8:39

answered Oct 14, 2011 at 8:23

Sitnam

1646 bronze badges

2 Comments

user994991 Over a year ago

Thanks for your suggestion, but when i tried the first and second code both didnt pass anything, also noticed the error when i inspected the element of the page "Uncaught Typerror; Object #<HTMLDocument> has no method 'getElementByID'" and "uncaught Typerror; Cannot call method 'val' of null".. TIA!

Sitnam Over a year ago

As "Cystack" mentioned, "getElementByID" does not exist. is "getElementById".

akhilless · Accepted Answer · 2011-10-14 08:19:05Z

0

why do not you use

$('#total').val(pos);

It should do the trick

answered Oct 14, 2011 at 8:19

akhilless

3,2191 gold badge21 silver badges25 bronze badges

1 Comment

user994991 Over a year ago

i already tried that but i didnt pass anything. also got an error when inpecting the element on the page. "uncaught Typerror; Cannot call method 'val' of null".

Cystack · Accepted Answer · 2011-10-14 08:33:11Z

0

Are you even sure that your input exists ? The tag is not well formed, you have a space between < and input. And the correct command is getElementById, not ID.

Your javascript is correct, this put aside.

edited Oct 14, 2011 at 8:33

answered Oct 14, 2011 at 8:23

Cystack

3,6216 gold badges37 silver badges35 bronze badges

1 Comment

user994991 Over a year ago

yes my input exists. here's the code "<input type="hidden" id="total" value="" style="border:0; color:#f6931f; font-weight:bold;" runat="server" />". I did edited the tag getElementById. i just mistyped it when posting the question. will try it again. thanks

Collectives™ on Stack Overflow

Javascript: assign/pass a value to a inputbox

5 Answers 5

1 Comment

2 Comments

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related