javascriptjquerytwitter-bootstrapjquery-uibootstrap-tabs
How to submit value of inactive tabs Jquery
I am submitting dynamic form fields using JQuery Tabs but problem is that it keep submit only last tab values because it check which tab is active and which is not so as it see the last one is active so it posts the value of that tab only not other like 1, 2, 3 etc.
Here is the JQuery code I am using:
$('#rootwizard').bootstrapWizard({onTabShow: function (tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index + 1;
var $percent = ($current / $total) * 100;
$('#rootwizard').find('.bar').css({width: $percent + '%'});
// If it's the last tab then hide the last button and show the finish instead
if ($current >= $total) {
$('#rootwizard').find('.pager .next').hide();
$('#rootwizard').find('.pager .finish').show();
$('#rootwizard').find('.pager .finish').removeClass('disabled');
} else {
$('#rootwizard').find('.pager .next').show();
$('#rootwizard').find('.pager .finish').hide();
}
}});
$('#rootwizard .finish').click(function () {
alert('Finished!, Starting over!');
//$('#rootwizard').find("a[href*='tab1']").trigger('click');
$("#mealForm").submit();
});
mealForm is the form id that contains data of all the tabs but only posts last tabs/active tab value not all tabs.
Here is the HTML code with PHP that generates dynamic tabs and dynamic forms but it only submits active tab data not the all ones.
HTML:
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<?php
for ($counter = 1; $counter <= $_POST['meal_numbers']; $counter++) {
?>
<li><a href="#tab<?php echo $counter; ?>" data-toggle="tab">Meal <?php echo $counter; ?></a></li>
<?php } ?>
</ul>
</div>
</div>
</div>
<div id="bar" class="progress progress-striped active">
<div class="bar"></div>
</div>
<div class="tab-content">
<?php
for ($counter = 1; $counter <= $_POST['meal_numbers']; $counter++) {
?>
<div class="tab-pane" id="tab<?php echo $counter; ?>">
<form action="process/adminProcess.php?page=addClientMealData" method="post" id="mealForm" class="form-horizontal">
<fieldset>
<?php
$mealData = 1;
$QuerySet = $objadminViewFunctions->viewAllFoodCategoryData();
while ($RecordSet = $QuerySet->fetch_object()) {
?>
<div class="control-group">
<label class="control-label" for="focusedInput"><?php echo $RecordSet->food_name . ' ' . $RecordSet->food_gram . ' (grams)'; ?></label>
<div class="controls">
<?php //print $objadminViewFunctions->viewFoodSourcesDropdownForAddPg($RecordSet->id); ?>
<input class="input-xlarge focused" id="focusedInput" name="mealData[<?php echo $counter; ?>][<?php echo $mealData; ?>][macro_ratio]" type="text">
<input type="hidden" name="mealData[<?php echo $counter; ?>][<?php echo $mealData; ?>][foodCategoryId]" value="<?php echo $RecordSet->id; ?>">
</div>
</div>
<?php
$mealData++;
}
?>
</fieldset>
<ul class="pager wizard">
<li class="previous first" style="display:none;"><a href="javascript:void(0);">First</a></li>
<li class="previous"><a href="javascript:void(0);">Previous</a></li>
<li class="next last" style="display:none;"><a href="javascript:void(0);">Last</a></li>
<li class="next"><a href="javascript:void(0);">Next</a></li>
<!--<li class="next finish" style="display:none;"><a href="javascript:;">Finish</a></li>-->
<button type="submit" class="btn btn-primary next finish" style="display:none;">Submit</button>
</ul>
</form>
</div>
<?php } ?>
</div>
</div>
Here is the output of above HTML form data:
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li><a href="#tab1" data-toggle="tab">Meal 1</a></li>
<li><a href="#tab2" data-toggle="tab">Meal 2</a></li>
</ul>
</div>
</div>
</div>
<div id="bar" class="progress progress-striped active">
<div class="bar"></div>
</div>
<div class="tab-content">
<div class="tab-pane" id="tab1">
<form action="process/adminProcess.php?page=addClientMealData" method="post" id="mealForm" class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="control-label" for="focusedInput">Protein 60 (grams)</label>
<div class="controls">
<input class="input-xlarge focused" id="focusedInput" name="mealData[1][1][macro_ratio]" type="text">
<input type="hidden" name="mealData[1][1][foodCategoryId]" value="37">
</div>
</div>
<div class="control-group">
<label class="control-label" for="focusedInput">Protein 55 (grams)</label>
<div class="controls">
<input class="input-xlarge focused" id="focusedInput" name="mealData[1][2][macro_ratio]" type="text">
<input type="hidden" name="mealData[1][2][foodCategoryId]" value="2">
</div>
</div>
<div class="control-group">
<label class="control-label" for="focusedInput">Protein 50 (grams)</label>
<div class="controls">
<input class="input-xlarge focused" id="focusedInput" name="mealData[1][3][macro_ratio]" type="text">
<input type="hidden" name="mealData[1][3][foodCategoryId]" value="3">
</div>
</div>
<div class="control-group">
<label class="control-label" for="focusedInput">Protein 45 (grams)</label>
<div class="controls">
<input class="input-xlarge focused" id="focusedInput" name="mealData[1][4][macro_ratio]" type="text">
<input type="hidden" name="mealData[1][4][foodCategoryId]" value="4">
</div>
</div>
<div class="control-group">
<label class="control-label" for="focusedInput">Protein 40 (grams)</label>
<div class="controls">
<input class="input-xlarge focused" id="focusedInput" name="mealData[1][5][macro_ratio]" type="text">
<input type="hidden" name="mealData[1][5][foodCategoryId]" value="5">
</div>
</div>
<div class="control-group">
<label class="control-label" for="focusedInput">Protein 35 (grams)</label>
<div class="controls">
<input class="input-xlarge focused" id="focusedInput" name="mealData[1][6][macro_ratio]" type="text">
<input type="hidden" name="mealData[1][6][foodCategoryId]" value="6">
</div>
</div>
<div class="control-group">
<label class="control-label" for="focusedInput">Protein 30 (grams)</label>
<div class="controls">
<input class="input-xlarge focused" id="focusedInput" name="mealData[1][7][macro_ratio]" type="text">
<input type="hidden" name="mealData[1][7][foodCategoryId]" value="7">
</div>
</div>
<div class="control-group">
<label class="control-label" for="focusedInput">Protein 25 (grams)</label>
<div class="controls">
<input class="input-xlarge focused" id="focusedInput" name="mealData[1][8][macro_ratio]" type="text">
<input type="hidden" name="mealData[1][8][foodCategoryId]" value="8">
</div>
</div>
<div class="control-group">
<label class="control-label" for="focusedInput">Protein 20 (grams)</label>
<div class="controls">
<input class="input-xlarge focused" id="focusedInput" name="mealData[1][9][macro_ratio]" type="text">
<input type="hidden" name="mealData[1][9][foodCategoryId]" value="9">
</div>
</div>
</fieldset>
<ul class="pager wizard">
<li class="previous first" style="display:none;"><a href="javascript:void(0);">First</a></li>
<li class="previous"><a href="javascript:void(0);">Previous</a></li>
<li class="next last" style="display:none;"><a href="javascript:void(0);">Last</a></li>
<li class="next"><a href="javascript:void(0);">Next</a></li>
<!--<li class="next finish" style="display:none;"><a href="javascript:;">Finish</a></li>-->
<button type="submit" class="btn btn-primary next finish" style="display:none;">Submit</button>
</ul>
</form>
</div>
<div class="tab-pane" id="tab2">
<form action="process/adminProcess.php?page=addClientMealData" method="post" id="mealForm" class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="control-label" for="focusedInput">Protein 60 (grams)</label>
<div class="controls">
<input class="input-xlarge focused" id="focusedInput" name="mealData[2][1][macro_ratio]" type="text">
<input type="hidden" name="mealData[2][1][foodCategoryId]" value="37">
</div>
</div>
<div class="control-group">
<label class="control-label" for="focusedInput">Protein 55 (grams)</label>
<div class="controls">
<input class="input-xlarge focused" id="focusedInput" name="mealData[2][2][macro_ratio]" type="text">
<input type="hidden" name="mealData[2][2][foodCategoryId]" value="2">
</div>
</div>
<div class="control-group">
<label class="control-label" for="focusedInput">Protein 50 (grams)</label>
<div class="controls">
<input class="input-xlarge focused" id="focusedInput" name="mealData[2][3][macro_ratio]" type="text">
<input type="hidden" name="mealData[2][3][foodCategoryId]" value="3">
</div>
</div>
<div class="control-group">
<label class="control-label" for="focusedInput">Protein 45 (grams)</label>
<div class="controls">
<input class="input-xlarge focused" id="focusedInput" name="mealData[2][4][macro_ratio]" type="text">
<input type="hidden" name="mealData[2][4][foodCategoryId]" value="4">
</div>
</div>
<div class="control-group">
<label class="control-label" for="focusedInput">Protein 40 (grams)</label>
<div class="controls">
<input class="input-xlarge focused" id="focusedInput" name="mealData[2][5][macro_ratio]" type="text">
<input type="hidden" name="mealData[2][5][foodCategoryId]" value="5">
</div>
</div>
<div class="control-group">
<label class="control-label" for="focusedInput">Protein 35 (grams)</label>
<div class="controls">
<input class="input-xlarge focused" id="focusedInput" name="mealData[2][6][macro_ratio]" type="text">
<input type="hidden" name="mealData[2][6][foodCategoryId]" value="6">
</div>
</div>
<div class="control-group">
<label class="control-label" for="focusedInput">Protein 30 (grams)</label>
<div class="controls">
<input class="input-xlarge focused" id="focusedInput" name="mealData[2][7][macro_ratio]" type="text">
<input type="hidden" name="mealData[2][7][foodCategoryId]" value="7">
</div>
</div>
<div class="control-group">
<label class="control-label" for="focusedInput">Protein 25 (grams)</label>
<div class="controls">
<input class="input-xlarge focused" id="focusedInput" name="mealData[2][8][macro_ratio]" type="text">
<input type="hidden" name="mealData[2][8][foodCategoryId]" value="8">
</div>
</div>
<div class="control-group">
<label class="control-label" for="focusedInput">Protein 20 (grams)</label>
<div class="controls">
<input class="input-xlarge focused" id="focusedInput" name="mealData[2][9][macro_ratio]" type="text">
<input type="hidden" name="mealData[2][9][foodCategoryId]" value="9">
</div>
</div>
</fieldset>
<ul class="pager wizard">
<li class="previous first" style="display:none;"><a href="javascript:void(0);">First</a></li>
<li class="previous"><a href="javascript:void(0);">Previous</a></li>
<li class="next last" style="display:none;"><a href="javascript:void(0);">Last</a></li>
<li class="next"><a href="javascript:void(0);">Next</a></li>
<!--<li class="next finish" style="display:none;"><a href="javascript:;">Finish</a></li>-->
<button type="submit" class="btn btn-primary next finish" style="display:none;">Submit</button>
</ul>
</form>
</div>
</div>
</div>
Screenshots as per above HTML:
Tab 1
Tab 2
Solution
You are using each tab as separate form. That is why you can submit only one tab. Use only one form which is opened before and closed after bootstrap tabs
<form action="process/adminProcess.php?page=addClientMealData" method="post" id="mealForm" class="form-horizontal">
<div class="tab-content">
.....
</div>
</form>
- Check type of a function parameter
- How does the React hook useCallback recognize the function?
- Is this possible? Scroll slides to key points, like vertical paging
- Angular Previous page button getting disabled when the next page button gets clicked
- ReactJS vs NodeJS - Why do I need to create both?
- Console.log doesn't work, devtools console shows no errors
- How to calculate the execution time of an async function in JavaScript?
- Not able to change the title with metadata when using 'use client' in Next.js
- How do I pass a variable into regex with Node js?
- Why doesn't TypeScript enforce async/await on promise?
- Catch block not working in node fetch
- Creating a writable svelte store from loaded page data in sveltekit
- Best Way To Crossfade Text With a Fixed Height in an Absolute Div?
- Prevent text selection after double click
- Check for browser optional chaining support in Angular project
- Is there a way to create dynamic ranges given an array of values, and counting how many belong to each range
- Can't use type-fest GreaterThan as parameter type
- Is there a way to get the JSX/TSX of a React component from the code itself?
- Check if optional chaining is supported
- What is the best way to remove a table row with jQuery?
- How can I generate a list of random shades of a particular color? (e.g. random shade of orange)
- Proper way to catch exception from JSON.parse
- How to disable scroll wheel zoom in ApexCharts?
- xcode using wrong node.js version
- How to autosize a textarea using Prototype?
- How does one align a single row to the top in JQGrid?
- javascript number counting
- How to import one function from various files in the same folder in Javascript?
- useTemplateRef is not reactive for arrays?
- Regular expression that ignores HTML entities