[oivanr]

Hi @Ally
I did what you sad and I worked fine. You can close this issue.
Now I will ask in another topic about js and popup forms with elementor.
Thanks a lot,

[oivanr]

Hi Ally,
I didn’t work on this until now. That’s why I didn’t tell you the advance.
Your solution redirecting the page is very good, it download the file, the problem now is that the form don´t finish the process (send you the image of the rounding circle working).
What I mean the form is not finishin is
a) Confirmation-> redirect to a custom URL: the file is dowloaded but the form keeps the information and don´t let to intoduce new information, The circle keeps rounding.
b) Confirmation-> display a message and redirect to a custom URL: the file is downloaded, a message is displayed but don’t clear the fields and don’t let to introduce new information.
I can’t give you access to the form because I am working in a local host previous to up the form to my website.
What do you think is happenning?
Thanks in advance.

Attachments:

You must be logged in to view attached files.

[oivanr]

Excellent!!! Thanks a lot. That code works fine!!
Thanks
Omar

[oivanr]

Hi Ally,
Thanks for your help. I found my mistake. In the second line I did not include the .quform-element reference, now it seem to work fine.
$(‘.quform-element-39_18 .quform-field-39_27’).change(function () {
$(‘.quform-field-39_28’).val(‘Omarcito’);
Thanks a lot.
Regards,

[oivanr]

Ally,
Your code works fine, but is there any way to clean all messages in a screen just once? I mean not to clean field messages individually?
Thanks for your valuable help.
Regards,
Omar

[oivanr]

Dear Ally,
I made some changes, but your code works perfectly. Thanks a lot
Regards,
Omar

[oivanr]

Hi,
This must be done through a js function calling php.
I suggest to read this subject: php call through ajax
Regards,

[oivanr]

I had already work on something about it.

1) Create a html button.
<button class=”btn-default” type=”button” onclick=”printDiv(‘areaImprimir’);”>Imprimir</button>
2) Create a function in JS
function printDiv(nombreDiv) {
var contenido= document.getElementById(nombreDiv).innerHTML;
var contenidoOriginal= document.body.innerHTML;
document.body.innerHTML = contenido;
window.print();
document.body.innerHTML = contenidoOriginal;
}
It must be customize to specific need but the main idea is that.
Regards,

[oivanr]

Hi,
This is the code that I am using to validate
Line 4 prepare the var to display the message in lines 29 – 30
Lines 15 – 30 call ajax, go to php function and return a value, depending on that I display the message. Works fine
Line 6 – 8 include the code you gave me
Line 31 I try to clear the message, but is not working
The difference between this and the example you gave me is the ajax call
Can you help me?

1jQuery(function materiasAsignadas_Fecha($) { // formulario de tarea – busca si la sección materia ya 2)tiene prueba asignada ese día
3) $(‘.quform-field-35_35’).change(function () {
4 // para presentar / eliminar errores
5 var form = $(‘.quform-form-35’).data(‘quform’);
6 var $field = $(‘.quform-field-35_9’),
7 materia = $(‘.quform-field-35_9’).val(),
8 $element = $field.closest(‘.quform-element’);
9
10
11 var accion = ‘materiaTareaFechaAsignada’;

12 var fecha = $(‘.quform-field-35_35’).val();
13 $(‘.quform-field-35_48’).val($(‘.quform-field-35_35’).val());
14
15 jQuery.ajax({
16 type: ‘post’,
17 url: ajax_var.url,
18 datatype: ‘json’,
19 data: {
20 action: accion,
21 security:ajax_var.nonce,
22 materia:materia,
23 fecha:fecha
24 },
25 success: function(salida){
26 // lo que se recibe de PHP
27 var original = salida.trim();
28 if (original > 0){ // envío el mensaje de que ya existe
29 form.addElementError(’35_9′, ‘Esta materia ya tiene tarea/prueba en esta
30 fecha’).quformShowSlide();
31 } else {$element.removeClass(‘quform-has-error’).find(‘.quform-error’).remove();}
32 }
33 });
34 });
35 });

[oivanr]

