Cambiar y guardar datos de usuario de mysql dentro de una vista Tabla que muestra los datos de un usuario

Tengo una tabla que muestra los datos de usuario obtenidos de una tabla mysql. Quiero hacer que sea editable dentro de las celdas de esta tabla. He usado php para mostrar datos dentro de campos de entrada de tipo “texto” como se muestra en el código.

Para volver a enviar los datos modificados, he envuelto la fila de la tabla dentro de un formulario, pero el problema es que los datos del formulario no se vuelven a enviar. Quiero hacer que el usuario cambie sus detalles y enviarlos usando el botón “guardar datos de usuario” que no envía datos para la actualización en clics ni funciona como botón de envío. Traté de usar OnSubmit también. Por favor ayuda.

   SAS User Info   function chgform(){ var frm = document.createElement("FORM"); var v0 = document.getElementById("ser").value; var v1 = document.getElementById("name").value; var v2 = document.getElementById("typo").value; var v3 = document.getElementById("email").value; frm.ser.value = v0; frm.name.value = v1; frm.typo.value = v2; frm.email.value = v3; frm.action='editu.php'; frm.submit(); };  query($queryU); if ($listU->num_rows > 0){ while($rowu = $listU->fetch_assoc()) { $s = $rowu['ser'] ; $u = $rowu['username'] ; $t = $rowu['user_type'] ; $e = $rowu['email'] ; $tt = NULL; if($t=="Administrator"){$tt = "checked"; $z=NULL;} else {$z = "checked";} } } else { $s = $t = $u = $e = 'Nil'; } } ?>  body{ margin: 0; padding: 0; background: transparent; font-family: Arial; font-size: 22px; color: #000; } input[type=email], input[type=text]{ background: transparent; border: 1px solid rgba(255,255,255,0.6); border-radius: 2px; //color: #fff; font-family: 'Exo', sans-serif; font-size: 22px; font-weight: 400; padding: 4px; -webkit-placeholder-color: white; } .bkg{ position: absolute; top: -20px; left: -20px; right: -40px; bottom: -40px; width: auto; background-image: url("main.jpg"); height: 800px; background-size: cover; -webkit-filter: blur(2px); z-index: 0; } ::-webkit-input-placeholder{ color: rgba(255,255,255,.8); font-family: Helvetica; } .grad{ position: absolute; top: -20px; left: -20px; right: -40px; bottom: -40px; width: auto; height: 800px; background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,rgba(0,0,0,0)), color-stop(100%,rgba(10,10,10,0.65))); z-index: 1; opacity: 0.7; } .header{ position: fixed; top: calc(35% - 35px); left: calc(32% - 255px); z-index: 2; } .nav{ position: fixed; top: calc(40% - 75px); left: calc(25% - 255px); height: 250px; width: 270px; padding: 10px; z-index: 1; background-color:rgba(75, 75, 75, 0.5); } .vuser{ position: absolute; top: calc(40% - 75px); left: calc(38% - 90px); height: 250px; width: 926px; padding: 10px; z-index: 2; background-color:rgba(75, 75, 75, 0.5); } .header div{ float: left; height:auto; color: #fff; font-family: 'Exo', sans-serif; font-size: 45px; font-weight: 300; } input[type=button]{ width: 260px; height: 35px; background: #fff; border: 1px solid #fff; cursor: pointer; border-radius: 2px; color: #a18d6c; font-family: 'Exo', sans-serif; font-size: 16px; font-weight: 700 ; padding: 6px; margin-top: 10px; } input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover{ opacity: 0.8; } input[type=button]:active{ opacity: 0.6; } input[type=password]:focus,input[type=text]:focus, input[type=email]:focus { border: 15px solid rgba(255,255,255,0.9); } } ::-moz-input-placeholder{ color: rgba(255,0,0,1); } .style2 { font-weight: bold} .style6 { font-weight: bold} .style8 { font-weight: bold} .style10 { font-weight: bold}    
SAS

 

User Registeration Data

Ser

Username

User Type

Email

<input type="text" style="margin-top: 0; margin-bottom: 0;" name="name" id="name" maxlength="15" size="15" pattern="[az,AZ,0-9]{5,15}" value="" required>
<input type="radio" style="margin-top: 0; margin-bottom: 0;" name="typo" id="typo" value="" required>Administrator
<input type="radio" style="margin-top: 0; margin-bottom: 0;" name="typo" id="typo" value="" " required>User
<input style="margin-top: 0; margin-bottom: 0;" type="email" name="email" maxlength="30" size="30" placeholder="Enter your email" value="" required>

Mi editu.php está aquí >>

 query($chg); header( "refresh:1; url=viewuser.php" ); } ?> 

