I have a PHP form that is split into 3 separate PHP pages. The first page submits the form info which is then processed by a third party API. The returned (validated) results are then presented in the second PHP page along with a form for further processing.
My question is whether or not there is a way I can integrate this process into the BootStrap Wizard Plugin with its tab structure.
e.g. Fill and submit form by clicking on 'next' and have the Wizard plugin move to tab 2. showing the the next PHP page which has been processed.
<!-- Wizard -->
<section class="wizard">
<!-- Wizard navigation -->
<ul>
<li>Registration</li>
<li>Next step</li>
<li>Confirmation</li>
</ul>
<!-- Wizard progress bar -->
<div class="progress progress-line progress-striped">
<div class="progress-bar progress-bar-success"></div>
</div>
<!-- Wizard content -->
<div class="tab-content">
<div class="tab-pane" id="step1">
<h3>This is first step</h3>
<form method="post" action="myform.php?api=form&step=1">
<input type="text" name="phonenumber" id="phonenumber" />
<input type="submit" value="continue" class="btn btn-primary" />
</form>
</div>
<div class="tab-pane" id="step2">
<h3>Second step content</h3>
<form method="post" action="myform.php?api=form&step=2">
<input type="text" name="faxnumber" id="faxnumber" />
<input type="submit" value="continue" class="btn btn-primary" />
</div>
<div class="tab-pane" id="step3">
<h3>This is third final step (completed)</h3>
<p>Form Process Complete</p>
</div>
<!-- Wizard pager -->
<ul class="wizard pager">
<li class="previous">Previous</li>
<li class="next">Next</li>
<li class="next finish">Finish</li>
</ul>
</div>
</section>
<!-- /Wizard -->
<script src="/js/jquery.bootstrap.wizard.js"></script>
<script>
$(document).ready(function() {
$('.wizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
var wizard = $('.wizard');
var $total = navigation.find('li').length;
var $current = index+1;
var $percent = ($current/$total) * 100;
wizard.find('.progress-bar').css({width:$percent+'%'});
// If it's the last tab then hide the next button and show the finish instead
if($current >= $total && $total != 0) {
wizard.find('.pager .next').hide();
wizard.find('.pager .finish').show().removeClass('disabled');
} else {
wizard.find('.pager .next').show();
wizard.find('.pager .finish').hide();
}
}});
});
</script>
So what I'm trying to achieve is for the first form to show it's results in the second tab of the wizard.
Yes you can, I would suggest using the bwizard.js and bwizard.css plugin. And add a button to a form, now u going to have to call the action using ajax and not using an actual input of type submit. Using jQuery, on success of "btn_submit" you will taget the 2nd tab to focus to by giving each tab an I'd, or u can use page inspector and target the default I'd of each tab, which if I remember correctly used to be #step1 etc.
Related
page.php
<script>
$(document).ready(function(){
// Set trigger and container variables
var trigger = $('.a'),
container = $('#content');
// Fire on click
trigger.on('click', function(){
// Set $this for re-use. Set target from data attribute
var $this = $(this),
target = $this.data('target');
// Load target page into container
container.load(target + ".php?id=<?php echo $_POST['id']?>");
// Stop normal link behavior
return false;
});
});
</script>
<nav id="nav">
<ul>
<form method="post">
<input name="id" value="12">
</form>
<li><a id="home" class="a" href="#" data-target="home">Home</a></li>
<li><a id="about" class="a" href="#" data-target="about">About</a></li>
</ul>
</nav>
<div id="content">
<style>
#home{display:none;}
</style>
<h1>Home</h1>
<p>This is the home page</p>
<h3>
</h3>
</div>
about.php
<h1>about</h1>
home.php
<h1>home</h1>
Script AJAX work good , without load it can open content infinity but problem is Row's number.
PHP
When i try to send ID on other content by POST method, or something it will not work.
Your question is not clear. Assuming you are trying to send the "id" as a get parameter via AJAX and loading content in some div/section.
$_POST should be replaced with $_REQUEST ideally and surrounded by "isset".
put an action on the form. put name and ID on the form values. Such as
<input name="id" name="id" value="12">
I want to submit my form in multiple tab using only one button but it is not working.I already put the button inside the form but it is also not working.Can I know what the solution to this problem?
<form method="POST">
<ul class="tab">
<li>DOCTOR'S DIAGNOSIS</li>
<li>OTHERS</li>
</ul>
<div id="diagnosis" class="tabcontent">Tarikh Penilaian : <input id="test_Date" name ="test_Date" type="date"></div>
<div id="others" class="tabcontent">Masa Penilaian : <input id="test_time" name ="test_time"></div>
<div><button type="submit" name="btn_reg" id="btn_reg"></button></div> </form>
here is an upload button, from which user can choose the file
Basically what I want to do is whenever user chooses an image from that,
it should display it at the place where that "trees" image is.
I'm stuck, really need some help.
here is the code
<div class="user-editable-div">
<div class="image-div" id="image_div"><img src="images/image.jpg" id="bg_image" /></div>
<span class="upload-btn">UPLOAD IMAGE</span>
<input type="file" id="uploader" />
<div class="content-div">
<h1 contenteditable="true">USER EDITABLE</h1>
<p contenteditable="true">All elements on this page are user editable. You can edit them by simply clicking or by clicking on the edit button next to the element.</p>
</div>
</div>
when the user chooses a file from "#uploader" it should display the image in "#bg_image"
With this code when you try to upload image with use file controller at that time that image preview in bg_image element
<div class="user-editable-div">
<div class="image-div" id="image_div"><img src="images/image.jpg" id="bg_image" /></div>
<span class="upload-btn">UPLOAD IMAGE</span>
<input type="file" id="uploader" onchange="readURL(this,this.id);"/>
<div class="content-div">
<h1 contenteditable="true">USER EDITABLE</h1>
<p contenteditable="true">
All elements on this page are user editable. You can edit them by simply clicking or by clicking on the edit button next to the element.
</p>
</div>
</div>
<script>
function readURL(input,ids)
{
if (input.files && input.files[0])
{
var reader = new FileReader();
reader.onload = function (e)
{
$('#bg_image').attr('src', e.target.result).width(650).height(375);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
Try attaching change event to input type="file" element , using URL.createObjectURL() with argument this.files[0] within change handler to set src of img with .attr(attribute, value)
$(":file").change(function(e) {
$("#bg_image").attr("src", URL.createObjectURL(this.files[0]))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="user-editable-div">
<div class="image-div" id="image_div"><img id="bg_image"src="" /></div>
<span class="upload-btn">UPLOAD IMAGE</span>
<input type="file" id="uploader" accept="image/*" />
<div class="content-div">
<h1 contenteditable="true">USER EDITABLE</h1>
<p contenteditable="true">All elements on this page are user editable. You can edit them by simply clicking or by clicking on the edit button next to the element.</p>
</div>
</div>
I am making a simple page and I have found this little problem. I have this in my template:
<?php foreach ($this->vypis_serie as $value) : ?>
<div class="serie">
<div id="serie_header">
<?= $value['nazev_cviceni'] ?>
</div>
<div id="serie_info">
<p>Number of excercises: TODO</p>
<p>Sport type: <?= $value['typ'] ?></p>
<p>KCal summary: <?= $value['kcal'] ?></p>
</div>
<div class="button_upravit">Edit</div>
<div class="button_smazat">Delete</div>
</div>
<?php endforeach; ?>
basically it is a block that fills in information about particular exercise (it is a sport app). SO If I have 3 entries in DB, it will print this code three times with corresponding info.
The problem I have is with the edit button, which upon clicking opens modal window. It is made purely with CSS, so no Javascript.
When I click the button, it jumps to this code:
<div id="openModal_edit" class="modalDialog">
<div>
X
<div id="editace">
<form id="platba" action="serie/edit/" method="post" enctype="multipart/form-data">
<fieldset>
<legend>Edit serie</legend>
<ol>
<li>
<label for="name">Name of the series</label>
<input id="name" name="nazev_cviceni" type="text" required autofocus>
</li>
<li>
<label for="typ">Sport type</label>
<select name="typ">
<option value="Kolo">Bike</option>
<option value="Běhání" selected="selected">Running</option>
</select>
</li>
</ol>
</fieldset>
<fieldset>
<button type="submit">Save</button>
</fieldset>
</form>
</div>
</div>
</div>
But since I jump to div id and I am not using a new page where I could choose a controller and pass a variable, I need somehow to pass the variable (id of the exercise) to the modal window, so I can know which of the possible buttons I have clicked. Is there any way to do it, without the need to rewrite all other pages where I have used this modal window?
I can't use another foreach like in the first part, because the modal window is always a single object that appears, unlike all the entries on the page that are there as many times as there are entries in the DB.
Hope that it is understandable, sorry for my English :)
The simplest way to do this using a single modal window involves adding some javascript code to your page.
First, add the relevant information to the edit link, with a new data-serie-<name> for each piece of data you want to pass:
<a href="#openModal_edit" data-serie-name="<?= $value['nazev_cviceni'] ?>" ...>
Next, add an onclick event handler to that same link. This handler will extract the embedded data from the <a> element and inject it in the modal window. The dataset element provides access to the data-* attributes from javascript
// Example
onclick="serieName=this.dataset.serieName;document.querySelector('#openModal_edit input#name').value = serieName;return true;"
I am using the Flexible Map plugin on a wordpress site. The plugin has a form that allows the user to enter their 'from address' to get directions to the location displayed on the map. The form does not have an ID or class (and I am not able to add one).
I would like the user to be able to print the directions once the form is submitted, but I don't want the print button to show up until after the directions have displayed from the user pressing the submit button.
The directions are displayed in a table, so I was thinking I could use JQuery to say that when the table is displayed, then show the print div.
I'm thinking it's something like this, but I'm not sure how to format it based on a table (because the form does not have an ID):
jQuery(document).ready(function($) {
$('#idOfYourForm').on("submit", function () {
$('#print').show();
});
});
Any suggestions are appreciated!
EDIT Here is the code that is generated once the directions submit button is pressed:
<div id="my-dir-div" style="float: left; direction: ltr;">
<form>
<p>
<input type="text" name="from">
<input type="submit" value="Get Directions">
</p>
</form>
<div jstcache="0">
<div class="adp-warnbox" jsdisplay="warnings.length" jstcache="1" style="display: none;">
<div class="warnbox-c2" jstcache="0"></div>
<div class="warnbox-c1" jstcache="0"></div>
<div class="warnbox-content" jscontent="$this" jsselect="warnings" jstcache="5"></div>
<div class="warnbox-c1" jstcache="0"></div>
<div class="warnbox-c2" jstcache="0"></div>
</div>
<div jseval="setupPanelStep(this, $waypointIndex)" jsvalues="$waypointIndex:0;" jsselect="legs[0].start_address" jstcache="2">
<table id="adp-placemark" class="adp-placemark" jstcache="0">
<tbody jstcache="0">
<tr jstcache="0">
<td jstcache="0">
<img jsvalues=".src:markerIconPaths[$waypointIndex]" jstcache="14" src="http://maps.gstatic.com/mapfiles/markers2/icon_greenA.png">
</td>
<td class="adp-text" jscontent="$this" jstcache="12">211 South Elson Street, Kirksville, MO 63501, USA</td>
</tr>
</tbody>
</table>
</div>
<div jsvalues="$legIndex:$index;" jsselect="legs" jstcache="3" jsinstance="*0">
<div class="adp-legal" jscontent="copyrights" jstcache="4">Map data ©2013 Google</div>
</div>
</div>
<div id="print">
<input id="print" class="printbtn" type="button" value="Print Directions" onclick="return pop_print()">
<script type="text/javascript">
function pop_print(){
w=window.open(null, 'Print_Page', 'scrollbars=yes');
w.document.write(jQuery('div#my-dir-div').html());
w.document.close();
w.print();
}
</script>
</div>
I think you can try this (only if the table with id adp-placemark is available on the page then show it)
$(function(){
if($('#my-dir-div table#adp-placemark').length) $('#print').show();
});
Or, this one
$(function(){
if($('#my-dir-div table#adp-placemark td.adp-text').length) $('#print').show();
});