I am trying to make HTML template working with PHP.
Its located here
Since its HTML, I want load questions from My Database and So I have done coding like below
<?php
$i=0;
while($row=mysqli_fetch_array($result))
{ ?>
<div class="covid-test-wrap test-step">
<div class="test-progress">
<div class="test-progress-step">
<span class="step-number"><?php echo ($i+1)."/".$rowcount;?></span>
<svg>
<circle class="step-<?php echo $i+1;?>" cx="30" cy="30" r="28" stroke-width="4" fill="none" role="slider" aria-orientation="vertical" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50"></circle>
</svg>
</div>
</div>
<h3><?php echo $row['question'];?></h3>
<div class="step-block">
<div class="form-group">
<input type="radio" name="package-plan" class="form-control" id="yes">
<label for="yes">Yes</label>
</div>
<div class="form-group">
<input type="radio" name="package-plan" class="form-control" id="no">
<label for="no">No</label>
</div>
Next
</div>
</div>
<?php
$i++;
}
?>
JavaScript for Next Button is like this
$(document).ready(function() {
'use strict';
$('.test-step .button').on('click', function(e) {
e.preventDefault();
$(this).parents('.test-step').next().addClass('active');
$(this).parents('.test-step').removeClass('active');
})
$('.test-step .prev-btn').on('click', function(e) {
e.preventDefault();
$(this).parents('.test-step').prev().addClass('active');
$(this).parents('.test-step').removeClass('active');
})
})
Using above code, My All questions getting loaded completed and showing fine on press Next button but input radio working for only first question and in next questions I am not able to click any choice, its looking like disabled. I am not getting idea why its acting like this. Let me know if anyone here can help me for same.
Thanks!
Related
I'm trying to make work mottie jquery keyboard on a popup window. The keyboard works as expected in main page but doesn't appear on the popup. I'm pretty sure i'm doing something wrong but cannot figure it out.
Main page is like this
<script>
$(function(){
$('#key').keyboard()
});
</script>
</head>
<body>
<div class="page">
<div id="example" class="k-content">
<div id="scheduler"><a href="test.php">
<button role="button">CONFERMA</button></a><input type="text" id="key">
Here, the keyboard is working correctly in the input #key
I cannot focus the keyboard here:
<div data-container-for="title" class="k-edit-field"><input type="text" class="k-input k-textbox" name="title" title="Ospite" required="required" data-bind="value:title"></div>
Tried to use the class "k-input k-textbox" (each one, both) but keyboard not work. Could be a problem of script path?
Working code
<script>
$(function(){
$('#key').keyboard()
});
</script>
</head>
<body>
<div class="page">
<div id="example" class="k-content">
<div id="scheduler"><a href="test.php">
<button role="button">CONFERMA</button></a><input type="text" id="key">
Not working code
<div data-container-for="title" class="k-edit-field"><input type="text" class="k-input k-textbox" name="title" title="Ospite" required="required" data-bind="value:title"></div>
No errors, just the keyboard not appear.
I've figured it out, not sure why but i got the keyboard with a button:
<script>
function myFunction() {
var x = document.getElementsByClassName("k-textbox");
$('.k-textbox').keyboard()
}
</script>
<button type="button" onclick="myFunction()" style="float:right;">ASSEGNA</button>
If i press the button it works
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 a rookie PHP developer.
I have a PHP web project with an HTML page that contains an Add button. The name of the page is Awards.html. Elsewhere I have created a PHP class, Awards.php which contains a function.
The source code of my files is given as follows:
Awards.html
<div class="divparent">
<div class="modal-header">
<div class="btn-group">
<button class="btn" data-bind="click: closeModal">Exit</button>
</div>
</div>
<div class="modal-title">
<h1 id="headerid">Awards</h1>
</div>
<div class="modal-body">
<input id="hdnValueCurrentAwardSoid" type="hidden" value="null" />
<div class="divleft">
<input id="txtName" maxlength="80" type="text" class="water newpost1" placeholder="Award Name" tabindex="1" />
<section class="ThumbnailContainer">
<img id="imgThumbnail" class="imgThumbnail" />
<img src="http://localhost/rockontechnologies/Images/GreenRibbon.png" id="pictureribbon" class="pictureribbon" />
<input type="text" contenteditable="false" readonly id="transformtext" />
</section>
<textarea id="txtdescription" placeholder="Description" class="water newpost1" rows="4" tabindex="2"></textarea>
<div class="ui-widget">
<input id="txtIssueOrg" maxlength="50" type="text" placeholder="Issue Organization" />
</div>
</div>
</div>
<div class = "divbottom">
<div id="divAddAward">
<button class="btn" onclick="">Add</button>
</div>
</div>
</div>
Awards.php
<?php
class Awards
{
function clickFunction()
{
//Function that needs to be executed!
}
}
The problem here is that on the click event of the Add button, I need to call the clickFunction() of the Awards.php file. Can anyone please tell me how to do this?
Replies at the earliest will be highly appreciated. Thank you.
You should do something like that
<button class="btn" onclick="onrequest();">Add</button>
function onrequest() {
$.post(
'example.php'
).success(function(resp){
json = $.parseJSON(resp);
alert(json);
});
}
and in example.php call your function
$class = new Awards();
$method = $class->clickFunction();
echo json_encode($method);
and in your clickFunction();
clickFunction(){
$array = array(
'status' => '1'
);
return $array;
}
first of you have to a instance of class which is like that
$class = new Awards();
then if you want to onclick event you should make a javascript code but how to get the function you can do like this
<?php echo $class->clickFunction(); ?>
I think you can't call a class directly from HTML in PHP you have to call it through HTTP by loading a page.
Hence, use a AJAX call to call Awards.php. Eg. with JQuery it could look like this $.get("Awards.php", function() {
alert( "success" );
})
In your php-file you should also call your class something like this <?php echo $class->clickFunction(); ?>
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.
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();
});