Mootools Form onsubmit without domready_问答_开发者

开发者 https://www.devze.com 2023-03-26 04:23 出处：网络

There is nothing wrong with the following piece of mootools code. What I would like to do rewrite it with onsubmit event and without domready as on the second code block. Thanks.

相关专题：forms mootools

There is nothing wrong with the following piece of mootools code. What I would like to do rewrite it with onsubmit event and without domready as on the second code block. Thanks.

<html> 
<head>  
<title>Simplest Form Ajax</title> 
<script type="text/javascript" src="../mootools/mootools-core-1.3.2fc.js"></script>
    <script type="text/javascript">
    window.addEvent('domready', function() {
        $('myForm').addEvent('submit', function(e) { 
            e.stop();
            this.set('send', {
                onComplete: function(response) {
                    $('log_res').set('html', response);
                }
            });
            this.send();
        });
    });    
</script>
</head>  
<body> 
<h3>Send a Form with Ajax</h3>
<form id="myForm" action="ajaxRes.php" method="post">
    <div>
        <p>Enter something:
            <input type="text" name="something" value="John" />
            <input type="submit" />
        </p>
    </div>
</form></br></br>
<h3>Ajax Response</h3>
<div id="log_res"></div>
</body>
</html>

Unfinished code:

<html> 
<head>  
<title>Simplest Form Ajax</title> 
<script type="text/javascript" src="../mootools/mootools-core-1.3.2fc.js"></script>
    <script type="text/javascript">
    function loadMe() { 
          ...
    }); 
</script>
</head>  
<body> 
<h3>Send a Form with Ajax</h3>
<form id="myForm" action="ajaxRes.php" onsubmit="loadMe()" method="post">
    <div>
        <p>Enter something:
            <inp开发者_运维百科ut type="text" name="something" value="John" />
            <input type="submit" />
        </p>
    </div>
</form></br></br>
<h3>Ajax Response</h3>
<div id="log_res"></div>
</body>
</html>

you can use the action attribute of a form with the javascript: prefix (http://jsfiddle.net/mT7WB/)

Here could be a possible implementation (code not tested):

<html> 
<head>  
<title>Simplest Form Ajax</title> 
<script type="text/javascript" src="../mootools/mootools-core-1.3.2fc.js"></script>
    <script type="text/javascript">
    function submit() { 
          var obj = {};
          ["something","somethingElse"].each(function(n) {
                obj[n] = ("myForm").getElement("input[name="+n+"]").get("value");
          });
          new Request.HTML({"url" : "ajaxRes.php"}).addEvent("success", function(resp) {$("log_res").adopt(resp);}).post(obj);
    }); 
</script>
</head>  
<body> 
<h3>Send a Form with Ajax</h3>
<form id="myForm" action="javascript:submit()" method="post">
    <div>
        <p>Enter something:
            <input type="text" name="something" value="John" />
            <input type="text" name="somethingElse" value="John" />
            <input type="submit" />
        </p>
    </div>
</form></br></br>
<h3>Ajax Response</h3>
<div id="log_res"></div>
</body>
</html>

Cheers !