Ajax invia vari valori di input con l'interfaccia utente di jquery, quindi fai clic sul pulsante

Question

Attualmente sto lavorando con le schede ui jquery e invia/invia post senza aggiornamento della pagina. Con alcune indicazioni sono riuscito a ottenere il div #wmd-preview inviato quando si fa clic sul pulsante successivo. Il problema è che ho anche altri campi che mi piacerebbe inviare allo stesso tempo quando il pulsante successivo viene cliccato in varie schede.

Come posso inviare i valori di input di vari campi di input in diverse schede quando si fa clic sul pulsante successivo? EXAMPLE

(per alcuni test Al momento ho altri campi di input presentare con keyup e impostazione del timer) pulsante

JS- successiva/precedente fusa con presentare/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

Per quanto ne so, non c'è non importa se i campi sono in schede o nascosti, purché abbiano ID, è possibile ottenere loro. Quando si utilizza, ad esempio: $('#bla').val(), cercherà l'intera pagina finché non troverà un elemento con l'ID "bla".

Pertanto, basta aggiungerlo alla data option, come quella:

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

Prova:

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

dovrebbe funzionare (non testato)

UPDATE:

Dopo aver guardato il tuo posto Il codice sorgente di e penso di aver trovato il problema. Dai risultati del clic sul pulsante successivo puoi capire che c'è una variabile $ _POST ['title'] (isset), tuttavia è vuota. Quindi c'è un problema nella richiesta Ajax, Questa linea:

"title":. $ ("# Titolo") html()

Non stai cercando il html() di quello input field. Stai cercando val().

Modificare la linea di cui sopra a:

"title":. $ ("# Titolo") val()

Ora dovrebbe funzionare, mi aggiornare se non

Answer 2

Se si desidera eseguire il POST AJAX ogni volta che si modifica la scheda.Devi rimuovere questa condizione: if (currentTab == 0) {. Perché questo sta forzando l'esecuzione del codice, proprio quando viene selezionato il primo TAB.

Oltre a ciò, è possibile pubblicare qualsiasi dato desiderato. Hai solo bisogno di passarli a "dati:" proprietà dell'ajax. E dal momento che sono globali e unici, puoi chiamare qualcuno di loro con i loro ID. Come quella:

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. 

E 'sorta di sembra che ora si sta chiedendo il motivo per cui non è in corso di stampa nel 'risultato Titolo Echo:' zona.

Penso che un buon passo successivo potrebbe essere:

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

Che vi darà un po 'di uscita, ma probabilmente non credo l'uscita che si desidera. Forse rispondi con i contenuti che desideri nell'area "title echo area"