Javascript button onclick input-Wert und post-Anforderung senden

Ich habe ein Formular, das wie folgt aussieht:

<form method="post">
    <input type="text" name="username" id="username">
    <input type="text" name="password" id="password">
    <select id="item" name="item">
        <option value="1">Blue</option>
        <option value="3">Pink</option>
        <option value="4">Black</option>
    </select>
    <input type="button" id="submit" onclick="addItem();" name="submit" value="Submit"/>
</form>

Wie kann ich mit javascript aufrufen, die addItem() - Funktion und senden eine post-Anforderung an test.php mit dem Wert der username-username, - Passwort als Passwort und Eintrag als item?

EDIT:

Dies ist der einzige code in meine addItem(); Funktion so weit:

$.post("http://test.com/test.php",{username:username, password:pword, item:item}, function(data) {
    $('#message').html(data);
});

Allerdings Frage ich mich, wie kann ich nehmen Sie die Daten aus werden alle Eingabe-Felder und setzen Sie ihn in den code habe ich oben? Dies ist, weil die Funktion wird aufgerufen durch einen Knopf und NICHT einen submit-button.

  • Lesen Sie über ajax
  • wenn Sie mit form, dann denke ich, dass addItem(); kann verwendet werden, für die Validierung Zweck, andere als Arun schlug $.ajax() oder $.post() oder $.get() wird Ihnen helfen. in diesem Fall das Formular ist nicht notwendig.
  • Schauen Sie bitte auf meinen edit, ich bin bereits über $.post(), ich muss nur herausfinden, wie nehmen Sie die Daten.
  • ziemlich einfach... nutzen Sie $('#username').val() und so weiter, wo username ist das id-Attribut des input-Feldes. dasselbe gilt für alle anderen Bereich.
InformationsquelleAutor user2898075 | 2013-12-25
  1. 2

    Zu greifen, die Daten, jQuery hat eine schöne Funktion im inneren. basierend auf den bearbeiteten Frage, können Sie versuchen, diese : 

    var username = $("#username").val();  
var pword = $("#password").val();  
var item = $("#item option:selected" ).text();
//you can check the validity of username and password here
$.post("http://test.com/test.php",{username:username, password:pword, item:item},        
function(data) {
   $('#message').html(data);
});

    (wieder, wenn Sie diesen Weg einschlagen, dann gibt es keine Verwendung von form tag.)

    InformationsquelleAutor agpt
  2. 1

    Mithilfe von jQuery können Sie senden, das Formular so einfach wie zu tun:

    $('form').submit(function(){
   $.post('path/to/server/file', $(this).serialize(),function(response){
       /* do something with returned data from server*/
   });
   return false; /* prevent browser submitting form*/
});

    $.post ist ein shortcut-Methode von $.ajax

    jQuery $.ajax() docs

    jQuery $.post() docs

    • Danke, allerdings hab ich die Ausführung der Funktion auf eine Taste ein klicken, und nicht auf eine Vorlage. Ich habe ein edit zu meiner Frage.
    • gut, wenn Sie Zitat die Frage Sie nicht, einen code. Sie können immer noch serialisiert alle Daten mit $('form').serialize(). Besser wäre, in eine form geben Sie eine ID und verwenden, die als Selektor. Wirklich nicht klar, was Ihre Frage ist aktualisiert
    • serialisieren.. schöner Weg, um durch zu gehen, ist es in der Lage, sich zu serialisieren alle Formular-element ?
    • ja, darüber Lesen Sie in der api - api.jquery.com/serialize
    InformationsquelleAutor charlietfl
  3. 0

    geben Sie einen Formularnamen und eine action-url, dann benutze das Formular.sumit () - Methode, um post-Formulardaten

    <form method='post' name='myform' action='test.php'>
...
<script type="text/javascript">
function addItem() {
  document.myform.submit();
}
</script>
    InformationsquelleAutor Cliff Liu
  4. 0
    <form action="your.php" onSubmit="return addItem()">

    Dies sollte es tun

    dann in js

    function addItem() {
//whatever you want to do
return true;
}

    =============================================================

    Ich sehe, Sie sind mit Ajax, wenn Sie es tun wollen, dann sollten Sie das folgende tun:

    $(document).on("click", "#yoursubmitbuttonID", function(e){
var password = $("#password").val();
var username = $("#username").val();
//send Ajax here
}
    InformationsquelleAutor ah-shiang han
Schreibe einen Kommentar