2011-08-04 3 views
0

다음 mootools 코드는 아무 문제가 없습니다. 내가 뭘하고 싶은지 onsubmit 이벤트와 두 번째 코드 블록에서와 마찬가지로 domready없이 다시 작성하십시오. 감사.Mootools는 domready없이 onsubmit을 처리합니다

<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> 

미완성 코드 :

<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: 
      <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> 
+0

왜 두 번째 블록을 선호합니까? 첫 번째는 우아한 솔루션으로 간주됩니다. 눈을 아프면 외부 파일로 이동하십시오. :) –

답변

0

당신은 자바 스크립트로 폼의 action 속성을 사용할 수 있습니다 : 접두사 다음 (http://jsfiddle.net/mT7WB/)

을 (코드는 테스트하지) 가능한 구현 될 수있다 :

<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> 

건배!

관련 문제