用按鈕單擊提交輸入字段值

我正在使用它假定用按鈕單擊提交的ajax表單。我曾見過類似的項目，但我正陷入死衚衕。我遇到的問題是輸入字段值沒有得到標籤2中的回聲。我設置了一個參數var currentTab來指示並比較何時對下一個標籤進行了點擊。用按鈕單擊提交輸入字段值

如何在點擊完成後顯示輸入字段的值？
（另外）還有如何適應代碼，如果將來我有多個選項卡與輸入字段和最後一個選項卡將PHP值回顯出的位置？

謝謝

AJAX/JS功能

<script> 
var currentTab = 0; 
     $(function() { 
      var $tabs = $('#tabs').tabs({ 
       disabled: [0, 1] 
       , select: function() { 
        if (currentTab == 0) { 
         $.ajax({ 
          type: "POST", 
          url: "tabs.php", 
          data: { "textarea": $("#textarea_input").html(), 
       "title": $("#title_input").html() 
        }, 
      success: function(result) { 
       $("#tab-2").html(result); 
      } 

        }); 

     } 
       } 
       , 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>

PHP

<? 
if (isset($_POST['title'])){ 
    $title = $_POST['title']; 
    echo ('<div id="title_result"><span class="resultval"><h2>Title Echo result:</h2>'.$title.'</span></div>'); 
      } 

if (isset($_POST['textarea'])){ 
    $textarea = $_POST['textarea']; 
    echo ('<div id="textarea_result"><span class="resultval"><h2>Textarea Echo result:</h2>'.$textarea.'</span></div>'); 
      } 

?>

HTML TAB2就是結果應該是PHP的回聲出

點

<div id="tab-1" class="ui-tabs-panel ui-tabs-hide"> 
     <label for="title">Title</label> 
    <input type="text" id="title_input" name="title_input" size="60" autocomplete="off" value="<?=$title?>"/><br> 
    <label for="textarea_input">Textarea</label> 
    <textarea id="textarea_input" name="textarea_input"><?=$textarea?></textarea> 
</div> 

<div id="tab-2" class="ui-tabs-panel ui-tabs-hide"> 
    <div id="title_result" style="padding:20px;"></div> 
    <div id="textarea_result" style="padding:20px;"></div> 
</div>

來源

2012-08-10 techAddict82

類似的帖子：http://stackoverflow.com/questions/11754774/submit-input-field-value-with-jquery-ui-next-button-and-php-echo-the-結果 – diEcho 2012-08-10 05:35:32

我們在談論Ajax。點擊「提交」將不會重新加載頁面。 – 2012-08-10 05:39:24

你應該使用'$（「＃textarea-input」）.val（）'而不是'$（「＃textarea-input」）。html（）' - 你的輸入根本不會被髮送到服務器。在你的網絡電話。 – 2012-08-10 06:13:42

幾點意見：

你應該首先從PHP添加呼應HTML，只有這樣你才能從$（「＃resultval」）

我將解釋jQuery的訪問 - 看在你的「成功」處理

success: function(result) { 
        $('#textarea_result').html($('#resultval', result).html()); 
        $('#title_result').html($('#resultval', result).html()); 
        }

的代碼應該是

success: function(result) { 
        $('#textarea_result').html(result); 
        $('#title_result').html(result); 
        }

如果......但我不認爲這是你的意思。

如果你要問我 - 在PHP渲染整個下一個標籤，並完成類似$("#tab2").html(result);

評論＃2 你有2點相同的標識 - resultval ..

評論＃3 - 你正在發送中的Ajax「文本區域」和「稱號」，而是指$ _ POST [「textarea_input」]和$ _POST [「標題輸入」]

評論＃4 - 您正在使用$("#textarea-input").html()獲得的價值，而不是的$("#textarea-input").val()。相同的「title_input」

這是我的工作版本（只是刪除「頭」的東西）。

這是我的main.php -

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="/stackoverflow/public/jquery-ui-1.8.22.custom.css" media="screen" /> 
    <script src="/stackoverflow/public/jquery-1.7.2.min.js"></script> 
    <script src="/stackoverflow/public/jquery-ui-1.8.22.custom.min.js"></script> 
</head> 

<body> 
<div id="page-wrap"> 
     <div id="tabs"> 

      <ul> 
       <li><a href="#tab-1"> TAB1</a></li> 
       <li><a href="#tab-2"> TAB2</a></li> 

      </ul> 

<div id="tab-1" class="ui-tabs-panel ui-tabs-hide"> 
     <label for="title_input">Title</label> 
    <input type="text" id="title_input" name="title_input" size="60" autocomplete="off" value="my title"/><br> 
    <label for="textarea-input">Textarea</label> 
    <textarea id="textarea-input" name="textarea-input"></textarea> 
</div> 

<div id="tab-2" class="ui-tabs-panel ui-tabs-hide"> 

</div>   



     </div> 




</div> 



<script> 
var currentTab = 0; 
     $(function() { 
      var $tabs = $('#tabs').tabs({ 
       disabled: [0, 1] 
       , select: function() { 
        console.log("selecting a new tab " + currentTab); 
        if (currentTab == 0) { 
         $.ajax({ 
          type: "POST", 
          url: "tabs.php", 
          data: { "textarea": $("#textarea-input").val(), 
        "title": $("#title_input").val() 
        }, 
       success: function(result) { 
         $("#tab-2").html(result); 

        }  
         }); 

     } 
       } 
       , 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> 

</body> 
</html>

這是我的「的標籤。PHP的」

我的工作示例可以在my site

<?php 
    echo "This is the result are you ready?"; 
if (isset($_POST['title'])){ 
    $title = $_POST['title']; 
    echo ('<div id="title_result"><span id="resultval"><h2>Title Echo result:</h2>'.$title.'</span></div>'); 
      } 
      else{ 
       echo "title_input is not defined!"; 
      } 

if (isset($_POST['textarea'])){ 
    $textarea = $_POST['textarea']; 
    echo ('<div id="textarea_result"><span id="resultval"><h2>Textarea Echo result:</h2>'.$textarea.'</span></div>'); 
         } 
?>

找到讓我知道如果有別的。

來源

2012-08-10 05:32:23

+1 Thankyou我已根據您的答案和Jeffrey A Wooden編輯了代碼。但是現在我得到了不正確的php回顯。 – techAddict82 2012-08-10 06:13:02

是的我知道 - 你有更多的語法錯誤。請看看我在發佈代碼的工作版本時發佈的評論。 – 2012-08-10 06:19:52

好的 - 我的工作是我的目的我現在編輯我的答案 – 2012-08-10 06:20:31

你可能想看看第一清理你的HTML和正確使用PHP .. 。您的HTML標籤2應該是：

<div id="tab-1" class="ui-tabs-panel ui-tabs-hide"> 
     <label for="title">Title</label> 
    <input type="text" id="title_input" name="title_input" size="60" autocomplete="off" value="<?=$title?>"/><br> 
    <label for="textarea-input">Textarea</label> 
    <textarea id="textarea-input" name="textarea-input"><?=$textarea?></textarea> 
</div> 

<div id="tab-2" class="ui-tabs-panel ui-tabs-hide"> 
    <div id="title_result" style="padding:20px;"></div> 
    <div id="textarea_result" style="padding:20px;"></div> 
</div>

您有一個額外的報價title_input名後，也當你要吐出PHP代碼沒有迴音，使用它是這樣的：

<?=$title?>

也順便說一下，你在你的PHP還有其他髒的代碼......這樣的：

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

應該是：

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

你有一個額外的在這裏的PHP報價：

$_POST['title_input"']

go thr ough並清理你的代碼

來源

2012-08-10 05:36:21

+1謝謝你，我已經這樣做了你的答案。現在我遇到了另一個問題。 – techAddict82 2012-08-10 06:13:53

我很樂意幫助...但修改您的代碼後，新問題是什麼？編輯您的問題，並在您的原始評論後發佈最新的問題 – 2012-08-10 06:19:36

用按鈕單擊提交輸入字段值

回答

相關問題