JavaScript：放心从表单中获取价值

Question

I was trying to make javascript take value from textbox and alert it, but it always pops up "Undefined". 我试图使javascript从文本框中获取价值并发出警报，但它总是弹出“未定义”。 I tried grabing the value of selected items from combobox, but still shows undefined. 我尝试从组合框中获取所选项目的值，但仍显示未定义。 When I try using js in simple webpage, it works. 当我尝试在简单网页中使用js时，它可以工作。 Maybe something wrong with my code. 我的代码可能有问题。

Note: I want the value to popup when "Schedule" button is clicked. 注意：我希望单击“时间表”按钮时弹出该值。 Js will take value from txtbox and selected time value. Js将从txtbox中获取值并选择时间值。 But it does not.. 但事实并非如此。

Code: index.php 代码：index.php

    <!DOCTYPE html>
    <html lang='en'>
    <head>
        <title>Pinterest Grabber</title>
        <style>
            html, body{
                width: 100%;
                background-color: #DADADA;
                color: black;
                font-family: georgia, sans-serif, arial;
            }

        .container{
            background-color: white;
            width: 95%;
            margin: auto;
            padding: 10px;
            box-shadow: 0px 5px 10px #333;
            border: none;
            border-radius: 2px;
        }

        .setupForm{
            background-color: #ff9;
            margin: 10px;
        }

        .pinterestForm{
            background-color: #ff9;
            margin-top: 2%;
        }

        .formTxtbox{
            margin-bottom: 1%;
            border: none;
            width: 75%;
            text-align: center;
            font-size: 17px;
            height: 30px;
            background-color: white;
            color: black;
            transition-property: box-shadow;
            transition-duration: 0.3s; 
        }

        .formTxtbox:hover{
            box-shadow: 0px 0px 10px #cab;
        }

        .formButton{
            margin-bottom: 1%;
            border: none;
            background-color: royalblue;
            color: white;
            padding: 7px 35px;
            font-size: 17px;
            transition-property: background-color, box-shadow, color;
            transition-duration: 0.3s; 
        }

        .formButton:hover{
            background-color: lime;
            box-shadow: 5px 5px 5px black;
            color: black;
            cursor: pointer;
        }

        .txtboxSmall{
            margin-bottom: 1%;
            border: none;
            width: 50%;
            text-align: center;
            font-size: 17px;
            height: 30px;
            background-color: white;
            color: black;
            transition-property: box-shadow;
            transition-duration: 0.3s; 
        }

        .txtboxSmall:hover{
            box-shadow: 0px 0px 10px #cab;
        }

        .scheduleContainer{
            background-color: #FF9800;
        }

        #scheduleOptions{
            border: none;
            width: 5%;
            height: 30px;
        }

    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $('.setupForm').hide();

        $("#btnSettingsToggle").click(function(){
            $(".setupForm").toggle('fast');
        });

    });

    // js
    var interval;
    var time = document.getElementById('txtScheduleInterval').value;
    var timeOptions = document.getElementById("scheduleOptions").value;

    function schedule()
    {
        alert(time);
    }

    </script>
</head>
<body>
    <div class="container">
        <header>
            <h1 align="center">Pinterest Grabber</h1>
        </header>

        <button class="formButton" id="btnSettingsToggle">Settings</button>

        <center>
        <form action="setup.php" method="post" class="setupForm">
            <h2>Settings</h2>
            <input class="formTxtbox" type="text" name="condapath" placeholder="Your Anaconda Path"><br>
            <input class="formTxtbox" type="text" name="envname" placeholder="Enviroment Name To Activate"><br>
            <input class="formButton" type="submit" value="Save Settings">
        </form>
        </center>
        <?php
            $settings = file('settings.txt', FILE_SKIP_EMPTY_LINES);
            echo "<b>Working Path:</b> " . $settings[0] . '<br>';
            echo "<b>Working Environment:</b> " . $settings[1] . '<br>';
        ?>

        <center>
        <form action="pinterest.php" method="post" class="pinterestForm">
            <h2 align="left" style="margin-top:1%;margin-left:1%;">Pinterest Single</h2>
            <input class="formTxtbox" type="text" name="singleSearchTerm" placeholder="Enter Search Term (EX: old kl)"><br>
            <input class="formTxtbox" type="text" name="singleFilename" placeholder="Enter Filename (EX: data.csv)"><br>
            <input class="formButton" type="submit" value="Start" name="btnPinSingle">
        </form>

        <form action="#" method="post" class="pinterestForm">
            <h2 align="left" style="margin-top:1%;margin-left:1%;">Pinterest Bulk</h2>
            <input class="formTxtbox" type="text" name="listPath" placeholder="Enter List Path (EX: c:\folder\list.txt)"><br>
            <input class="txtboxSmall" type="text" id="txtScheduleInterval" placeholder="Enter Schedule Time">
            <select id="scheduleOptions">
                <option value="secs">Seconds</option>
                <option value="mins">Minutes</option>
                <option value="hrs">Hours</option>
            </select>
            <br>
            <button type="button" class="formButton" onclick="schedule(); return false;">Schedule</button>
            <input class="formButton" type="submit" value="Start Now" name="btnPinBulk">
        </form>
        </center>

    </div>
