按钮上没有调用javascript函数

时间:2015-12-09 10:12:41

标签: javascript php jquery html ajax

<!DOCTYPE html>
    <html>
    <head>
        <title>Login page</title>
    </head>
    <body style="background-color:red;">
        I was just thinking that I could do us a private lil webpage ^^
    I love you so much hun! <3

        <form name="Wish">
            Wish<input type="text" name="wish"/>
            <input type="submit" class="button" onclick="sendtoajax(this.form)" />
            <input type="reset" value="Cancel"/>
        </form>

<script language="javascript">

function sendtoajax(form){
var xmlhttp;
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
alert('done')
 }
}

xmlhttp.open("POST","ajax.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("form.wish.value");
}

</script>


    </body>
</html>

我想在按钮点击时执行该功能,如果我只是将它保持原样,那么它会立即执行,但是当我将它放入一个函数并且我在按钮上调用它时,它根本不会...

3 个答案:

答案 0 :(得分:1)

更改type="button"的{​​{1}}。如果input有type =“submit”,则input submits,因此您的函数将不会被调用。

form

答案 1 :(得分:0)

<!DOCTYPE html>
    <html>
    <head>
        <title>Login page</title>
        <script language="javascript">
            function sendtoajax(){
                var xmlhttp=window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
                xmlhttp.onreadystatechange=function(){
                    if (xmlhttp.readyState==4 && xmlhttp.status==200){
                        alert('done')
                    }
                }
                xmlhttp.open("POST","ajax.php",true);
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xmlhttp.send( 'wish='+document.querySelectorAll('input[name="wish"]')[0].value );
            }
        </script>
    </head>
    <body style="background-color:red;">
        I was just thinking that I could do us a private lil webpage ^^ I love you so much hun! <3

        <form name='Wish'>
            <label>Wish<input type="text" name="wish" /></label>
            <input type="button" class="button" value='Wish now' onclick="sendtoajax()" />
            <input type="reset" value="Cancel"/>
        </form>
    </body>
</html>

答案 2 :(得分:0)

