Jquery onchange sélectionnez soumettre un formulaire en PHP

Je n'ai pas de code pour vraiment vous montrer ici, mais disons que j'ai un formulaire avec 3 champs CACHÉS qui contiennent la date, la ville et l'adresse.
J'ai aussi un select avec 3 options (disons que Apple, Microsoft et Google).

Ce que je veux, c'est que lorsqu'un utilisateur modifie l'sélectionnez une option différente, jquery doit envoyer la valeur de la selectbox + les 3 champs cachés à une page PHP, dire proces.php. Proces.php les poignées de la mysql_query etc, et il ne donne rien en retour.

Quelqu'un peut me montrer comment c'est fait? Je ne vous attendez pas à quiconque d'écrire un script entier pour moi puisque je n'ai pas fournir tout le code html, mais juste le contour, ou peut-être un lien vers un tutoriel ou quelque chose.

InformationsquelleAutor Student | 2012-05-01
  1. 7

    Tout d'abord votre formulaire doit ressembler à quelque chose comme ceci:

    <form action="process.php" method="post" id="myForm">
    <select name="site" id="site">
        <option>Apple</option>
        <option>Google</option>
        <option>Microsoft</option>
    </select>
    <input type="hidden" name="date" value="01/05/2012" />
    <input type="hidden" name="city" value="London" />
    <input type="hidden" name="address" value="[... address ...]" />
</form>

    Puis à soumettre via AJAX, vous utilisez le serialize() méthode pour recueillir les données de formulaire:

    $("#site").on("change", function() {
    var $form = $("#myForm");
    var method = $form.attr("method") ? $form.attr("method").toUpperCase() : "GET";
    $.ajax({
        url: $form.attr("action"),
        data: $form.serialize(),
        type: method,
        success: function() {
            //do stuff with the result, if you want to 
        }
    });
});

    Alternativement, si vous ne voulez pas utiliser de l'AJAX, un peu le niveau de soumission de formulaire, vous pouvez déclencher le formulaire, comme ceci:

    $("#site").on("change", function() {
    $("#myForm").submit();
});
    • Merci pour cette réponse, cela semble fonctionner, mais il m'envoie process.php tandis que je veux process.php à courir sur son propre dans le fond, et l'utilisateur ne doit pas être dirigé vers process.php est-ce possible???
    • Oui - c'est ce que mon premier exemple (à l'aide de $.ajax()) n'.
    • Parfait! Exactement ce que je voulais.
    InformationsquelleAutor Rory McCrossan
  2. 1

    si vous souhaitez envoyer le formulaire à l'aide de jquery, vous pouvez utiliser Jquery Forme de plugin<

    http://jquery.malsup.com/form/
    donc, fondamentalement, ce que vous pouvez faire est d'utiliser 

    $(document).ready(function(){
$('form selector').ajaxForm(opts);
//u can define the opt urself itz easy look at the link
$("selects selector").change(function(){
$(form selector).ajaxSubmit(function(){//something you wanna do if form is submitted successfully})
});
});
    InformationsquelleAutor Parv Sharma
  3. 1

    Nous allons le voir, donc, c'est une forme, et il est soumis lorsque le menu déroulant, sélectionnez change?
    Vous n'avez pas vraiment besoin tu utiliser AJAX pour que.
    Vous pouvez utiliser le jquery .modifier() la méthode comme ceci:

    $('.mydropdown').change(function() {
  //Also do some checking to see if the values are not empty 
  //and then submit the form using:
  $('#myform').submit();
});

    dans le fichier php, vous pouvez les obtenir à l'aide de l' $_POST variable.

    InformationsquelleAutor Robert
  4. 1
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<form id="form1" name="form1" method="post" action="#">
    <label for="brand">Brand</label>
    <select name="brand" id="brand">
        <option>Apple</option>
        <option>Microsoft</option>
        <option>Google</option>     
    </select>
    <input type="hidden" name="date" id="date" value="7/4/1776" />
    <input type="hidden" name="city" id="city" value="My City"  />
    <input type="hidden" name="address" id="address" value="123 Fake Street" />
</form>
<script type="text/javascript" src='//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript">
    $('#brand').on('change',function() {
        $.post("process.php", $("#form1").serialize());
    });
</script>
</body>
</html>
    InformationsquelleAutor mrbinky3000