</body>
</html>

Here is the hosted code on JSFiddle: https://jsfiddle.net/Lnt0crs8/1/ 这是JSFiddle上的托管代码： https ://jsfiddle.net/Lnt0crs8/1/

Any help would be appreciated. 任何帮助，将不胜感激。 Thanks. 谢谢。

Answer 1

Fetch textbox values in on click function call and try 在点击函数调用中获取文本框值，然后尝试

function schedule()
{
    var time = document.getElementById('txtScheduleInterval').value;
    alert(time);
}

Answer 2

The variable time is now set only once, when the page is loaded. 现在，加载页面时，可变time仅设置一次。

It should be set whenever the schedule button is pressed. 每当按下计划按钮时，都应进行设置。

So move the line var time = ... to a place within the schedule function: 因此，将var time = ...行移动到schedule函数内的某个位置：

function schedule()
{
    var time = document.getElementById('txtScheduleInterval').value;
    alert(time);
}

Answer 3

just add the below lines into the javascript schedule function 只需将以下几行添加到javascript Schedule函数中

time = document.getElementById('txtScheduleInterval').value;

The value of the variable time is getting initialized while the page is getting loaded . 页面加载时，变量time的值正在初始化。 While the page is been loaded the value return by document.getElementById('txtScheduleInterval').value is undefined as the input field txtScheduleInterval has no value in it. 加载页面后， undefined document.getElementById('txtScheduleInterval').value value返回的document.getElementById('txtScheduleInterval').value ，因为输入字段txtScheduleInterval中没有值。 So while calling the function schedule you have to make sure that the variable time has the current value in txtScheduleInterval. 因此，在调用函数时间表时，必须确保变量时间在txtScheduleInterval中具有当前值。

Hope this helps you.. 希望这对您有帮助。

Answer 4

You put your javascript which contain dom-operation before your html. 您将包含dom-operation的javascript放在html之前。

When your "var time = document.getElementById('txtScheduleInterval').value;" 当您的“ var time = document.getElementById（'txtScheduleInterval'）。value;”时 ran, it could not get your dom as your expectation. 跑，它不能得到您的期望。 So the solution is either put your script after body or do dom-operation in your schedule function 因此，解决方案是将脚本放在正文之后，或者在日程安排功能中进行dom操作

Answer 5

fetch the values when the function is called. 调用函数时获取值。 It should work! 它应该工作！

function schedule()
        {
            time = document.getElementById('txtScheduleInterval').value;
            timeOptions = document.getElementById("scheduleOptions").value;
            alert(time);
        }

JavaScript：放心从表单中获取价值

问题描述

5 个解决方案

解决方案1
1 已采纳 2018-08-10 07:03:43

解决方案2
1 2018-08-10 07:08:43

解决方案3
0 2018-08-10 07:08:36

解决方案4
0 2018-08-10 07:09:50

解决方案5
0 2018-08-10 07:17:57

JavaScript：放心从表单中获取价值

问题描述

5 个解决方案

解决方案1 1 已采纳 2018-08-10 07:03:43

解决方案2 1 2018-08-10 07:08:43

解决方案3 0 2018-08-10 07:08:36

解决方案4 0 2018-08-10 07:09:50

解决方案5 0 2018-08-10 07:17:57

解决方案1
1 已采纳 2018-08-10 07:03:43

解决方案2
1 2018-08-10 07:08:43

解决方案3
0 2018-08-10 07:08:36

解决方案4
0 2018-08-10 07:09:50

解决方案5
0 2018-08-10 07:17:57