如何提交此表格?

时间:2013-03-15 19:14:22

标签: javascript jquery web-applications

我正在尝试将此表单提交给servlet但没有成功。我知道它有一大段代码,但它工作正常,唯一的问题是只需单击一个按钮即可打开的表单,并且在验证和提交时,没有任何反应。寻找“问题在这里”评论,找出我在哪里调用提交方法。谢谢你的帮助!

注意:我正在使用jstl和jqueryui。

<!doctype html>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>News</title>
<script

<script>
$(function() {

        var assunto2 = $("#assunto2"), autor2 = $("#autor2"), dtPublicacao2 = $("#dtPublicacao2"), endereco2 = $("#endereco2"), id2 = $("#id2"), imagem2 = $("#imagem2"), texto2 = $("#texto2"), titulo2 = $("#titulo2"), cartola2 = $("#cartola2"), dtValidade2 = $("#dtValidade2"), destaque2 = $("#destaque2"), allFields2 = $(
                []).add(autor2).add(assunto2).add(dtPublicacao2).add(endereco2)
                .add(id2).add(imagem2).add(texto2).add(titulo2).add(cartola2).add(
                        destaque2).add(dtValidade2), tips2 = $(".validateTips");

        function updateTips(t) {
            tips.text(t).addClass("ui-state-highlight");
            setTimeout(function() {
                tips.removeClass("ui-state-highlight", 1500);
            }, 500);
        }

        function checkLength(o, n, min, max) {
            if (o.val().length > max || o.val().length < min) {
                o.addClass("ui-state-error");
                updateTips("O tamanho de " + n + " deve estar entre " + min
                        + " e " + max + ".");
                return false;
            } else {
                return true;
            }
        }

        function checkRegexp(o, regexp, n) {
            if (!(regexp.test(o.val()))) {
                o.addClass("ui-state-error");
                updateTips(n);
                return false;
            } else {
                return true;
            }
        }



        $("#dialog-form-alt")
        .dialog(
                {
                    autoOpen : false,
                    height : 750,
                    width : 400,
                    modal : true,
                    buttons : {
                        "Alterar noticia" : function() {
                            var bValid = true;
                            allFields.removeClass("ui-state-error");

                            //bValid = bValid && checkLength( assunto, "assunto", 1, 2 );
                            //bValid = bValid && checkLength( auntor, "autor", 7, 7 );
                            //bValid = bValid && checkLength( dtPublicacao, "Data Publicacao", 10, 10 );
                            bValid = bValid
                                    && checkLength(endereco2,
                                            "endereco2", 0, 255);
                            //bValid = bValid && checkLength( dtPublicacao, "id", 10, 10 );
                            bValid = bValid
                                    && checkLength(imagem2, "imagem2", 0,
                                            255);
                            bValid = bValid
                                    && checkLength(texto2, "texto2", 10,
                                            1000);
                            bValid = bValid
                                    && checkLength(titulo2, "titulo2", 5,
                                            100);
                            bValid = bValid
                                    && checkLength(cartola2, "cartola2",
                                            0, 255);
                            //bValid = bValid && checkLength(destaque2, "destaque2", 1, 1);
                            //bValid = bValid && checkRegexp( titulo, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
                            // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
                            //bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
                            //bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );

                            if (bValid) {

//PROBLEM IS HERE!!!                                $(this).attr("action", "/Controller?logica=ManterNoticia&operacao=3"); 

                                $(this).submit();
                                $(this).dialog("close");
                            }

                        },
                        Cancel : function() {
                            $(this).dialog("close");
                        }
                    },
                    close : function() {
                        allFields.val("").removeClass("ui-state-error");
                    }
                });


        $("#create-news").button().click(function() {
            $("#dialog-form").dialog("open");
        });

        $("#update-news").button().click(function() {
            $("#dialog-form-alt").dialog("open");
            var noticias = ${sessionScope.gnots};
            var not = null;
            for(var i=0; i<=noticias.length; i++){
                if(noticias[i].id=($(this).attr("value"))){
                    not = noticias[i];
                    break;
                };
            };
            $("#dialog-form-alt").dialog("open");
            $("#id2").val(not.id);
            $("#titulo2").val(not.titulo);
            $("#cartola2").val(not.cartola);
            $("#assunto2").val(not.assunto);
            $("#endereco2").val(not.endereco);
            $("#imagem2").val(not.imagem);
            $("#destaque2").val(not.destaque);
            $("#dtPublicacao2").val(not.dtPublicacao);
            $("#dtValidade2").val(not.dtValidade);
            $("#texto2").val(not.texto);
            });

    });