Thanks,
Sorry for the foolish question.

[oivanr]

HI,
I make it work in this way
1) Due to I make a query through ajax to php, I receive the data in a html format string
2) The returned data include a div called “tabla_resultado”
3) In the form I include an html file whith this code:

<button class=”btn-default” type=”button” onclick=”printDiv(‘areaImprimir’);”>Imprimir</button>
<button class=”btn-default” type=”button” onclick=”descargarExcel(‘areaImprimir’);”>Excel</button>
<button class=”btn-default” type=”button” onclick=”descargarWord(‘areaImprimir’);”>Word</button>
<button class=”btn-default” type=”button” onclick=”location.reload();”>Cambiar parámetros</button>

<section id=”tabla_resultado” href=”#”></section>

4) Finally I include this code in the js file
function descargarWord(nombreDiv){ // <!– aqui exporto a Word!! –>
var header = “<html xmlns:o=’urn:schemas-microsoft-com:office:office’ “+
“xmlns:w=’urn:schemas-microsoft-com:office:word’ “+
“xmlns=’http://www.w3.org/TR/REC-html40′>”+
“<head><meta charset=’utf-8′><title>Export HTML to Word Document with JavaScript</title></head><body>”;
var footer = “</body></html>”;
var sourceHTML = header+document.getElementById(nombreDiv).innerHTML+footer;

var source = ‘data:application/vnd.ms-word;charset=utf-8,’ + encodeURIComponent(sourceHTML);
var fileDownload = document.createElement(“a”);
document.body.appendChild(fileDownload);
fileDownload.href = source;
fileDownload.download = ‘descargaPilas.doc’;
fileDownload.click();
document.body.removeChild(fileDownload);
}

function descargarExcel(nombreDiv){ //– aqui exporto a Excel!!
var uri = ‘data:application/vnd.ms-excel;base64,’
, template = ‘<html xmlns:o=”urn:schemas-microsoft-com:office:office” xmlns:x=”urn:schemas-microsoft-com:office:excel” xmlns=”http://www.w3.org/TR/REC-html40″><meta http-equiv=”content-type” content=”application/vnd.ms-excel; charset=UTF-8″><head><!–[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]–></head><body><table>{table}</table></body></html>’
, base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
, format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }

var table = ‘areaImprimir’;
var nombre = ‘DescargaPilas.xls’;

if (!table.nodeType) table = document.getElementById(table)
//var ctx = { worksheet: name || ‘Worksheet’, table: table.innerHTML }
var ctx = { worksheet: nombre || ‘Worksheet’, table: table.innerHTML }
window.location.href = uri + base64(format(template, ctx))
}

// Aqui imprimo mediante javascript, uso la imagen de la impresora que está en el header
function printDiv(nombreDiv) {
var contenido= document.getElementById(nombreDiv).innerHTML;
var contenidoOriginal= document.body.innerHTML;
document.body.innerHTML = contenido;
window.print();
document.body.innerHTML = contenidoOriginal;
}

Hope this can be useful
Regards,

[oivanr]

Thanks Ally,
You are great.
It works !!!

[oivanr]

Hi,
Thanks to your help i had I had done the call. Now I want to send a message if a field required is empty but through js. How I can send a message like the message quform type? or better, how I can access this message.
Thanks again,

[oivanr]

Thanks a lot for your quick response . I had try with your code, the issue is that when a call the “ajax_var.action” is due to I included that statement inside the plugin in the enqueue scripts action. I think is better to do this

jQuery.ajax({
type: ‘post’,
url: the url of the plugin,
data: ‘action= the name of the php hook or action’,
success: function(result){
$(‘#phpResult’).html(result);
}
Like you can see I delete de nonce because if I don’t use the enqueue action, I am not able to create a nonce inside the js code.

I feel glad with your comments about this.
Thanks again for your support.

[oivanr]

Dear Ally,
The problem was fixed. I am working in a localhost and for some reason the form looks diferent there. When I publish in my website the form is ok, aligned by the left. I am including an image.
Thanks for your help.

Attachments:

You must be logged in to view attached files.

[Author]

Posts