Ajax soumette diverses valeurs d'entrée avec jquery UI next button click

Je travaille actuellement avec les onglets jquery ui et ajax / post submit sans actualiser la page. Avec quelques conseils, j'ai pu obtenir le div #wmd-preview envoyé lors du clic sur le bouton suivant. La question est que j'ai aussi d'autres champs que j'aimerais soumettre en même temps lorsque le prochain bouton est cliqué dans différents onglets.

Comment puis-je soumettre les valeurs d'entrée de différents champs de saisie dans différents onglets en cliquant sur le bouton suivant? EXEMPLE

(Pour certains essais, j'ai actuellement les autres champs de saisie envoyés avec keyup et la configuration de la minuterie)

JS-NEXT / bouton précédent fusionné avec submit / ajax

 <script> var currentTab = 0; $(function() { var $tabs = $('#tabs').tabs({ disabled: [0, 1, 2] , select: function() { if (currentTab == 0) { $.ajax({ type: "POST", url: "test1.php", data: { "wmdVal": $("#wmd-preview").html() }, success: function(result) { $('#wmd_result').html( $('#resultval', result).html()); } }); } } , show: function(event, ui) { currentTab = ui.index; } }); $(".ui-tabs-panel").each(function(i) { var totalSize = $(".ui-tabs-panel").size() - 1; if (i != totalSize) { next = i + 2; $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page »</a>"); } if (i != 0) { prev = i; $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>« Prev Page</a>"); } }); $('.next-tab, .prev-tab').click(function() { var tabIndex = $(this).attr("rel"); $tabs.tabs('enable', tabIndex) .tabs('select', tabIndex) .tabs("option","disabled", [0, 1]); return false; }); }); </script>

HTML

 <div id="tab-1" class="ui-tabs-panel ui-tabs-hide"> <label for="title">Title</label> <input type="text" id="title" name="title" size="60" autocomplete="off" value="<? $title ?>"/> <div id="wmd-editor" class="wmd-panel"> <div id="wmd-button-bar"></div> <textarea id="wmd-input" name="wmd-input"></textarea> </div> <div id="wmd-preview" class="wmd-panel"></div> <div id="wmd_result"></div> <div id="title_input"style="padding:20px;"></div> </div> <div id="tab-2" class="ui-tabs-panel ui-tabs-hide"> <label for="name">Name</label> <input type="text" id="name" name="name" size="60" autocomplete="off" value="<? $name ?>"/> <div id="name_input"></div> </div>

PHP

  <? if (isset($_POST['title'])){ $wmdVal = $_POST['title']; echo ('<div id="title_input"><span id="resultval"><h2>Title Echo result:</h2>'.$wmdVal.'</span></div>'); } if (isset($_POST['wmdVal'])){ $wmdVal = $_POST['wmdVal']; echo ('<div id="wmd_result"><span id="resultval"><h2>Description Echo result:</h2>'.$wmdVal.'</span></div>'); } if (isset($_POST['name'])){ $name = $_POST['name']; echo ('<div id="name_input"><span id="resultval"><h2>Description Echo result:</h2>'.$name.'</span></div>'); } ?>

Pour autant que je le sache, peu importe si les champs sont en onglets ou cachés, pourvu qu'ils ont une ID, vous pouvez les obtenir. Lors de l'utilisation, par exemple: $('#bla').val() , il recherchera toute la page jusqu'à ce qu'il trouve un élément avec l'ID "bla".

Par conséquent, il suffit de l'ajouter à l' data option , comme ça:

 {key1: 'value1', key2: 'value2'}

Essayer:

 data: { "wmdVal": $("#wmd-preview").html() , "name": $("#name").val() , "title": $("#title").val() },

Doit fonctionner (pas testé)

METTRE À JOUR:

Après avoir regardé le code source de votre site, je pense que j'ai trouvé le problème. À partir des résultats du clic sur le bouton suivant, vous pouvez comprendre qu'il existe une variable $ _POST ['title'] (isset), mais elle est vide. Il y a donc un problème dans la demande ajax, cette ligne:

"Titre": $ ("# titre"). Html ()

Vous ne cherchez pas le html() de ce input field . Vous recherchez val() .

Modifiez la ligne ci-dessus à:

"Titre": $ ("# title"). Val ()

Devrais travailler maintenant, me mettre à jour si pas

Si vous souhaitez exécuter AJAX POST chaque fois que vous modifiez l'onglet. Vous devez supprimer cette condition: si (currentTab == 0) { . Parce que celui-ci oblige le code à s'exécuter, juste au moment où le premier TAB est sélectionné.

En plus, vous pouvez publier toutes les données que vous souhaitez. Il suffit de les transmettre aux propriétés "données:" de l'ajax. Et puisqu'ils sont globaux et uniques, vous pouvez appeler l'un d'eux par leurs identifiants. Comme ça:

 data:{ param1: $("#input1").val(), param2: $("#input2").val(), paramHtml1: $("#elementHtml1").html() }

 "title": $("#title").html() should be "title": $("#title").val() -> you want the value of the field in question. This will send the correct value to the server.

Il semble que maintenant, vous demandez pourquoi rien n'est imprimé dans la zone 'Titre Echo résultat:'.

Je pense qu'une bonne prochaine étape pourrait être:

 success: function(result) { // fill title_input with the result of the ajax call $('#title_input').html(result); }

Cela vous donnera des résultats, mais je pense probablement que ce n'est pas la sortie que vous voulez. Peut-être réponds-tu avec quel contenu tu veux dans la 'zone de titre echo'