it-swarm.com.de

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

Ich möchte AJAX aufrufen, wenn eine Senden-Schaltfläche im Formular gedrückt wird. InFact Ich kann den <form> nicht entfernen, da ich auch die clientseitige Validierung vornehmen 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 

17
Sridhar

Fügen Sie das onsubmit-Attribut dem form-Tag hinzu:

<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 fügen return false am Ende hinzu:

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

Der richtige jQuery-Weg wäre:

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

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

Wie Sie bereits gesagt haben, können Sie auch das <form>-Element entfernen und den Ajax-Aufruf einfach an das click-Ereignis der Schaltfläche binden.

27
Explosion Pills
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>
0
Rahul Akula

verwenden Sie jQuery.post und ändern Sie die Schaltfläche "Senden".

Die Schaltfläche zum Senden wird zum Senden von Daten an den Server über POST (native Methode, nicht ajax) erstellt. Ich empfehle die Verwendung nur in besonderen Fällen, z.

Wenn Sie weiterhin die Schaltfläche "Senden" für eine Ajax-Anforderung verwenden, haben Sie viele Probleme mit dem IE.

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

0
Bkay