Ajax envíe varios valores de entrada con la interfaz de usuario de jquery, haga clic en el botón siguiente

Question

Actualmente estoy trabajando con las pestañas de jquery ui y ajax/post submit sin actualización de la página. Con un poco de guía he podido enviar el div #wmd-preview enviado al hacer clic en el siguiente botón. El problema es que también tengo otros campos que me gustaría enviar al mismo tiempo cuando se hace clic en el siguiente botón en varias pestañas.

¿Cómo puedo enviar los valores de entrada de varios campos de entrada en diferentes pestañas al hacer clic en el siguiente botón? EXAMPLE

(para algunas pruebas que actualmente tienen los otros campos de entrada se someten con keyup y configuración del temporizador)

JS-Botón NEXT/Anterior se fusionó con enviar/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 &#187;</a>"); 
       } 
       if (i != 0) { 
        prev = i; 
        $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; 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>'); 
} 
?> 

Answer 1

Por lo que yo sé, no hay ninguna materia si los campos están en las pestañas u ocultos, , siempre y cuando tengan ID, puede obtenerlos. Al usar, por ejemplo: $('#bla').val(), buscará en toda la página hasta que encuentre un elemento con la ID "bla".

Por lo tanto, sólo tiene que añadir a la data option, así:

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

Probar:

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

debería funcionar (no se han probado)

ACTUALIZACIÓN:

Después de mirar tu siéntate El código fuente de e Creo que encontré el problema. A partir de los resultados de hacer clic en el siguiente botón, puede comprender que hay una variable $ _POST ['title'] (isset), sin embargo está vacía. Así que hay un problema en la solicitud de ajax, Esta línea:

"title":. $ ("# Título") html()

usted no está buscando la html() de que input field. Está buscando val().

Cambie la línea anterior a:

"title":. $ ("# Título") val()

debería funcionar ahora, me actualizar si no

Answer 2

Si desea ejecutar AJAX POST siempre que cambie la pestaña.Debe eliminar esta condición: if (currentTab == 0) {. Porque este obliga al código a ejecutarse, justo cuando se selecciona la primera TAB.

Además de eso, puede publicar cualquier información que desee. Solo tiene que pasarlos al "data:" propiedades del ajax. Y dado que son globales y únicos, puede llamar a cualquiera de ellos por sus ID. Al igual que:

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

Answer 3

"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. 

De alguna manera parece que ahora se está preguntando por qué no se está impreso en el 'resultado Título Echo:' área.

Creo que un buen paso siguiente podría ser:

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

qué le dará alguna salida, pero probablemente no piensan que la salida que desea. Tal vez responda con qué contenido desea en el 'área de eco del título'