Home/ Questions/Q 8404497
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T22:36:53+00:00

I am currenlty working with jquery ui tabs(which works only with next/previous buttons) and

  • 0

I am currenlty working with jquery ui tabs(which works only with next/previous buttons) and a textarea. I have developed an ajax/js function that will auto submit the value stored in the text area and php echo the result in tab#2. But I am currently want to change the method from auto submitting the form to submit when the user clicks the Next button to adavance to the next. How can I submit the value inside a text field when clicking the next button in a jquery ui tabs? Here is my EXAMPLE with autosubmit

PREVIOUS/NEXT

<script>
$(function() {
    var $tabs = $('#tabs').tabs({
    disabled: [0, 1] });
    $(".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;
});

});

HTML/PHP

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

<textarea id="wmd-input" name="wmd-input"></textarea>
<input type="hidden" id="myhidden" name="myhidden" value="<? $wmdVal ?>">
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Remember on which tab you are (currentTab). If a tab is selected, check if the first tab is leaving; if yes send the ajax request with the current preview html; no success handler is needed, we don’t need any client changes. If the next tab is shown, reset the currentTab index. On server side (php) you can e.g. save the data to the database but doesn’t need any result.

    <!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Hello</title>
    <link type="text/css" href="css/postingtabs.css" rel="stylesheet">
    <link type="text/css" href="css/wmd.css" rel="stylesheet">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
    <script type="text/javascript" src="js/wmd.js"></script>
    <script type="text/javascript" src="js/showdown.js"></script>

    <script type="text/javascript">
        var currentTab = 0;

        $(function() {
            var $tabs = $('#tabs').tabs({
                disabled: [0, 1]
                , select: function() {
                    if (currentTab == 0) {
                        $.ajax({
                            type: "POST",
                            url: "test1.php",
                            data: { "wmdVal": $("#wmd-preview").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>
</head>
<body>
    <div id="page-wrap">
        <div id="tabs">
            <ul>
                <li><a href="#tab-1">1</a></li>
                <li><a href="#tab-2">2</a></li>
            </ul>

            <div id="tab-1" class="ui-tabs-panel ui-tabs-hide">
                <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>

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

    === UPDATE ===

    If you really want to see a result temporarily for testing, add the success handler again to the ajax parameters:

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

    And append the result div again to the end of first tab:

    <div id="wmd_result"></div>
    • 0