Question

当我提交表单时，我希望另一个对象增加宽度并保持这种状态。这就是我所拥有的：

$("form#inputs").submit(function() {
    $(".circles").css("width", "200px");
});

提交后，.circles会增加宽度，但会在一瞬间快速恢复。我希望它们保持增加的宽度，我该怎么做？

Answer 1

在表单提交后，您的网页似乎已重新加载。所以这样做：

$("form#inputs").submit(function (e) {
    $(".circles").css("width", 200);
    e.preventDefault();
});

Answer 2

@Praveen Kumar是正确的 - 如果您想使用javascript编辑DOM中的元素，则需要使用AJAX发布您的表单信息。

如果您不想使用AJAX，则可以在处理表单后将变量传回页面，这会触发将类添加到.circles元素中。< / p>

要通过AJAX发送您的信息，您可以简单地执行以下操作

form.php的

<html>
<head>
<script type="text/javascript" src="jQuery.min.js"></script>
<script type="text/javascript" src="myScript.js"></script>
</head>
<body>

<form id="myForm">
    <label for="input1">
        Input 1: <input type="text" name="input1" id="input1">
    </label>
    <label for="input2">
        Input 2: <input type="text" name="input2" id="input2">
    </label>
    <input type="submit" value="Submit My Form">
</form>

<div class="circles">... Some stuff ...</div>

</body>
</html>

myScript.js

$( document ).ready( function() {

    // Listen for our form submit
    $( '#myForm' ).submit( function(e) {
        e.preventDefault(); // Stop the form from submitting

        var datastring = $( this ).serialize(); // Serialize our form

        $.ajax({

            url: 'handler.php',
            type: 'POST',
            data: datastring,
            success: function() {
                // do whatever i want if the form posts
                $( ".circles" ).css( "width", "200px" );
            },
            error: function() {
                // do whatever i want if there is an error
                $( ".circles" ).css( "color", "red" );
            }

        }); // .ajax

    }); // .submit

}); // document.ready

handler.php

<?php

$input1 = $_POST['input1'];
$input2 = $_POST['input2'];

// do stuff

?>

如何在提交表单时更改div的维度

2 个答案:

form.php的

myScript.js

handler.php