使用 JS 显示下拉列表并将 Name 和 City 值转换为大写 In New Window

Question

我有几个问题似乎无法解决。

我需要在输出中显示下拉状态值 window。现在我有一个警告框来显示用户输入的内容，但我现在需要在新 window.
我还需要转换名称和城市值，以便第一个字母大写，其余字母小写。例如，如果我在文本框中键入名称 "jOhN"，一旦我点击提交，它将在新输出 window 中显示为 "John"。城市文本框也是如此。我们被告知使用 Name: Namestring 和 City: Citystring.

我很确定我必须在 doSubmit() 函数和表单部分中做一些事情，但我不太确定那是什么。你能提供的任何帮助都会很棒。以下是我现在拥有的。

我用下拉列表对代码进行了一些更新，但现在当我 select 提交时警告框不会出现。我是 Javascript 的新手，有人可以帮忙吗？

    <html>
    <head>
    <title>HTML and JavaScript</title>
    <script>
    function doSubmit()
    {
        // MD This runs the validate fieldes
        if( ! (validateText() && validateZipCode() && validatePhoneNumber() && validateRadio() && validateCheck()) ) return false;

        /* MD this generates the box message */
        var fields=["customer", "address", "city", "state", "zip", "phone", "email","sizes"];
        var fieldNames=["Name", "Address", "City", "State", "Zip", "Phone", "Email","Size"];
        var msg = "";
        for(i=0;i<fields.length;i++)
            msg += fieldNames[i] + ": " + document.PizzaForm[ fields[i] ].value + "\n";
        msg += "Toppings: ";
        for(i=0;i<document.PizzaForm.toppings.length;i++)
            if(document.PizzaForm.toppings[i].checked)
                msg += (i==0?"":",")+document.PizzaForm.toppings[i].value;/* MD this displays the toppings from the check boxes in an alert box */
        alert(msg);
        var i = document.PizzaForm.states.options.selectedIndex; //new state code added
        var text = document.PizzaForm.states.options[i].text;
        var value = document.PizzaForm.states.options[i].value;
        msg += "State: ";
        for(i=0;i<document.PizzaForm.states.length;i++)
            if(document.PizzaForm.states[i].selected)
                msg += (i==0?"":",")+document.PizzaForm.states[i].value;
        alert(msg);
        return true;
    }
    function validateText()
    {
        var pass=true;
        var fields=["customer", "address", "city", "state", "zip", "phone"];
        var fieldNames=["your name", "an address", "a city", "a state", "a zip code", "a phone number"]; /* MD this groups all the item headings */
        for(i=0;i<fields.length;i++) /* MD this is the alert button for missing items */
            if(document.PizzaForm[ fields[i] ].value.length == 0){
                alert("Please enter " + fieldNames[i] + ".");
                pass=false;
            }
        var email = document.PizzaForm["email"].value;/* MD This validates the email address */
        atpos = email.indexOf("@"); dotpos = email.lastIndexOf(".");
        if (atpos < 1 || ( dotpos - atpos < 2 )){alert("Please enter an email address.");pass=false;}
        return pass;
    }

    function validateZipCode()
    {
        var zipDigit = document.PizzaForm.zip.value;
        if(zipDigit != "") {
            /* MD this is the regular expression for zip code patterns */
            var regx = /^\d{5}$/;

            if(regx.test(zipDigit) == false) {    /* MD This is used if number does not match with the pattern */
                alert("Please enter a 5 digit zip code.");
                return false;
            }
            return true;
        }
    }

    function validatePhoneNumber()
    {
        var phoneNum = document.PizzaForm.phone.value;
        if(phoneNum != "") {
            /* MD this is th regular expression for phone number patterns */
            var regx = /(^\d{3}\-\d{3}\-\d{4}$)|(^\d{10}$)|(^\(\d{3}\)\d{7}$)|(^\(\d{3}\)\d{3}\-\d{4}$)/g;

            if(regx.test(phoneNum) == false) {    /* MD This is used if number does not match with the pattern */
                alert("Please enter valid Phone number." + "\n\n" +
                    "For example : " + "\n" +
                    "012-345-6789 " + "\n" +
                    "0123456789 " + "\n" +
                    "(012)3456789 " + "\n" +
                    "(012)345-6789"
                );
                return false;
            }
            return true;
        }
    }

    function validateRadio()
    {
        for(i=0;i<document.PizzaForm.sizes.length;i++)/* MD This validates the pizza size radio buttons */
            if(document.PizzaForm.sizes[i].checked)
                return true;
        alert("Please choose a pizza size.");
        return false;
    }

    function validateCheck()
    {
        for(i=0;i<document.PizzaForm.toppings.length;i++)/* MD This validates the pizza toppings check boxes */
            if(document.PizzaForm.toppings[i].checked)
                return true;
        alert("Please pick a topping of your choice.");
        return false;
    }

    </script>
    </head>

    <body>
    <form name="PizzaForm">
    <h1>The JavaScript Pizza Parlor</h1>
    <p>
    <h4>Step 1: Enter your name, address, and phone number:</h4>
    <font face ="Courier New">
    Name: &nbsp;&nbsp;&nbsp;<input name="customer" size="50" type="text"><br>
    Address: <input name="address" size="50" type="text"><br>
    City: &nbsp;&nbsp;&nbsp;<input name="city" size="15" type="text">
    State: <select name="states"> <!-- MD State drop down -->
    <option value="PA">PA</option>
    <option value="NJ">NJ</option>
    <option value="NY">NY</option>
    <option value="DE">DE</option>
    </select>
    Zip: <input name="zip" size="5" type="text"><br>
    Phone: &nbsp;&nbsp;<input name="phone" size="50" type="text"><br>
    Email: &nbsp;&nbsp;<input name="email" size="40" type="text"><br>
    </font>
    </p>
    <p>
    <h4>Step 2: Select the size of pizza you want:</h4>
    <font face="Courier New">
    <input name="sizes" type="radio" value="Small">Small
    <input name="sizes" type="radio" value="Medium">Medium
    <input name="sizes" type="radio" value="Large">Large
    <input name="sizes" type="radio" value="Jumbo">Jumbo<br>
    </font>
    </p>
    <p>
    <h4>Step 3: Select the pizza toppings you want:</h4>
    <font face="Courier New">
    <input name="toppings" type="checkbox" value="Pepperoni">Pepperoni
    <input name="toppings" type="checkbox" value="Canadian Bacon">Canadian Bacon
    <input name="toppings" type="checkbox" value="Sausage">Sausage<br>
    <input name="toppings" type="checkbox" value="Mushrooms">Mushrooms
    <input name="toppings" type="checkbox" value="Pineapple">Pineapple
    <input name="toppings" type="checkbox" value="Black Olives">Black Olives<br>
    <input name="toppings" type="checkbox" value="Green Peppers">Green Peppers
    <input name="toppings" type="checkbox" value="Extra Cheese">Extra Cheese
    <input name="toppings" type="checkbox" value="None">None<br>
    </font>
    </p>
    <input type="button" value="Submit Order" onClick="doSubmit()">
    <input type="reset" value="Clear Entries"> <!-- MD This clears the entries -->
    </form>
    </body>

    </html>

Answer 1

我最后为大写和小写问题添加了以下代码。

document.PizzaForm.customer.value = document.PizzaForm.customer.value.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase( ) + txt.substr(1).toLowerCase();});

对于状态下拉列表，我创建了以下内容

var i = document.PizzaForm.state.options.selectedIndex;
var text = document.PizzaForm.state.options[i].text;
var value = document.PizzaForm.state.options[i].value;

使用 JS 显示下拉列表并将 Name 和 City 值转换为大写 In New Window

Use JS to Display Dropdown List and Convert Name and City values to Uppercase In New Window

html

javascript

string

drop-down-menu