Question

整个下午我一直在玩这个，不知道出了什么问题。我是js的新手，不知道我哪里出错了。我尝试了一些解决方案，但都没有。我在jfiddle中测试了js，它正在工作，但我不能让它在任何其他地方工作。

任何帮助都会得到很多赞赏。

    <script language="JavaScript">
<!--

/***********************************************
* Required field(s) validation v1.10- By NavSurf
* Visit Nav Surf at http://navsurf.com
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

function formCheck(formobj){
    // Enter name of mandatory fields
    var fieldRequired = Array("name", "Address", "city", "state", "zip", "phone", "email", "tradeShow");
    // Enter field description to appear in the dialog box
    var fieldDescription = Array("name", "Address", "city", "state", "zip", "phone", "email", "tradeShow");
    // dialog message
    var alertMsg = "Please complete the following fields:\n";

    var l_Msg = alertMsg.length;

    for (var i = 0; i < fieldRequired.length; i++){
        var obj = formobj.elements[fieldRequired[i]];
        if (obj){
            switch(obj.type){
            case "select-one":
                if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
                    alertMsg += " - " + fieldDescription[i] + "\n";
                }
                break;
            case "select-multiple":
                if (obj.selectedIndex == -1){
                    alertMsg += " - " + fieldDescription[i] + "\n";
                }
                break;
            case "text":
            case "textarea":
                if (obj.value == "" || obj.value == null){
                    alertMsg += " - " + fieldDescription[i] + "\n";
                }
                break;
            default:
            }
            if (obj.type == undefined){
                var blnchecked = false;
                for (var j = 0; j < obj.length; j++){
                    if (obj[j].checked){
                        blnchecked = true;
                    }
                }
                if (!blnchecked){
                    alertMsg += " - " + fieldDescription[i] + "\n";
                }
            }
        }
    }

    if (alertMsg.length == l_Msg){
        return true;
    }else{
        alert(alertMsg);
        return false;
    }
}
// -->
</script>

<form action="submit.asp" id="qrCodeForm" method="post" onsubmit="return formCheck(this);">
    <!-- Display Name -->
    <div class="row">
        <div class="col-xs-12 col-md-4">Name:</div>
        <div class="col-xs-12 col-md-6 col-md-offset-1"><input type="text" id="name" runat="server" /></div>
    </div>

    <!-- Display CompanyName -->
    <div class="row">
        <div class="col-xs-12 col-md-4">Company Name:</div>
        <div class="col-xs-12 col-md-6 col-md-offset-1"><input type="text" id="companyName" runat="server" /></div>
    </div>

    <!-- Display Address -->
    <div class="row">
        <div class="col-xs-12 col-md-4">Your Address:</div>
        <div class="col-xs-12 col-md-5 col-md-offset-1 si-qr-address">
            <div class="col-xs-12"><input type="text" id="address" runat="server"   class="col-xs-12" placeholder="Address" /></div>
            <div class="col-xs-6"><input type="text" id="city" runat="server"       class="col-xs-12" placeholder="City" /></div>
            <div class="col-xs-3">
                <select class="colors_text col-xs-12" name="state">
                    <option value=""></option>
                    <option value="AL">AL</option>
                    <option value="AK">AK</option>
                    <option value="AZ">AZ</option>
                    <option value="AR">AR</option>
                    <option value="CA">CA</option>
                    <option value="CO">CO</option>
                    <option value="CT">CT</option>
                    <option value="DE">DE</option>
                    <option value="DC">DC</option>
                    <option value="FL">FL</option>
                    <option value="GA">GA</option>
                    <option value="HI">HI</option>
                    <option value="ID">ID</option>
                    <option value="IL">IL</option>
                    <option value="IN">IN</option>
                    <option value="IA">IA</option>
                    <option value="KS">KS</option>
                    <option value="KY">KY</option>
                    <option value="LA">LA</option>
                    <option value="ME">ME</option>
                    <option value="MD">MD</option>
                    <option value="MA">MA</option>
                    <option value="MI">MI</option>
                    <option value="MN">MN</option>
                    <option value="MS">MS</option>
                    <option value="MO">MO</option>
                    <option value="MT">MT</option>
                    <option value="NE">NE</option>
                    <option value="NV">NV</option>
                    <option value="NH">NH</option>
                    <option value="NJ">NJ</option>
                    <option value="NM">NM</option>
                    <option value="NY">NY</option>
                    <option value="NC">NC</option>
                    <option value="ND">ND</option>
                    <option value="OH">OH</option>
                    <option value="OK">OK</option>
                    <option value="OR">OR</option>
                    <option value="PA">PA</option>
                    <option value="RI">RI</option>
                    <option value="SC">SC</option>
                    <option value="SD">SD</option>
                    <option value="TN">TN</option>
                    <option value="TX">TX</option>
                    <option value="UT">UT</option>
                    <option value="VT">VT</option>
                    <option value="VA">VA</option>
                    <option value="WA">WA</option>
                    <option value="WV">WV</option>
                    <option value="WI">WI</option>
                    <option value="WY">WY</option>
                </select>
            </div>
            <div class="col-xs-3"><input type="text" id="zip" runat="server"        class="col-xs-12" placeholder="Zip Code" /></div>
        </div>
    </div>

    <!-- Display Phone -->
    <div class="row">
        <div class="col-xs-12 col-md-4">Phone Number:</div>
        <div class="col-xs-12 col-md-6 col-md-offset-1"><input type="text" id="phone" runat="server" /></div>
    </div>

    <!-- Display Email -->
    <div class="row">
        <div class="col-xs-12 col-md-4">Email:</div>
        <div class="col-xs-12 col-md-6 col-md-offset-1"><input type="text" id="email" runat="server" /></div>
    </div>

    <!-- Display TradeShow -->
    <div class="row">
        <div class="col-xs-12 col-md-4">How did you find us?</div>
        <div class="col-xs-12 col-md-6 col-md-offset-1"><input type="text" id="tradeShow" runat="server" /></div>
    </div>

<script language="javascript">
    function addInput(val) {
        var input = document.createElement('input');
        input.setAttribute('name', 'QR Code URL');
        input.setAttribute('type', 'text');
        input.setAttribute('value', val);
        document.body.appendChild(input);

        //document.write("<input type='hidden' name='QR Code URL3' id='qrCodeUrl3' value=" + window.location.pathname + ">");
        //document.write(window.location.pathname);
        document.write("<input type='hidden' name='QR Code URL3' id='qrCodeUrl3' value=" + val + ">");
        alert("PATH URL:" + val);
    }

    window.load function {
        document.write("<input type='hidden' name='QR Code URL3' id='qrCodeUrl3' value=" + val + ">");
    }

    addInput(window.location.pathname);

    //  $('<input>').attr({
    //      type: 'hidden',
    //      id: 'foo',
    //      name: 'bar', 
    //      value: window.location.pathname
    //  }).appendTo('form');



    //  $('#qrCodeForm').append('<input type="hidden" name="qrCodeUrl4" value="' + window.location.pathname + '" />');


    //'QrUrl.Text = HttpContext.Current.Request.Url.AbsolutePath;
</script>
<!-- Qr Code Stuff -->
<input name="QR Code URL2" id="QrUrl2" value="<asp print path; />" type="hidden">

    <!-- Display CAPTCHA -->
    <div class="row">
        <div class="col-xs-12 col-md-4"><img class="captcha" ></div>
        <div class="col-xs-12 col-md-6 col-md-offset-1"><input name="Verification_Code" type="text"></div>
    </div>

    <!-- Display Submit -->
    <div class="row">
        <div class="col-xs-12">
            <div class="col-xs-10 col-xs-offset-1 col-md-4 col-md-offset-4"><input type="submit" value="Submit for Coupon Code" class="btn btn-lg btn-primary col-xs-12" alt="Submit for Coupon Code"></div>
        </div>
    </div>
</form>

最终站点将运行bootstrap。我正在努力工作的是使用当前网址创建一个隐藏输入，没有域名作为值。

提前再次感谢。

Answer 1

如果要将隐藏元素附加到<form>元素，可以通过将id属性传递给document.getElementById()函数并使用appendChild()函数来引用它就像你以前一样：

function addInput(val) {
    var input = document.createElement('input');
    input.setAttribute('name', 'QR Code URL');
    input.setAttribute('type', 'hidden');
    input.setAttribute('value', val);
    // Append this element to the form
    document.getElementById('qrCodeForm').appendChild(input);  
}

只需在<script>代码的末尾调用此代码：

addInput(window.location.pathname);

你可以see a working example / fiddle here：

Answer 2

您不需要发布这么多代码，请考虑How to create a Minimal, Complete, and Verifiable example。

在您的代码中，您有：

    document.body.appendChild(input);

将输入附加到文档但不将其与表单关联。您可以将输入的表单属性设置为表单ID，也可以将其作为表单的子项附加，因此可以：

input.setAttribute('form', 'qrCodeForm');

或

document.getElementById('qrCodeForm').appendChild(input);

或

document.querySelector('#qrCodeForm').appendChild(input);

或类似的。

你也有：

    document.write("<input type='hidden' name='QR Code URL3' id='qrCodeUrl3' value=" + val + ">");
    alert("PATH URL:" + val);

在页面加载后调用 document.write 将调用 document.open ，这将清除文档的整个内容（head和正文）并用你传递的内容替换它，因此文档将只包含隐藏的输入元素。不要以这种方式向页面添加元素。

添加隐藏的表单输入

2 个答案: