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
Related
I have a website here having two Forms. One under RESERVE VIP TABLE and another in the footer where it says JOIN OUR NEWSLETTER. I've used the following code to submit data from the FORM to Google Sheets. Question is that the first form is working fine but how can I submit the data from Newsletter section to Google Sheets in a separate Tab named "Subscribe"?
Newsletter HTML:
<form method="POST" name="google-sheet">
<input type="text" name="subscribeEmail" placeholder="Your Email Address">
<div class="gold-button small">
<button type="submit">Submit →</button>
<span class="bttn-border left virticle"></span>
<span class="bttn-border right virticle"></span>
<span class="bttn-border top horizontal"></span>
<span class="bttn-border bottom horizontal"></span>
</div>
</form>
Script I'm using for Reservation Form:
<script>
const scriptURL = 'https://script.google.com/macros/s/AKfycbzJA2cZGROFNCwLuPnJjECW21zXMZs8nT4Xo0Nzjy5ETlOVQ3gHgyjE3wzzmHky_0I_/exec'
const form = document.forms['google-sheet']
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.catch(error => console.error('Error!', error.message))
})
</script>
If it were me, I'd have to tackle it like this:
HTML:
<form action="https://script.google.com/macros/s/[SCRIPT ID]/exec" method="post">
<input type="text" name="subscribeEmail" placeholder="Your Email Address">
<div class="gold-button small">
<button type="submit">Submit →</button>
<span class="bttn-border left virticle"></span>
<span class="bttn-border right virticle"></span>
<span class="bttn-border top horizontal"></span>
<span class="bttn-border bottom horizontal"></span>
</div>
</form>
Apps Script:
function doPost(e) {
var ss = SpreadsheetApp.openById("SHEET ID");
var sheet = ss.getSheetByName("Subscribe");
// or use getRange().setValue() if something specific
sheet.appendRow([e.parameter.subscribeEmail])
}
Reference:
Run Google App Script from web page
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!
I have a select in my HTML form:
<form name="correo" id="correo" method="post" action="#" enctype="multipart/form-data" onSubmit="<!--return checkFields();-->" ><div class="multi-field-wrapper" name="multi-field-wrapper">
<div class="multi-fields" name="multi-fields">
<div class="multi-field" name="multi-field">
<div>
<label for="penviadas[]"> Cantidad </label>
<input type="number" name="penviadas[]" class="penviadas" id="penviadas" maxlength="70" placeholder="¿Cuántas?" onClick="removerIcon('iconcant');" >
</div>
</div>
</div>
<button type="button" class="add-field">Añadir otra referencia</button>
</div>
And I can add fields dynamically (or what's the same, I can repeat the code above many times; the code below works).
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field .remove-field', $wrapper).click(function() {
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});
Let's say I have 3 different selects (penviadas). What I want is to get all of them in my PHP file once I submit the form. It used to work, but now, for some reason, I can only get THE FIRST select (penviadas). Why am I not getting all the values from penviadas array?
PD: I print it in my PHP in different ways but they all return ONLY THE FIRST ELEMENT from penviadas, not the rest:
var_dump($_REQUEST['penviadas']);
I figured it out after many hours playing stupid.
With the information in the OP it was impossible to discover where there was a problem. I found the solution here: Submitting form from different <div> HTML
Basically, I had this structure:
<div...
<form...
</div...
</form>
I thought it was alright and didn't think for a moment this could be affecting. Thus, it wasn't the PHP/JS but the html tags that were incorrect. Thanks for your time.
PHP Code :
<?php
if(isset($_POST['test']))
{
$data = $_POST['referenciasnuevas'];
foreach ($data as $key => $value) {
echo $value . "<br />";
}
}
?>
Html Code:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<form method="post" action="#">
<div class="multi-field-wrapper" name="multi-field-wrapper">
<div class="multi-fields" name="multi-fields">
<div class="multi-field" name="multi-field">
<label for="referenciasnuevas[]">Referencia pieza</label>
<select name="referenciasnuevas[]" id="referenciasnuevas" class="referenciasnuevas" style="width: 105px" onClick="removerIcon('iconref');">
<option selected value='-1'> ¿cliente? </option></select>
</div>
</div>
<button type="button" class="add-field">Añadir otra referencia</button>
</div>
<input type="submit" name="test" value="Submit">
</form>
<script>
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field .remove-field', $wrapper).click(function() {
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});
</script>
</body>
</html>
The above code works for me.please look my code
I have two php pages. In first php page I have two divisions, where in one division I have hyperlinked text which on click showing result in other division of same page, with the help of ajax. The code for same is below:
<body>
<div id="container">
<div id="content"> Sidebar <p> </p>
<div class="form">
<pre>
<a href=sample_disease_form.php><b>Disease</b></a><p>
<a href=sample_drug_form.php><b>Drug</b></a><p>
</pre>
</form>
</div>
</div>
<div id="sidebar">
</div>
</body>
Ajax code for this is:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"
type="text/javascript"></script>
<script>
$(document).ready(function() {
$('a').each(function(){
$(this).on("click",function(e) {
console.log(e);
e.preventDefault();
$('#sidebar').load($(this).attr('href'));
});
});
});
</script>
Now, I have other PHP file, one which is opening after clicking hyperlink on same page but in other division, contains form. After being clicked submit button of this form I want the result gets displayed in same division but it will come from different PHP file. How can I achieve this?
The second file's code is below:
<pre><h2> Drug </h2></pre>
<pre><p><span class="error"> * required field </span></p></pre>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<pre> Name: <input type="text" name="drug" value="<?php echo $drug;?>"><span class="error">* <?php echo $nameErr;?></span>
<input type="checkbox" name="drug[]" value="disease">Disease</br>
<input type="checkbox" name="drug[]" value="target">chemical
<input type="submit" name="submit" value="Submit"></pre>
</form>
Since I am very new to these kinds of programming stuff, expecting help.
you need to submit the page through ajax and load the result in the same div
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();
});