在您的代码中,$('window').onscroll = function () { $('.window').hide(); } 提交并重定向。 AJAX表单不是为了重定向。要像这样给function adjustHeightForAttributes() { var elementHeight = document.getElementById('listSearchOptions'); var childNoLen = $('.attributelistContainer .requestedAttr span').length; if (childNoLen >= 1) { $('.attributelistContainer').css({"overflow-y":"auto"}); } // Establishing media check var widthMinCheck = window.matchMedia("(min-width: 768px)").matches; var widthMaxCheck = window.matchMedia("(max-width: 1024px)").matches; var orientationCheck = window.matchMedia("(orientation: landscape)").matches; var orientationCheckPortrait = window.matchMedia("(orientation: portrait)").matches; //True / False values check var bothFalse = vm.searchByRoomNo === false && childNoLen === 0; var bothTrue = vm.searchByRoomNo === true && childNoLen >= 1; var roomSearchTrue = vm.searchByRoomNo === true && childNoLen === 0; var childLenTrue = vm.searchByRoomNo === false && childNoLen >= 1; //Check if scroll exists var scrollExists = $('#listSearchOptions')[0].scrollHeight > $('#listSearchOptions')[0].clientHeight; if (widthMinCheck && widthMaxCheck && orientationCheck) { console.log("oreintationCheck.. " + orientationCheck); if (bothFalse) { if(scrollExists) { console.log("Height..in adjustSearchAttributesheight6." + $('#listSearchOptions')[0].clientHeight); $('#listSearchOptions').css({"height":"auto", "max-height":""}); } else { console.log("Height..in adjustSearchAttributesheight7." + $('#listSearchOptions')[0].clientHeight); $('#listSearchOptions').css({"height":"52vh","max-height":"52vh"}); } } if (childLenTrue) { if (scrollExists) { console.log("Height..in adjustSearchAttributesheight1." + $('#listSearchOptions')[0].clientHeight); $('#listSearchOptions').css({"max-height":"38vh"}); } else { console.log("Height..in adjustSearchAttributesheight2." + $('#listSearchOptions')[0].clientHeight); $('#listSearchOptions').css({"max-height":"40vh"}); } } if (bothTrue) { if (scrollExists) { console.log("Height..in adjustSearchAttributesheight3." + $('#listSearchOptions')[0].clientHeight); $('#listSearchOptions').css({"max-height":"30vh"}); } else { console.log("Height..in adjustSearchAttributesheight4." + $('#listSearchOptions')[0].clientHeight); $('#listSearchOptions').css({"max-height":"32vh"}); } } if (roomSearchTrue) { if ($('#listSearchOptions')[0].scrollHeight > $('#listSearchOptions')[0].clientHeight) { console.log("Height..in adjustSearchAttributesheight5." + $('#listSearchOptions')[0].clientHeight); $('#listSearchOptions').css({"max-height":"44vh"}); } else { console.log("Height..in adjustSearchAttributesheight5." + $('#listSearchOptions')[0].clientHeight); $('#listSearchOptions').css({"max-height":"46vh"}); } } } else if (orientationCheckPortrait) { if (bothFalse) { if (scrollExists) { console.log("Height..in adjustSearchAttributesheight6." + $('#listSearchOptions')[0].clientHeight); $('#listSearchOptions').css({"height":"auto", "max-height":""}); } else { console.log("Height..in adjustSearchAttributesheight7." + $('#listSearchOptions')[0].clientHeight); $('#listSearchOptions').css({"max-height":"42vh"}); } } if (childLenTrue) { if ($('#listSearchOptions')[0].scrollHeight > $('#listSearchOptions')[0].clientHeight) { console.log("Height..in adjustSearchAttributesheight1." + $('#listSearchOptions')[0].clientHeight); $('#listSearchOptions').css({"max-height":"38vh"}); } else { console.log("Height..in adjustSearchAttributesheight2." + $('#listSearchOptions')[0].clientHeight); $('#listSearchOptions').css({"max-height":"40vh"}); } } if (bothTrue) { if (scrollExists) { console.log("Height..in adjustSearchAttributesheight3." + $('#listSearchOptions')[0].clientHeight); $('#listSearchOptions').css({"max-height":"30vh"}); } else { console.log("Height..in adjustSearchAttributesheight4." + $('#listSearchOptions')[0].clientHeight); $('#listSearchOptions').css({"max-height":"32vh"}); } } if (roomSearchTrue) { if ($('#listSearchOptions')[0].scrollHeight > $('#listSearchOptions')[0].clientHeight) { console.log("Height..in adjustSearchAttributesheight5." + $('#listSearchOptions')[0].clientHeight); $('#listSearchOptions').css({"max-height":"45vh"}); } else{ console.log("Height..in adjustSearchAttributesheight5." + $('#listSearchOptions')[0].clientHeight); $('#listSearchOptions').css({"max-height":"48vh"}); } } } else{ if (bothFalse) { if (scrollExists) { console.log("Height..in adjustSearchAttributesheight6." + $('#listSearchOptions')[0].clientHeight); $('#listSearchOptions').css({"height":"auto", "max-height":""}); } else { console.log("Height..in adjustSearchAttributesheight7." + $('#listSearchOptions')[0].clientHeight); $('#listSearchOptions').css({"max-height":"42vh"}); } } if (childLenTrue) { if ($('#listSearchOptions')[0].scrollHeight > $('#listSearchOptions')[0].clientHeight) { console.log("Height..in adjustSearchAttributesheight8." + $('#listSearchOptions')[0].clientHeight); $('#listSearchOptions').css({"max-height":"27.2vh"}); } else { console.log("Height..in adjustSearchAttributesheight9." + $('#listSearchOptions')[0].clientHeight); $('#listSearchOptions').css({"max-height":"27vh"}); } } if (roomSearchTrue) { if (scrollExists) { console.log("Height..in adjustSearchAttributesheight10." + $('#listSearchOptions')[0].clientHeight); $('#listSearchOptions').css({"max-height":"34vh"}); } else { console.log("Height..in adjustSearchAttributesheight11." + $('#listSearchOptions')[0].clientHeight); $('#listSearchOptions').css({"max-height":"36vh"}); } } if (bothTrue) { if (scrollExists) { console.log("Height..in adjustSearchAttributesheight12." + $('#listSearchOptions')[0].clientHeight); $('#listSearchOptions').css({"max-height":"18.5vh"}); } else { console.log("Height..in adjustSearchAttributesheight13." + $('#listSearchOptions')[0].clientHeight); $('#listSearchOptions').css({"max-height":"20.8vh"}); } } } }

<form>

或者在您的AJAX代码中提供return false;

<input type="submit" class="button" onclick="sendtoajax(this.form); return false;" />

如果你可以使用jQuery,那很容易。 Lemme使用与你相同的代码,并以简单的方式将其转换为jQuery并解释:

event.preventDefault()