Question

这是故事。我有一个动态生成的表单，因此我无法添加到现有代码中，但如果表单字段留空，我只需弹出一个简单的警报。

这是HTML：

 <form action="contact-us-a-big-map-version" method="get">
 <input type="text" name="widget_address" id="address_input_slpw_adv" placeholder="City/Zip">
 <input type="hidden" name="radius" value="700">
 <input type="hidden" name value>
 <a class="g1-button g1-button--solid g1-button--small">
  <span>
   <span>Go!</span>
  </span>
 </a>
 <input type="submit" value="Go!" style="display: none;"> 
</form>

正如您所看到的，表单中没有应用ID或名称。我也无法控制要添加的代码。

我尝试使用的Jquery看起来像这样：

<script>
$('form').submit(function () {

var name = $.trim($('#address_input_slpw_adv').val());

// Check if empty of not
if (name === '') {
    alert('You must enter a zip code or city name.');
    return false;
}
});
</script>

我觉得这个脚本应该正常工作......我错过了什么吗？我在这里做错了什么？

提前致谢!!!

Answer 1

你有没有试过这样的事情：

HTML示例

<form action="contact-us-a-big-map-version" method="get">
    <input type="text" name="widget_address" id="address_input_slpw_adv" placeholder="City/Zip">
    <input type="hidden" name="radius" value="700">
    <a class="g1-button g1-button--solid g1-button--small"> <span>
   <span>Go!</span>
</span>
    </a>
    <input type="submit" value="Go!" style="display: block;">
</form>

<强>的jQuery

$(document).on('submit', 'form', function () {
    var name = $('#address_input_slpw_adv').val();
    if (!name.trim()) {
        alert('You must enter a zip code or city name.');
        return false;
    } else {
        alert('Proceed with submit');
    }
});

<强> JSFIDDLE

由于表单是动态生成的，因此您必须将事件侦听器附加到class，因为它们是唯一使用动态生成内容的全局事件侦听器，或document，以及您无权修改form文档是附加文档的最佳位置。

如果ID为空表单字段，则Jquery提醒

1 个答案: