Develop Reference

Fetch call to PHP from remote client no error and no data

I've a problem with calling from Fetch javascript API from a local client to a remote server with PHP.
There are no errors but any data is returned.
When I make same call to the same server where the client is, it works.
same server:
Client: http://localhost:8888/myclient.html
Server: http://localhost:8888/myphp.php //Mamp
It works and returns the JSON.
Remote:
Client: http://127.0.0.1:5000
Server: http://localhost:8888/myphp.php
No errors!! But returns simply nothing
Client code:
<form target="_self" name="formulario" id="formulario">
<!-- Estamos usando lista desordenada para los campos de formulario
Es también habitual hacerlo con los elementos de los menús de navegación
-->
<ul>
<!--
H1 y H2 aquí van dentro de la etqueta UL para que no se solape con los campos,
ya que este UL está en posición absoluta
-->
<h2>Envíanos tus datos</h2>
<h1>Cubre el formulario</h1>
<!--
Empiezan los campos de formulario
-->
<li>
<!-- Campo obligatorio tipo texto-->
<label for="nombre"><span class="required">*</span> Tu nombre</label><br>
<input type="text" name="nombre" id="nombre" required>
</li>
<li>
<!-- Campo tipo numérico-->
<label for="edad">Tu edad</label><br>
<input type="number" name="edad">
</li>
<li>
<!-- Campo obligatorio tipo Email-->
<label for="email"><span class="required">*</span> Email</label><br>
<input type="email" name="email" id="email" required>
</li>
<li>
<!-- Campo tipo Tel (teléfono)-->
Teléfono <br>(formato xxx yyy zzz):<br>
<input type="tel" name="tel">
</li>
<li>
<!-- inputs tipo Radio-button Llevan el mismo nombre
para que se reciba un solo dato. Es un solo campo con dos inputs que
se marca además como obligatorio
-->
<span class="required">*</span> ¿Cómo vendrás al centro?
<hr>
<input type="radio" id="vehiculo" name="comoviene" value="vehiculo" required>
<label for="vehiculo">Tengo vehículo</label><br>
<input type="radio" id="andando" name="comoviene" value="andando">
<label for="andando">Voy andando</label>
</li>
<li>
<!-- inputs tipo checkbox. Cada uno es un campo.
-->
¿ Qué vehículos tienes ?<br>
<input type="checkbox" id="coche" name="tipo" value="coche">
<label for="coche">Tengo coche</label><br>
<input type="checkbox" id="moto" name="moto" value="moto">
<label for="moto">Tengo moto </label><br>
<input type="checkbox" id="barco" name="barco" value="barco">
<label for="barco">Tengo barco</label>
</li>
<li>
<!-- Campo tipo select, que crea un menú desplegable con las ociones
-->
¿Qué curso quieres?
<label for="curso">Elige uno</label>
<select name="curso" id="curso">
<option value="">Elige uno...</option>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<!-- Este sería el valor seleccionado por defecto
-->
<option value="JS" selected>JAVASCRIPT</option>
</select>
</li>
<li>
<!-- Botón de enviar.
Es un input pero no envía valores,
aunque tiene un value que es el texto que se ve en el botón,
y por defecto (si no se pone) es "submit".
-->
<input type="submit" name="Enviar" value="Enviar">
</li>
</ul>
</form>
<script>
let formul = document.getElementById('formulario');
let path = "http://localhost:8888/CLASE/CURSO-IFCD0110/hola-background/";
formul.onsubmit = function (e) {
e.preventDefault();
async function envio() {
const datos = new FormData(e.target);
let toSend = Object.fromEntries(datos);
// console.log(toSend)
let enviar = await fetch(path + 'form.php',
{
method: 'POST',
/*
* We also need to stringify the values, turn the
* JavaScript object to a single string that is accepted
* as JSON. So we are sending one string that contains
* all our values
*/
mode: 'no-cors',
body: JSON.stringify(toSend),
headers: {
'Content-Type': 'application/json'
// 'Content-Type': 'application/x-www-form-urlencoded',
}
});
let escribir = await enviar.json();
document.body.innerHTML = JSON.stringify(escribir)
}
envio();
}
</script>
Server code:
<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, FETCH, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Access-
Control-Allow-Headers, Authorization, X-Requested-With");
$data = json_decode(file_get_contents('php://input'), true);
echo json_encode($data);
exit;
Thanks!
EDIT.
Screenshots network tabs

