Javascript 重置并提交没有空值的表单_Javascript_Jquery_Html_Forms

Javascript 重置并提交没有空值的表单

javascript jquery html forms

Javascript 重置并提交没有空值的表单,javascript,jquery,html,forms,Javascript,Jquery,Html,Forms,我有以下简单的表格： <select name="category"> <option value="">Choose a Category</option> <option value="Social">Social</option> <option value="Media">Media</option> </select> 问题是表单现在是使用空查询字符串提交的/？category=有没有

我有以下简单的表格：

<select name="category">
<option value="">Choose a Category</option>  
<option value="Social">Social</option>
<option value="Media">Media</option>
</select>

问题是表单现在是使用空查询字符串提交的/？category=有没有办法让它在没有这些空查询字符串的情况下提交表单，只是为了重置它？

我认为在您的代码中不需要提交，只需使用以下内容：

$(document).ready(function () {
    $(document).on('click', '.test', function () {
        $('select[name*="category"]').val('');
    });
});

我建议删除控件本身：

$(document).ready(function () {
    $(document).on('click', '.test', function () {
        $('select[name*="category"]').remove();
        $('form').submit();
    });
});

试试这个

$(document).ready(function () {
 $('select[name*="category"]').val('');
  $(document).on('click', '.test', function () {
    $('select[name*="category"]').val('');
  });
});

如果您确实想重置整个表单，那么使用基本的JS.reset。在代码中，您可以将整个单击功能替换为：

$('form')[0].reset();

这将把选定的JQuery对象转换为HTML节点引用，这样您就可以对其使用JS重置函数。这将把表单中的所有字段重置为默认值

注意：从技术上讲，$'form'[0]是页面上所有表单数组中的第一个对象，因此，如果您有多个表单，则需要更加具体，以确保您正在重置所需的表单。

尝试以下操作：

 $('#frm').submit(function(form){
            $('#frm').find('[name="category"]').remove();
            form.submit();  
        });

这将在表单提交期间删除查询参数

<html>
<head>
 <script type='text/javascript' src='file:///D:/bootstrap/js/jquery-ls.js'></script>
<body>
<form id='frm' method='get' action=''>
<select name="category" >
<option value="">Choose a Category</option>  
<option value="Social">Social</option>
<option value="Media">Media</option>
</select>

<input class='test' type='submit'  value='click' />
</form>

<script>
$(document).ready(function(){

    $(document).on('click','.test',function(){
        var data=$('#frm').serializeArray();
        //alert(data[0]['value']);
        console.log(data[0]);
        if(data[0]['value']){
        //  alert('t');
            $('frm').submit();
        }
        else{
        $('#frm')[0].reset();

        $('#frm').find('[name="category"]').remove();
    }
    });

});
</script>
</body>

重新加载页面？虽然我不认为提交一个没有值的表单有什么意义。问题是，我想让用户删除对类别的过滤，以便再次使用ajax查看所有结果，而不提交结果？我实际上希望提交表单，而不仅仅是重置先提交表单，然后重新提交如果类别的值已设置，提交表单将重新提交表单这将重置表单，但不会提交表单…我需要两者，并且提交的URL不应包含空查询字符串…不能仅重新加载，因为我将丢失我创建的URL中的其他参数need@MichaelSamuel-让我想想，如果我明白。您想重置下拉列表，并且类别参数不属于URL字符串的一部分，但其他表单字段值仍应位于URL中吗？或者您的意思是希望所有表单字段都不包含在URL和任何其他非表单参数中，是否仍然是URL的一部分？第二个选项：重置所有表单字段我在这里提到了select，但有几个表单字段，并且在提交时不将它们附加到表单中…我可以通过从select中删除name属性来实现它，但现在？正在被提交…是否有方法阻止它被附加..我读到它在get方法的结构中，无法被删除我想我理解的是，你想留在URL中的其他参数是如何被附加的？如果它们不是表单字段的一部分，那么它们将通过其他方式添加，并且在重新加载页面时，它们应该仍然存在。如果是这样的话，我建议将您的foom从GET转换为POST，这样参数就不会通过URL传递。这些参数也是GET变量……顺便说一句，如果我只是重新加载，URL已经附加了一个表单字段，它将再次加载这些字段…因此实际上不可能重新加载，因为用户可能已经选择了一个类别，并将其加载到URL中，正如您所说，我有其他需要的参数，但删除控件并不能解决问题，因为它也将提交？在url的末尾…有没有办法阻止提交问号？如果有，请使用第二个选项。删除该控件不会将其作为参数发送，因为它在提交的表单中不存在。现在问号仍然存在，因此url现在为：site.com/？…是否有方法删除该控件？如果需要将用户重定向到site.com/address，则只需执行window.location.href=/；。在这种情况下，您不需要操纵表单，只需将用户重定向到裸地址即可？这是附加的吗？@MichaelSamuel如果我们删除所有表单字段，那么就没有了？而且我在本地测试并发布了..刚刚单独在本地测试了这段代码，仍然是？正在添加以下内容：

<html>
<head>
 <script type='text/javascript' src='file:///D:/bootstrap/js/jquery-ls.js'></script>
<body>
<form id='frm' method='get' action=''>
<select name="category" >
<option value="">Choose a Category</option>  
<option value="Social">Social</option>
<option value="Media">Media</option>
</select>

<input class='test' type='submit'  value='click' />
</form>

<script>
$(document).ready(function(){

    $(document).on('click','.test',function(){
        var data=$('#frm').serializeArray();
        //alert(data[0]['value']);
        console.log(data[0]);
        if(data[0]['value']){
        //  alert('t');
            $('frm').submit();
        }
        else{
        $('#frm')[0].reset();

        $('#frm').find('[name="category"]').remove();
    }
    });

});
</script>
</body>