2012-06-02 6 views
8

Wenn ich diese Form habe, die die Post-Daten auf der Seite selbst übermittelt:Sendet Post-Daten mit jquery auf Formular Vorlage

<form method="post"> 
    <input type="text" name="name"/> 
    <input type="submit"/> 
</form> 

Wie kann ich JavaScript/jQuery verwenden, um ein zusätzliches POST-Daten zu injizieren. Dies wäre einfacher, wenn ich das Formular nur über AJAX über eine der Funktionen wie $.post(), $.get() oder $.ajax() absende. Aber ich möchte hier das Formular nicht über Ajax einreichen.

Die zusätzlichen Daten sind in JavaScript. Ich denke darüber nach, einfach ein neues verstecktes Feld in das DOM einzufügen, in das ich die Daten eingeben werde, so dass es mit dem Formular eingereicht wird, aber gibt es andere Möglichkeiten, es zu tun?

Bitte kommentieren Sie, wenn Sie mehr Code/Erklärung benötigen.

+0

warum wurde diese Downvoted? –

Antwort

11

Anstatt eine Senden-Schaltfläche zu verwenden, verwenden Sie eine normale Schaltfläche und steuern Sie die Übermittlung über Javascript. In Ihrem Javascript müssen Sie das Formular serialisieren und es zusammen mit allem, was Sie wollen, als Daten übergeben.

<script> 

    $(document).ready(function() { 

     var extra_data = "This is more stuff to send"; 

     $('#submit').click(function() { 
      $.ajax({ 
      type: "POST", 
      url: "form.php", 
      data: {'form': $("#my_form").serialize(), 'other': extra_data}, 
      success: function(msg) { 
       alert("Form Submitted: " + msg); 
      } 
      }); 

     }); 

    }); 

</script> 

<form id="my_form" method="post"> 
    <input type="text" name="name" /> 
    <input type="button" id="submit" /> 
</form> 
+0

Das versuche ich im Fragetext zu sagen. Ich schätze, ich muss nur Ajax verwenden, um das Formular dann einzureichen. –

+0

Sie haben zwei Möglichkeiten: 1) Versteckte Felder in Ihrem Formular. 2) AJAX. Sie wählen, aber persönlich denke ich, dass die AJAX-Methode robuster ist und mehr Funktionalität wie Formularvalidierung vor der Einreichung ermöglicht. –

1
<head> 
    <script src="jquery/jquery-1.11.1.min.js"></script> 
    <script> 
    $(function() { 
     $('#form_id').on('click','#submit', function(e){ 
      e.preventDefault(); 
      $.ajax({ 
       type: "POST", 
       url: "get_Ajax.php", 
       data: $('#form_id').serialize(), 
       success: function(data) { 
        alert(data); 
       } 
      }); 
      return false; 
     }); 
    }); 
    </script> 
</head> 
<form method="post" id="form_id"> 
<input type="text" name="ime"> 
<input type="button" id="submit" name="submit" value="Send"> 
</form> 

** ** get_ajax.php

<?php 
$ime = $_POST['ime']; 

echo "Your name is $ime"; 
?>