1

I am trying to get the value of a form from my javascript, but the value continues to return undefined as if the input does not exist.

Here is the html

%@ Language="VBScript" CodePage=65001 %>

<%
plan = Request("plan")
If plan = "" Then plan = "1"
modelid = Request("modelid")
If modelid = "" Then modelid = "0"


'plan = Request.Form("plan")
'If plan = "" Then plan = "1"
'modelid = Request.Form("modelid")
'If modelid = "" Then modelid = "0"
'Response.Write("plan= " & plan)
'Response.Write("modelid= " & modelid)
%>


<html>
    <head>
        ...   

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.csv.js" charset="UTF-8"></script>

<script type="text/javascript">
    console.log(document.form1.plan.value);
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-16620217-8']);
    _gaq.push(['_trackPageview']);

    (function () {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();

</script>

...

</head>
     <body onLoad="...">
 ...
         <form NAME="form1" action="result_ct.asp" method="post" style="margin:0;">
    <div id="container">
    <section id="model-select">
        <div class="content">

            <dl>
                <dt>車両・モデル</dt>
                <dd>
                    <div class="dropdown">
                    <select name="model" id="model" onChange="calc_price_with_tax(); addComma2(); changeinstallments();">
                    </select>
                    </div>
                </dd>
            </dl>
            <dl>
                <dt>ファイナンスプログラム</dt>
                <dd>
                    <div class="dropdown">
                    <select name="planselect" id="planselect" onchange="changeplan(this)">
                    <option>シトロエン・オートローン</option>
                    <option>シトロエン・パスポート</option>
                    </select>
                    </div>
                </dd>
            </dl>
        <div class="question">
            <p><a href="http://www.citroen.jp/finance/auto_loan/" target="_blank"><img src="images/question_03.png" alt="question-mark">シトロエン・オートローンに関して詳しくはこちら</a></p>
            <p><a href="http://www.citroen.jp/finance/passport/" target="_blank"><img src="images/question_03.png" alt="question-mark">シトロエン・パスポートに関して詳しくはこちら</a></p>
        </div>
        </div>
    </section>
    <section id="config">
        <div class="content">
            <dl class="header-text">
                <dt>設定項目</dt>
                <dd>設定金額</dd>
            </dl>
            <dl class="text-box-L downpaymentform">
                <dt>車両本体価格<br>(消費税抜き車両本体価格)</dt>
                <input type="hidden" name="text_price_with_tax" id="text_price_with_tax" size="10" maxlength="7">
                <input type="hidden" name="text_price" id="text_price" size="10" maxlength="7">
                <input type="hidden" name="text_lastpayment37" size="10" maxlength="7">
                <input type="hidden" name="text_lastpayment61" size="10" maxlength="7">
                <dd><p><span id="text_price_with_tax2">4,340,000円</span><br>(<span id="text_price2" class="f10px">1,983,333</span><span class="f10px">円)</span></p></dd>
            </dl>
            <dl class="downpaymentform">
                <dt>ご購入サポート</dt>
                <input type="hidden" name="support" id="support">
                <input type="hidden" name="supported_price_with_tax" id="supported_price_with_tax">
                <dd><p class="blue"><span id="supported_price" class="btxt maintxt">-100,000</span><span class="f10px">&nbsp;円</span><br /><br /></span></p></dd>
            </dl>
            <dl class="text-box-L downpaymentform">
                <dt>ご購入サポート適用後 メーカー希望小売価格<br class="sp-dn">
                    (消費税抜き車両本体価格)</dt>
                <dd><p id="purchase-support-div"><span id="supported_price_with_tax" class="f12pxb">2,550,000</span><span class="f10px">&nbsp;円</span><br /><span class="f08px"></span>(<span style="font-size:12px !important" id="supported_price_without_tax" class="f08px">2,361,112</span><span class="f08px">&nbsp;円)</span></p></dd>
            </dl>
            <dl class="downpaymentform">
                <dt>金利(実質年率)</dt>
                <input type="hidden" name="rate" value="2.39">
                <dd><p><span name="rate" id="rate">2.39%</span></p></dd>
            </dl>
            <dl class="passport downpaymentform">
                <dt>シトロエン・パスポート</dt>
                <dd>
                    <div class="dropdown2">
                    <select name="installments" id="installments" onChange="changeinstallments()">
                        <option>3</option>
                            <option>5</option>
                                    </select>
                    </div>
                </dd>
            </dl>
            <dl class="downpaymentform">
                <dt>頭金</dt>

                <dd><div class="input"><input type="text" name="downpayment" size="10" maxlength="7" class="blue"><p>円</p></div></dd>
            </dl>
            <dl class="downpaymentform">
                <dt>諸費用・オプション代など</dt>
                <dd><div class="input"><input type="text" name="optionprice" size="10" maxlength="7" class="blue"><p>円</p></div></dd>
            </dl>
            <dl class="lastpaymentform">
                <dt>ボーナス加算額</dt>
                <dd><div class="input"><input type="text" name="bonus" size="10" maxlength="6" class="blue"><p>円</p></div></dd>
            </dl>
        </div>

    <input onClick="Precheck()" type="submit" value="シミュレーションしてみる" id="simulation-button">
    ...

</form>
    </section>

I have this code console.log(document.form1.plan.value); that I am using to check the value of the input and my list of inputs is at the bottom of the html.

I am banging my head against a wall trying to trace this issue down so any answer is greatly appreciated

programmer5000
  • 888
  • 11
  • 32
Top-Bot
  • 642
  • 1
  • 6
  • 17
  • It might help to start giving pure html. It seems you're using some VB generated html, I might want to try answering your question but only if you can present the problem using actual html, preferably with jsfiddle or alike. – Sventies Jun 06 '17 at 14:05

1 Answers1

2

Move your scripts that depend on parts of the page being ready to the bottom.

Right before the closing </body> tag.

...


<html>
    <head>
        ...   

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.csv.js" charset="UTF-8"></script>

<script>
//analytics code goes here
//anything that needs to access the document needs to be below
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-16620217-8']);
_gaq.push(['_trackPageview']);

(function () {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();</script>


<!-- ====================== Moved from here... ====================== -->

...

</head>
     <body onLoad="...">
 ...
         <form NAME="form1" action="result_ct.asp" method="post" style="margin:0;">
    <div id="container">
    <section id="model-select">
        <div class="content">

            <dl>
                <dt>車両・モデル</dt>
                <dd>
                    <div class="dropdown">
                    <select name="model" id="model" onChange="calc_price_with_tax(); addComma2(); changeinstallments();">
                    </select>
                    </div>
                </dd>
            </dl>
            <dl>
                <dt>ファイナンスプログラム</dt>
                <dd>
                    <div class="dropdown">
                    <select name="planselect" id="planselect" onchange="changeplan(this)">
                    <option>シトロエン・オートローン</option>
                    <option>シトロエン・パスポート</option>
                    </select>
                    </div>
                </dd>
            </dl>
        <div class="question">
            <p><a href="http://www.citroen.jp/finance/auto_loan/" target="_blank"><img src="images/question_03.png" alt="question-mark">シトロエン・オートローンに関して詳しくはこちら</a></p>
            <p><a href="http://www.citroen.jp/finance/passport/" target="_blank"><img src="images/question_03.png" alt="question-mark">シトロエン・パスポートに関して詳しくはこちら</a></p>
        </div>
        </div>
    </section>
    <section id="config">
        <div class="content">
            <dl class="header-text">
                <dt>設定項目</dt>
                <dd>設定金額</dd>
            </dl>
            <dl class="text-box-L downpaymentform">
                <dt>車両本体価格<br>(消費税抜き車両本体価格)</dt>
                <input type="hidden" name="text_price_with_tax" id="text_price_with_tax" size="10" maxlength="7">
                <input type="hidden" name="text_price" id="text_price" size="10" maxlength="7">
                <input type="hidden" name="text_lastpayment37" size="10" maxlength="7">
                <input type="hidden" name="text_lastpayment61" size="10" maxlength="7">
                <dd><p><span id="text_price_with_tax2">4,340,000円</span><br>(<span id="text_price2" class="f10px">1,983,333</span><span class="f10px">円)</span></p></dd>
            </dl>
            <dl class="downpaymentform">
                <dt>ご購入サポート</dt>
                <input type="hidden" name="support" id="support">
                <input type="hidden" name="supported_price_with_tax" id="supported_price_with_tax">
                <dd><p class="blue"><span id="supported_price" class="btxt maintxt">-100,000</span><span class="f10px">&nbsp;円</span><br /><br /></span></p></dd>
            </dl>
            <dl class="text-box-L downpaymentform">
                <dt>ご購入サポート適用後 メーカー希望小売価格<br class="sp-dn">
                    (消費税抜き車両本体価格)</dt>
                <dd><p id="purchase-support-div"><span id="supported_price_with_tax" class="f12pxb">2,550,000</span><span class="f10px">&nbsp;円</span><br /><span class="f08px"></span>(<span style="font-size:12px !important" id="supported_price_without_tax" class="f08px">2,361,112</span><span class="f08px">&nbsp;円)</span></p></dd>
            </dl>
            <dl class="downpaymentform">
                <dt>金利(実質年率)</dt>
                <input type="hidden" name="rate" value="2.39">
                <dd><p><span name="rate" id="rate">2.39%</span></p></dd>
            </dl>
            <dl class="passport downpaymentform">
                <dt>シトロエン・パスポート</dt>
                <dd>
                    <div class="dropdown2">
                    <select name="installments" id="installments" onChange="changeinstallments()">
                        <option>3</option>
                            <option>5</option>
                                    </select>
                    </div>
                </dd>
            </dl>
            <dl class="downpaymentform">
                <dt>頭金</dt>

                <dd><div class="input"><input type="text" name="downpayment" size="10" maxlength="7" class="blue"><p>円</p></div></dd>
            </dl>
            <dl class="downpaymentform">
                <dt>諸費用・オプション代など</dt>
                <dd><div class="input"><input type="text" name="optionprice" size="10" maxlength="7" class="blue"><p>円</p></div></dd>
            </dl>
            <dl class="lastpaymentform">
                <dt>ボーナス加算額</dt>
                <dd><div class="input"><input type="text" name="bonus" size="10" maxlength="6" class="blue"><p>円</p></div></dd>
            </dl>
        </div>

    <input onClick="Precheck()" type="submit" value="シミュレーションしてみる" id="simulation-button">
    ...

</form>
    </section>

<!-- ====================== ...to here ====================== -->
<script type="text/javascript">
    console.log(document.form1.plan.value);
    /* ====================== INSERT JS HERE ====================== */

</script>
</body>
</html>

Example:

<html>
    <head>
           

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.csv.js" charset="UTF-8"></script>

<script>
//analytics code goes here
//anything that needs to access the document needs to be below
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-16620217-8']);
_gaq.push(['_trackPageview']);

(function () {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();</script>


<!-- ====================== Moved from here ====================== -->



</head>
     <body onLoad="">
 
         <form NAME="form1" action="result_ct.asp" method="post" style="margin:0;">
    <div id="container">
    <section id="model-select">
        <div class="content">

            <dl>
                <dt>車両・モデル</dt>
                <dd>
                    <div class="dropdown">
                    <select name="model" id="model" onChange="calc_price_with_tax(); addComma2(); changeinstallments();">
                    </select>
                    </div>
                </dd>
            </dl>
            <dl>
                <dt>ファイナンスプログラム</dt>
                <dd>
                    <div class="dropdown">
                    <select name="planselect" id="planselect" onchange="changeplan(this)">
                    <option>シトロエン・オートローン</option>
                    <option>シトロエン・パスポート</option>
                    </select>
                    </div>
                </dd>
            </dl>
        <div class="question">
            <p><a href="http://www.citroen.jp/finance/auto_loan/" target="_blank"><img src="images/question_03.png" alt="question-mark">シトロエン・オートローンに関して詳しくはこちら</a></p>
            <p><a href="http://www.citroen.jp/finance/passport/" target="_blank"><img src="images/question_03.png" alt="question-mark">シトロエン・パスポートに関して詳しくはこちら</a></p>
        </div>
        </div>
    </section>
    <section id="config">
        <div class="content">
            <dl class="header-text">
                <dt>設定項目</dt>
                <dd>設定金額</dd>
            </dl>
            <dl class="text-box-L downpaymentform">
                <dt>車両本体価格<br>(消費税抜き車両本体価格)</dt>
                <input type="hidden" name="text_price_with_tax" id="text_price_with_tax" size="10" maxlength="7">
                <input type="hidden" name="text_price" id="text_price" size="10" maxlength="7">
                <input type="hidden" name="text_lastpayment37" size="10" maxlength="7">
                <input type="hidden" name="text_lastpayment61" size="10" maxlength="7">
                <dd><p><span id="text_price_with_tax2">4,340,000円</span><br>(<span id="text_price2" class="f10px">1,983,333</span><span class="f10px">円)</span></p></dd>
            </dl>
            <dl class="downpaymentform">
                <dt>ご購入サポート</dt>
                <input type="hidden" name="support" id="support">
                <input type="hidden" name="supported_price_with_tax" id="supported_price_with_tax">
                <dd><p class="blue"><span id="supported_price" class="btxt maintxt">-100,000</span><span class="f10px">&nbsp;円</span><br /><br /></span></p></dd>
            </dl>
            <dl class="text-box-L downpaymentform">
                <dt>ご購入サポート適用後 メーカー希望小売価格<br class="sp-dn">
                    (消費税抜き車両本体価格)</dt>
                <dd><p id="purchase-support-div"><span id="supported_price_with_tax" class="f12pxb">2,550,000</span><span class="f10px">&nbsp;円</span><br /><span class="f08px"></span>(<span style="font-size:12px !important" id="supported_price_without_tax" class="f08px">2,361,112</span><span class="f08px">&nbsp;円)</span></p></dd>
            </dl>
            <dl class="downpaymentform">
                <dt>金利(実質年率)</dt>
                <input type="hidden" name="rate" value="2.39">
                <dd><p><span name="rate" id="rate">2.39%</span></p></dd>
            </dl>
            <dl class="passport downpaymentform">
                <dt>シトロエン・パスポート</dt>
                <dd>
                    <div class="dropdown2">
                    <select name="installments" id="installments" onChange="changeinstallments()">
                        <option>3</option>
                            <option>5</option>
                                    </select>
                    </div>
                </dd>
            </dl>
            <dl class="downpaymentform">
                <dt>頭金</dt>

                <dd><div class="input"><input type="text" name="downpayment" size="10" maxlength="7" class="blue"><p>円</p></div></dd>
            </dl>
            <dl class="downpaymentform">
                <dt>諸費用・オプション代など</dt>
                <dd><div class="input"><input type="text" name="optionprice" size="10" maxlength="7" class="blue"><p>円</p></div></dd>
            </dl>
            <dl class="lastpaymentform">
                <dt>ボーナス加算額</dt>
                <dd><div class="input"><input type="text" name="bonus" size="10" maxlength="6" class="blue"><p>円</p></div></dd>
            </dl>
        </div>

    <input onClick="Precheck()" type="submit" value="シミュレーションしてみる" id="simulation-button">
    

</form>
    </section>

<!-- ====================== to here ====================== -->
<script type="text/javascript">
    console.log(document.getElementById("planselect").value);
    /* ====================== INSERT JS HERE ====================== */

</script>
</body>
</html>

See also:

programmer5000
  • 888
  • 11
  • 32