Geek Answers Handbook

Enter the value of the input field by pressing the button

I am working with an ajax form that can be submitted with a click of a button. I have seen similar projects, but I'm running into a dead end. The problem I am facing is that the values ​​of the input field do not receive an echo in tab 2. I set the var currentTab parameter to indicate and compare when the click was made on the next tab.

  • How can I display the value of input fields after a click?
  • (Optional) Also, how can I adapt the code if in the future I have several tabs with input fields, and the last tab will be where the values ​​get php echo?

thanks

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>
+4
source share
2 answers

A few comments:

You must first add the echoed html from PHP, only then can you access it from jquery using $ ("# 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 is what you had in mind.

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

Comment No. 2 You have 2 identical identifiers - the result.

Comment No. 3 - You submit "textarea" and "title" to Ajax, but refer to $ _POST ["textarea_input"] and $ _POST ["title-input"]

Comment # 4 - You use $("#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").

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 on my website.

 <?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 anything else.

+3
source

You might want to first examine your HTML code and use PHP correctly ... your HTML 2 tab should be:

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

You had an additional quote after title_input, and also when you want to spit out PHP code without echo, use it like this:

 <?=$title?>
By the way, you have extra dirty code in your php ... this:
 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>'); }

it should be:

 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>'); }

you had an additional quote in php:

 $_POST['title_input"']

go through and clear your code

+1
source

More articles:


All Articles