</script>
<script>

  $(function() {
    $( "#dtPublicacao2" ).datepicker({});
   });

  $(function() {
        $( "#dtValidade2" ).datepicker({});
  });
</script>
</head>
<body>

    <div id="dialog-form-alt"  title="Alterar noticia">
        <p class="validateTips">Preencher todos os campos.</p>

        <form>
            <fieldset>

                <label for="id2">ID</label> 
                <input type="text" disabled name="id2" id="id2" class="text ui-widget-content ui-corner-all" /> 

                <label for="titulo2">Titulo</label> 
                <input type="text" name="titulo2" id="titulo2" class="text ui-widget-content ui-corner-all" /> 

                <label for="cartola2">Cartola</label> 
                <input type="text" name="cartola2" id="cartola2" class="text ui-widget-content ui-corner-all" />

                <label for="assunto2">Assunto</label> 
                <input type="text" name="assunto2" id="assunto2" class="text ui-widget-content ui-corner-all" />

                <label for="endereco2">Endereco</label> 
                <input type="text" name="endereco2" id="endereco2" class="text ui-widget-content ui-corner-all" />

                <label for="imagem2">Caminho da imagem</label> 
                <input type="text" name="imagem2" id="imagem2" class="text ui-widget-content ui-corner-all" />

                <label for="destaque2">Destaque</label> 
                <input type="checkbox" name="destaque2" id="destaque2" class="text ui-widget-content ui-corner-all" />

                <label for="dtPublicacao2">Data de Publicacao</label> 
                <input name="dtPublicacao2" type="text" name="dtPublicacao2" id="dtPublicacao2" class="text ui-widget-content ui-corner-all"/>

                <label for="dtValidade2">Data de Validade</label> 
                <input name="dtValidade2" type="text" name="dtValidade2" id="dtValidade2" class="text ui-widget-content ui-corner-all"/>

                <label for="texto2">Texto</label> 
                <textarea name="texto2" rows="6" cols="48" id="texto2" class="text ui-widget-content ui-corner-all"></textarea>

            </fieldset>
        </form>
    </div>


    <div id="users-contain" class="ui-widget">
        <h1>News DataBase:</h1>

        <table id="users" class="ui-widget ui-widget-content">
            <thead>
                <tr class="ui-widget-header ">
                    <th>ID</th>
                    <th>Titulo</th>
                    <th>Assunto</th>
                    <th>Destaque</th>
                    <th>Data de Publicacao</th>
                    <th>Data de Validade</th>
                    <th>Autor</th>
                    <th>Acao</th>
                </tr>
            </thead>
            <tbody>
                <c:forEach var="noticia" items="${sessionScope.noticias}">
                    <tr>
                        <td width="15%" align="left">${noticia.id}</td>
                        <td width="40%" align="left">${noticia.titulo}</td>
                        <td width="5%" align="left">${noticia.assunto}</td>
                        <td width="5%" align="left">${noticia.destaque}</td>
                        <td width="10%" align="left"><fmt:formatDate
                                value="${noticia.dtPublicacao}" pattern="dd/MM/yyyy HH:mm" /></td>
                        <td width="10%" align="left"><fmt:formatDate
                                value="${noticia.dtValidade}" pattern="dd/MM/yyyy HH:mm" /></td>
                        <td width="10%" align="left">${noticia.autor.id} -
                            ${noticia.autor.name}</td>
                        <td><button id="update-news" value="${noticia.id}">Alterar</button></td>
                    </tr>
                </c:forEach>
            </tbody>
        </table>
    </div>

    <button id="create-news">Create News</button>

</body>
</html>

1 个答案:

答案 0 :(得分:1)

<form>标记

下的HTML表单代码中添加此内容
<form action="/someurl" method="post"> 
   <input type="submit" id="btnSubmit" value="Submit Form" />
</form>

如果您想在查看错误后提交,请使用Jquery

$('form').submit(function(e){
     e.preventDefault(); // prevent from submitting
    //review form errors then submit
    $(this).submit();

});