Question

I am working with an ajax form that it is suppose to submit with a button click. I have seen similar projects but I am running into dead ends. The problem i am having is that the input field values are not getting echo in tab 2. I set a parameter var currentTab to indicate and compare when a click has been made to the next tab.

• How can I display the value of the input fields after a click has been made?
• (Additional) Also how can adapt the code if in the future I have multiple tabs with input fields and the last tab will be where the values get php echo out?

Thank you

AJAX/JS Function

<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 is where the results should be php echo out

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

Answer 1

A few comments :

You should first add the echoed html from PHP, only then can you access it from jquery with $(“#resultval”)

I will explain – look at your “success” handler

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

The code should be

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

If at all.. but I don’t think that it what you meant.

If you want to ask me – render the entire next tab in PHP and do something like $("#tab2").html(result);

Comment #2
You have 2 identical IDs – resultval..

Comment #3 –
You are sending “textarea” and “title” in Ajax, but referring to $_POST[“textarea_input”] and $_POST[“title-input”]

Comment #4 –
You are using $("#textarea-input").html() to get the value instead of $("#textarea-input").val(). same for “title_input”

Here is my working version ( just remove the “head” stuff ).

This is my 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>

And this is my “tabs.php”

My working example can be found at 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>');
                       }
?>    

Let me know if there’s anything else.