The problem is the set of "no-coors". Without that, works correctly both local and remote.
The problem was I'd tested without the correct headers in the php file.
So the settings are:
{
method: 'POST',
/*
* We also need to stringify the values, turn the
* JavaScript object to a single string that is accepted
* as JSON. So we are sending one string that contains
* all our values
*/
// mode: 'no-cors', No-cors was the problem. Thanks for the comments.
body: JSON.stringify(toSend),
headers: {
'Content-Type': 'application/json'
// 'Content-Type': 'application/x-www-form-urlencoded',
}

i need to put javascript validation in django

I have a javascript validation but it doesn't work for me, I think it may be sweet alert
I think that sweetalert is validating before the validation that I have in javascript
javascript validation:
const $email_validation = document.getElementById('email_validation');
const $contrasena_validation = document.getElementById('contrasena_validation');
const $formularioempleado = document.getElementById('formularioempleado');
var $expresion_email, $expresion_password;
$expresion_email = /^([\da-z_\.-]+)#([\da-z\.-]+)\.([a-z\.]{2,6})$/;
$expresion_password = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
(function() {
$formularioempleado.addEventListener('submit', function(e) {
let email=String($email_validation.value).trim();
let contrasena=String($contrasena_validation.value).trim();
if(email.length === 0 || contrasena.length === 0){
alert("Todos los campos son obligatorios");
e.preventDefault();
}
else if(email.length>100){
alert("El correo es muy largo");
e.preventDefault();
}
else if(!$expresion_email.test(email)){
alert("El correo no es valido");
e.preventDefault();
}
else if(contrasena.length>255){
alert("La Contraseña es muy larga");
e.preventDefault();
}
else if(!$expresion_password.test(contrasena)){
alert("Contraseña: Debe contener al menos un numero y una letra mayúscula y minúscula, y al menos 8 caracteres o más");
e.preventDefault();
}
e.preventDefault();
});
})();
createuser.html:
{% extends 'app/base.html' %}
{% block contenido %}
{% load crispy_forms_tags%}
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-12 col-md-6 content m-0 mt-2 mb-2 pt-2 pb-2" >
<form class="p-0" method="POST" id="formularioempleado">
{% csrf_token %}
<h2 class="text-center">Crear Empleado</h2>
<hr>
{{empleado | crispy}}
<input class="btn btn-primary mb-2" type="submit" value="Crear Usuario">
<hr>
</form>
</div>
<div class=" col-md-3">
</div>
</div>
</div>
views.py(here i have the message of the sweetalert)
def crearusuario(request):
data = {
'empleado': CrearEmpleadoForm()
}
if request.method=="POST":
if request.POST.get('rut') and request.POST.get('nombres') and request.POST.get('apellidos') and request.POST.get('correo_electronico') and request.POST.get('usuario') and request.POST.get('contrasena') and request.POST.get('activo') and request.POST.get('cargo_empleado') and request.POST.get('id_empresa') and request.POST.get('id_unida'):
usersave= Empleado()
usersave.rut=request.POST.get('rut')
usersave.nombres=request.POST.get('nombres')
usersave.apellidos=request.POST.get('apellidos')
usersave.correo_electronico=request.POST.get('correo_electronico')
usersave.usuario=request.POST.get('usuario')
usersave.contrasena=request.POST.get('contrasena')
usersave.activo=request.POST.get('activo')
usersave.cargo_empleado=CargoEmpleado.objects.get(pk=(request.POST.get('cargo_empleado')))
usersave.id_empresa=Empresa.objects.get(pk=(request.POST.get('id_empresa')))
usersave.id_unida=UnidadInterna.objects.get(pk=(request.POST.get('id_unida')))
cursor=connection.cursor()
cursor.execute("call SP_crear_usuario('"+usersave.rut+"','"+usersave.nombres+"', '"+usersave.apellidos+"', '"+usersave.correo_electronico+"', '"+usersave.usuario+"', '"+usersave.contrasena+"', '"+usersave.activo+"', '"+str(usersave.cargo_empleado.id)+"', '"+str(usersave.id_empresa.id)+"', '"+str(usersave.id_unida.id)+"')")
messages.success(request, "El empleado "+usersave.nombres+" se guardo correctamente ")
return render(request, 'app/crearusuario.html', data)
else:
return render(request, 'app/crearusuario.html', data)
base.html(messages of sweetalert)
{% if messages%}
{% for displaydata in messages%}
<script>
Swal.fire({
"title": "Felicitaciones",
"text": "{{displaydata}}",
"icon": "success"
})
</script>
{% endfor%}
{% endif%}
help me please!!

How to get a ID in a modal coming by dataTable?

My question is, I'm posting an ID into a modal, but when I click in a datepicker inside modal, it gives me as an undefined value, it seems that I'm losing the ID somewhere, could you help me? Here is my code:
Here is my modal HTML:
<div class="modal fade" id="modalUpdatePeriodico" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered " role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Prontuário médico</h4>
<!-- para pegar o id do meu campo -->
<input type="hidden" id="hiddenIdPeriodic"/>
</div>
<div class="modal-body">
<div class="row">
<!-- left column -->
<div class="col-md-12">
<!-- Inicio do Formulario de Pesquisa -->
<form id="formUpdatePeriodico" enctype="multipart/form-data" action="#" method="POST">
<!-- Form Data e Qtde dias -->
<div class="form-row">
<div class="form-group col-md-6">
<label for="dateExam">Data da Realização</label>
<input type="text" class="form-control datepicker-calendar" id="dateExam" name="dateExam">
</div>
<div class="form-group col-md-6">
<label for="statusExam">Status</label>
<select class="form-control select2" id="statusExam" name="statusExam">
<option value="1">Inapto</option>
<option value="2">Apto</option>
</select>
</div>
</div>
</form>
<!-- Fim do Formulario de Pesquisa -->
</div>
<!--/.col (right) -->
</div>
<!-- /.row -->
</div>
<div class="modal-footer">
<button
type="button"
id="btnSavePeriodic"
class="btn btn-success"
data-dismiss="modal"
onclick="saveEmpRestrictions('periodics', inputMatriculaAtes, dateExam, statusExam, hiddenIdPeriodic, examType);">
Salvar
</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
Here is my DataTable JS code:
function tbPeriodic() {
// Definição do id da tabela como um dataTable
$("#tbPeriodico").DataTable({
"ajax": "webservices/ws_medicalRecord/tables/tb_medicalRecords.php?action=per&matriculaOp=" + <?php echo $matricula; ?>,
sorting: false,
"columns":
[
{ "data": "id" ,
render: function(data, type, row) { // Função para link de download dos arquivos que foram "upados" no formulário.
data = '' + row.id + '';
return data;
}
},
{ "data": "ult_exame" },
{ "data": "tipo_exame" },
{ "data": "status_exame" },
{ "data": "prox_exame" }
]
});
}
Here is my function to post my id into a input hidden:
$("#modalUpdatePeriodico").on('show.bs.modal', function (event) {
var callModal = $(event.relatedTarget); // Para pegar tudo que há na opção que chama o modal
var id = callModal.data('id'); // pegando o parametro ID da minha opção que chama o modal (data-id)
console.log(id);
var modal = $(this);
modal.find('.modal-header #hiddenIdPeriodic').val(id); // Adicionando o id em um campo hidden só para pegar esse valor depois
});
Here is my datepicker function:
$('.datepicker-calendar').datepicker({
autoclose: true
});
So, when I input a date from my datepicker the console shows me undefined, could you help me?
Thanks a lot!

I think you are confused here and there are 2 things happening. Or I should say there is one thing happening and the other step is missing. I am going to try and clarify this for you.
#1
The undefined is happening because you are not getting the value of id correctly. Add a class clickme to your dataTable <a> like below and get rid of the modal call.
dataTable
data = '<a class="clickme" href="#" data-id="' + row.id + '" id="' + row.id + '">' + row.id + '</a>';
Then get rid of
$("#modalUpdatePeriodico").on('show.bs.modal', function (event) {
var callModal = $(event.relatedTarget); // Para pegar tudo que há na opção que chama o modal
var id = callModal.data('id'); // pegando o parametro ID da minha opção que chama o modal (data-id)
console.log(id);
var modal = $(this);
modal.find('.modal-header #hiddenIdPeriodic').val(id); // Adicionando o id em um campo hidden só para pegar esse valor depois
});
and change it to
$(document).on('click', '.clickme', function() {
var id = $(this).data('id');
$('#modalUpdatePeriodico').modal('show');
$('#modalUpdatePeriodico').find('#hiddenIdPeriodic').val(id);
console.log(id);
})
#2
The date thing is a different event so add this to get the date
$('.datepicker-calendar').datepicker({
autoclose: true,
onSelect: function(date) {
console.log(date)
}
})

Validate modal-form with jquery

i have a problem with validate modal-form with jquery. If i click the button nothing happens. Instead if i write inside an input form and i click on the button it convalidate.It's like the code didn't see the javascript. I have locked the solutions of my problem many times but i can't find them. I have a separate file javascript and i put it in the head of the page where is the modal. I put also the links for the jquery library from google.
I noticed that when i open the page for the first time and press the button to validate it validate without check the parameters that i write in the script and the other times when i click the button nothing happens.
Here the links of the libraries:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
This is my modal contain the form:
<!-- Modale -->
<div class="modal fade" id="modaleReg" tabindex="-1" role="dialog" aria-labelledby="modale" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-sm" id="modifyMod" role="document">
<!-- Contenitore modale -->
<div class="modal-content">
<!-- Header modale -->
<div class="modal-header">
<h5 class="modal-title" id="titMod">modale</h5>
<span class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">×</span>
</div>
<!-- Body modale -->
<div class="modal-body">
<!--Form per iscrizione -->
<form action="#" id="form">
<div class="form-group">
<label for="name">Nome</label>
<input id="name" name="name" type="text" class="form-control" placeholder="Nome">
</div>
<div class="form-group">
<label for="surname">Cognome</label>
<input id="surname" name="surname" type="text" class="form-control" placeholder="Cognome">
</div>
<div class="form-group">
<label for="email">Email address</label>
<input id="email" name="email" type="email" class="form-control" aria-describedby="emailHelp" placeholder="Email">
<small id="emailHelp" class="form-text text-muted">Non condivideremo mai la tua email con nessuno.</small>
</div>
<div class="form-group">
<label for="password">Crea password</label>
<input id="password" name="password" type="password" class="form-control">
</div>
<div class="form-group">
<label for="confermaPsw">Conferma password</label>
<input id="confermaPsw" name="confermaPsw" type="password" class="form-control">
</div>
<button type="submit" class="btn btn-primary btnmod">Continua</button>
</form>
</div>
<!-- Footer modale -->
<div class="modal-footer">
</div>
<!--Fine contenitore modale -->
</div>
</div>
</div><!-- Fine modale -->
This is my javascript code:
$(document).ready(function() {
// Selezione form e definizione dei metodi di validazione
$("#form").validate({
// Definiamo le nostre regole di validazione
rules : {
// name - nome del campo di input da validare
name : {
// Definiamo il campo name come obbligatorio
required : true
},
password : {
required : true,
// Settiamo la lunghezza minima e massima per il campo password
minlength : 5,
maxlength : 8
},
email : {
required : true,
// Definiamo il campo email come un campo di tipo email
email : true
}
},
// Personalizzimao i mesasggi di errore
messages: {
name: "Inserisci il nome",
password: {
required: "Inserisci una password password",
minlength: "La password deve essere lunga minimo 5 caratteri",
maxlength: "La password deve essere lunga al massimo 8 caratteri"
},
email: "Inserisci la tua email"
},
});
});

Can you please add below code with validate function and try again
$(document).ready(function() {
// Selezione form e definizione dei metodi di validazione
$("#form").validate({
// Definiamo le nostre regole di validazione
rules : {
// name - nome del campo di input da validare
name : {
// Definiamo il campo name come obbligatorio
required : true
},
password : {
required : true,
// Settiamo la lunghezza minima e massima per il campo password
minlength : 5,
maxlength : 8
},
email : {
required : true,
// Definiamo il campo email come un campo di tipo email
email : true
}
},
// Personalizzimao i mesasggi di errore
messages: {
name: "Inserisci il nome",
password: {
required: "Inserisci una password password",
minlength: "La password deve essere lunga minimo 5 caratteri",
maxlength: "La password deve essere lunga al massimo 8 caratteri"
},
email: "Inserisci la tua email"
},
submitHandler: function(form) {
// code to submit the form
}
});
});
You can also try to add you code in modal box and it will works fine

Save data in .xls file with ajax, javascript and PHPExcel

I am practicing with ajax and javascript, and the following problem has arisen.
I need to send by POST the values of 2 text input and 1 drop-down list (select), and save that data in an excel file that I created on the server.
The .php file uses the classes provided by PHPExcel.
I click on the submit button, and it does not do anything.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Final</title>
<link rel="stylesheet" href="/css/styles.css" media="all">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<form action="/participantes/participantes.php" method="post" enctype="multipart/form-data">
<div class="main-data">
<p>
<label for="nombre">NOMBRE:</label>
<input type="text" name="nombre" id="nombre" placeholder="Escribí tu nombre" value="" required />
</p>
<p>
<label for="apellido">APELLIDO:</label>
<input type="text" name="apellido" id="apellido" placeholder="Escribí tu nombre" value="" required />
</p>
<p>
<label for="oficina">OFICINA:</label>
<select name="oficina" id="oficina" class="cajas" required>
<option value="">Seleccioná tu oficina</option>
<option value="1">SG</option>
<option value="2">SRIC</option>
<option value="3">SCAL</option>
</select>
</p>
<input type="submit" value="Guardar" id="save" name="save" onclick="save();"/>
</div>
</form>
<script src="/js/scripts.js"></script>
<script src="/js/md5.js"></script>
</body>
</html>
scripts.js
function save() {
// Recogemos los datos del formulario
var nombre = document.getElementById('nombre').value.toUpperCase();
var apellido = document.getElementById('apellido').value.toUpperCase();
var oficina = document.getElementById('oficina').value.toUpperCase();
// Definimos los parámetros que vamos a enviar
var parametros = "nombre="+nombre+"&apellido="+apellido+"&oficina="+oficina;
// Definimos la URL que vamos a solicitar via Ajax
var url = "http://localhost/participantes/participantes.php";
// Creamos un nuevo objeto encargado de la comunicación
var xhttp = new XMLHttpRequest();
// xhttp.onreadystatechange = function() {
// if (this.readyState == 4 && this.status == 200) {
// console.log(this.response);
// }
// };
// Definimos como queremos realizar la comunicación
xhttp.open("POST", url, true);
// Ponemos las cabeceras de la solicitud como si fuera un formulario, necesario si se utiliza POST
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Enviamos la solicitud junto con los parámetros
xhttp.send(parametros);
console.log(url+parametros);
}
participantes.php
<?php
// Función para limpiar strings
function cleanFields($string) {
// Elimina espacios en blanco (u otro tipo de caracteres) del inicio y el final de la cadena
$string = trim($string);
// Retira las etiquetas HTML y PHP de una cadena
$string = strip_tags($string);
// Convierte caracteres especiales en entidades HTML
$string = htmlspecialchars($string);
// Si están activas las magic_quotes revierte su acción mediante stripslashes
if(get_magic_quotes_gpc()){
$string = stripslashes($string);
}
return($string);
}
if(isset($_POST["save"])) {
//Limpiar todos los campos recibidos
$fecha = date('d/m/Y');
$nombre = strtoupper(cleanFields($_POST["nombre"]));
$apellido = strtoupper(cleanFields($_POST["apellido"]));
$oficina = strtoupper(cleanFields($_POST["oficina"]));
$codigo = md5($nombre.$apellido);
/** Include PHPExcel */
require_once '../Classes/PHPExcel.php';
require_once '../Classes/PHPExcel/IOFactory.php';
$objPHPExcel = PHPExcel_IOFactory::load("participantes.xlsx");
$objPHPExcel->setActiveSheetIndex(0);
$row = $objPHPExcel->getActiveSheet()->getHighestRow()+1;
//echo $row;
$objPHPExcel->getActiveSheet()->SetCellValue('A'.$row, $fecha);
$objPHPExcel->getActiveSheet()->SetCellValue('B'.$row, $nombre);
$objPHPExcel->getActiveSheet()->SetCellValue('C'.$row, $apellido);
$objPHPExcel->getActiveSheet()->SetCellValue('D'.$row, $oficina);
$objPHPExcel->getActiveSheet()->SetCellValue('E'.$row, $codigo);
$objWriter = new PHPExcel_Writer_Excel2007($objPHPExcel);
$objWriter->save('participantes.xlsx');
}
?>