Usando ajax lo básico:

  • Algunas nociones básicas del lado del servidor y del lado del cliente;

  • Ned algunas nociones básicas de javascript (jquery);

  • Y algunos conceptos básicos de html y javascript.

Para la primera parte:

La progtwigción del lado del servidor es escribir código que se ejecuta en el servidor, usando lenguajes soportados por el servidor (como Java, PHP, C #; es posible escribir código que se ejecuta en el lado del servidor en JavaScript). La progtwigción del lado del cliente es escribir un código que se ejecutará en el cliente y se realiza en los idiomas que el navegador puede ejecutar, como JavaScript, html y css.

Para el segundo:

El ajax es importante para declarar el jQuery Core.

Ejemplo:

  ...   

Use la última versión jQuery Core.

Tenga la noción de quién funciona el AJAX.

Ajax funciona siguiendo estos pasos:

  1. Se produce un evento en una página web (se carga la página, se hace clic en un botón)
  2. Un objeto XMLHttpRequest es creado por JavaScript
  3. El objeto XMLHttpRequest envía una solicitud a un servidor web
  4. El servidor procesa la solicitud
  5. El servidor envía una respuesta a la página web
  6. La respuesta es leída por JavaScript
  7. La acción adecuada (como la actualización de la página) la realiza JavaScript

Para más, use este enlace: https://www.w3schools.com/xml/ajax_intro.asp

Configure la solicitud:

url:

Tipo: Cadena

Descripción: una cadena que contiene la URL a la que se envía la solicitud.

datos:

Tipo: PlainObject o String o Array

Descripción: datos que se enviarán al servidor. Se convierte a una cadena de consulta, si no ya una cadena. Se adjunta a la url para solicitudes GET. Vea la opción processData para evitar este procesamiento automático. El objeto debe ser pares clave / valor. Si el valor es una matriz, jQuery serializa múltiples valores con la misma clave en función del valor de la configuración tradicional (que se describe a continuación).

dataType (valor predeterminado: Intelligent Guess (xml, json, script o html)):

Tipo: Cadena

Descripción: el tipo de datos que espera del servidor. Si no se especifica ninguno, jQuery intentará inferirlo basándose en el tipo MIME de la respuesta (un tipo MIME XML arrojará XML, en 1.4 JSON arrojará un objeto JavaScript, en 1.4 script ejecutará el script, y cualquier otra cosa será devuelto como una cadena). Los tipos disponibles (y el resultado pasado como el primer argumento para su callback exitosa) son:

xml: devuelve un documento XML que se puede procesar a través de jQuery.

html: devuelve HTML como texto sin formato; las tags de script incluidas se evalúan cuando se insertan en el DOM.

script: evalúa la respuesta como JavaScript y la devuelve como texto sin formato. Inhabilita el almacenamiento en caché al agregar un parámetro de cadena de consulta, _ = [TIMESTAMP], a la URL a menos que la opción de caché esté establecida en verdadero. Nota: Esto convertirá las POST en GET para solicitudes de dominio remoto.

json: Evalúa la respuesta como JSON y devuelve un objeto JavaScript. Las solicitudes “json” entre dominios se convierten a “jsonp” a menos que la solicitud incluya jsonp: false en sus opciones de solicitud. Los datos JSON se analizan de manera estricta; cualquier JSON malformado es rechazado y se produce un error de análisis. A partir de jQuery 1.9, también se rechaza una respuesta vacía; el servidor debe devolver una respuesta de nulo o {} en su lugar. (Consulte json.org para obtener más información sobre el formato JSON adecuado). Jsonp: Se carga en un bloque JSON utilizando JSONP. Agrega un extra “? Callback =?” hasta el final de su URL para especificar la callback. Inhabilita el almacenamiento en caché al agregar un parámetro de cadena de consulta, “_ = [TIMESTAMP]”, a la URL a menos que la opción de caché esté establecida en verdadero. texto: una cadena de texto sin formato. valores múltiples separados por espacios: a partir de jQuery 1.5, jQuery puede convertir un tipo de datos de lo que recibió en el encabezado Content-Type a lo que necesita. Por ejemplo, si desea que una respuesta de texto se trate como XML, use “text xml” para el dataType. También puede realizar una solicitud JSONP, recibirla como texto e interpretarla jQuery como XML: “jsonp text xml”. Del mismo modo, una cadena abreviada como “jsonp xml” primero intentará convertir de jsonp a xml y, en su defecto, convertir de jsonp a texto, y luego de texto a xml.

tipo (predeterminado: ‘GET’):

Tipo: Cadena

Descripción: El método HTTP a usar para la solicitud (por ejemplo, “POST”, “GET”, “PUT”). (versión agregada: 1.9.0)

éxito:

Tipo: Función (datos de cualquier cosa, String textStatus, jqXHR jqXHR)

Descripción: una función a ser llamada si la solicitud tiene éxito. La función recibe tres argumentos: los datos devueltos por el servidor, formateados según el parámetro dataType o la función de callback de DataFilter, si se especifica; una cadena que describe el estado; y el objeto jqXHR (en jQuery 1.4.x, XMLHttpRequest). A partir de jQuery 1.5, la configuración de éxito puede aceptar una serie de funciones. Cada función se llamará a su vez. Este es un Evento Ajax.

Para obtener más información acerca de la configuración, use el enlace: http://api.jquery.com/jquery.ajax/

Ejemplo:

AJAX:

 $.ajax({ url: 'test.php', type: 'POST', datatype: 'Json', data: {'var1': val_1, 'var2': val_2}, success: function (response) { $('.search-results').html(response); } }); 

PHP:

 $val = $_POST['var1'];//recive the values from ajax $val = $_POST['var2']; ...// The code to recive and create html code. echo json_encode($html);//send values back to the main page. 

Para la tercera y última parte:

  • Cómo llamar a la función javascript desde html y pasar el parámetro entre los dos. Use este enlace: cómo llamar a la función javascript desde html y pasar el parámetro a través de ella

Un ejemplo completo de trabajo:

      

Person info will be listed here...

Servidor PHP (teste.php):

       "."Could not connect:". mysqli_error($con)."

"; } mysqli_select_db($con,"ajax_demo"); $sql="SELECT * FROM user WHERE id = '".$q."'"; $result = mysqli_query($con,$sql); $html = ""; while($row = mysqli_fetch_array($result)) { $html = $html. ""; $html = $html. ""; $html = $html. ""; $html = $html. ""; $html = $html. ""; $html = $html. ""; $html = $html. ""; } $html = $html. "
Firstname Lastname Age Hometown Job
" . $row['FirstName'] . "" . $row['LastName'] . "" . $row['Age'] . "" . $row['Hometown'] . "" . $row['Job'] . "
"; mysqli_close($con); echo json_encode (array( 'html'=>$html, 'error_state'=>$error_state )); ?>

Cualquier duda, solo pide mi ayuda.

¡Buen trabajo! Y no olvides aceptar la respuesta si eso ayuda.

Logré el trabajo manejando el envío del formulario. Sin embargo, aprecio todo por al menos investigar esta cuestión. Los errores fueron: 1. No puse el formulario de envío en ningún formulario y tampoco lo manejé usando .submit () al hacer clic.
2. Estaba usando el tipo de botón dos veces … a. como “botón” b. como “enviar”