HTML: JavaScript: Formularübermittlung blockieren und Javascript-Funktion aufrufen

Question 1

Ich möchte einen AJAX-Aufruf tätigen, wenn eine Senden-Schaltfläche im Formular gedrückt wird. Tatsächlich kann ich die nicht entfernen <form> weil ich auch eine clientseitige Validierung machen möchte. Ich habe diesen Code ausprobiert.

<form name="search" >
Name: <input type="text" name="name1"/>
Age: <input type="text" name="age1"/>
<input type="submit" name="Submit" value="Submit" onclick="makeSearch()"/>
</form>

JS

function makeSearch(){
alert("Code to make AJAX Call");
}

Nach Verwendung dieses Codes wird alert() nicht angezeigt, aber die Seite wird neu geladen. Ich möchte das Neuladen der Seite blockieren und die JS-Funktion aufrufen.

Vielen Dank

Question 2

Ergänzen Sie die onsubmit Attribut zu form Schild:

<form name="search" onsubmit="return makeSearch()" >
  Name: <input type="text" name="name1"/>
  Age: <input type="text" name="age1"/>
  <input type="submit" name="Submit" value="Submit"/>
</form>

Und Javascript hinzufügen return false Am Ende:

function makeSearch() {
  alert("Code to make AJAX Call");
  return false;
}

Question 3

Der richtige jQuery-Weg wäre:

$("form").on('submit', function (e) {
   //ajax call here

   //stop form submission
   e.preventDefault();
});

Wie du schon sagtest, könntest du die auch entfernen <form> Element und binden Sie einfach den Ajax-Aufruf an die Schaltfläche click Veranstaltung.

Question 4

verwenden jQuery.postund ändern Sie die Senden-Schaltfläche.

Die Schaltfläche „Senden“ wird zum Senden von Daten an den Server erstellt POST (native Methode, nicht Ajax)empfehle ich, es nur in besonderen Fällen zu verwenden, beispielsweise beim Hochladen einer Datei.

Wenn Sie weiterhin die Submit-Schaltfläche für die Ajax-Anfrage verwenden, werden Sie viele Probleme mit dem IE haben.

    <html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script language="javascript">
            function makeSearch()
            {
                if(validateIdata())
                {
                    alert("send ajax request");
                    return;
                    $.ajax({    
                      type: 'POST',
                      url: url, //- action form
                      data: {name1:$('#name1').val(),age1:$('#age1').val()},
                      success: function(){
                        alert('success');
                      }
                    });
                }
            }

            function validateIdata()
            {
                if($('#name1').val() =='')
                {
                    alert("Invalid Name");
                    return false;
                }

                if($('#age1').val() =='')
                {
                    alert("Invalid Age");
                    return false;
                }

                return true;
            }
        </script>
    </head>
    <body>
        <form name="search" >
        Name: <input type="text" id="name1" name="name1"/>
        Age: <input type="text" id="age1" name="age1"/>
        <input type="button" name="Submit" value="Submit" onclick="makeSearch()"/>
    </form>
    </body>
    </html>

Question 5

<form name="search" >
Name: <input type="text" name="name1"/>
Age: <input type="text" name="age1"/>
<input type="submit" name="Submit" value="Submit" onclick="return makeSearch();"/>
</form>

function makeSearch(){
alert("Code to make AJAX Call");
}

Verwenden Sie einfach die Return-Funktion in der Onclick-Funktion, es wird Ihnen gut tun

Question 6

document.getElementById("bt1").type="submit";
                    document.getElementById("bt1").onclick="";
                    var elem = document.getElementById("bt1");
                    if (typeof elem.onclick == "function") {
                        elem.onclick.apply(elem);
                    }


<form id="org" action="">
                        <fieldset class="log">
                            <legend>Log in</legend>
                            <label for="uname">Username</label>
                            <input type="text" name="uname" id="uname" value="" required/><br />
                            <label for="pword">Password</label>
                            <input type="password" name="pword" id="pword" value="" required/><br />
                            <input type="button" onclick="organizer()" value="LOG IN" class="red-btn" id="bt1"/>
                        </fieldset>
                    </form>

Question 7

Endlich bekam ich die Antwort

$("form").live("submit", function() {
        makeSearch();
        return false;
    });