Geek Answers Handbook

Enter the value of the input field using the following jquery UI button and php echo result

I work with jquery ui tabs (which work only with the next / previous buttons) and a text box. I developed ajax / js function that will automatically send the value stored in the text area and php will repeat the result on tab # 2. But for the time being, I want to change the method from automatically submitting the form to submit when the user clicks the "Next" button to go to the next. How can I send a value to a text box when I click the next button on 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 ?>">
+1
source share
1 answer

Remember which tab you are on ( currentTab ). If a tab is selected, check if the first tab leaves; if so, send an ajax request with the current html preview; no success handler required; we do not need any client changes. If the following tab is displayed, reset the currentTab index. On the server side (php), you can, for example, save data in a database, but do not need any results.

 <!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 temporarily see the result for testing, add the success handler again to the ajax options:

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

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

 <div id="wmd_result"></div>
+3
source

More articles:


All Articles