Guardar campos de formulario con AJAX, JS o PHP

Buen dia espero su ayuda como guardar los campos del formulario 2, ya sea por AJAX o JS, o PHP


Este es mi codigo fuente amm espero que no solo me dejen en mensaje visto u.u 😕

dayanastylo dijo:

Buen dia espero su ayuda como guardar los campos del formulario 2, ya sea por AJAX o JS, o PHP

Insertar CODE, HTML o PHP:

<?php
/*
Plugin Name: Integrador de Youtube URLs
Plugin URI: http://ditecompumx.com/formulario-youtube1
Description: Formulario e Integraccion de YouTube por medio de una URL
Version: 1.0.1
Author: Alejandro Ledesma
Author URI: http://ditecompumx.com/
Requires at least: 3.0
Tested Up to: 3.6
Stable Tag: trunk
License: GPL v2
*/
?>
 
<?php
 
//WordPress Hooks
add_shortcode('urler-shorcode','urlerintegrador');
 
function urlerintegrador(){
 
if ( isset($_POST['urler']) ) {
 
if (isset($_POST['youtube']))
{
    $youtube = $_POST['youtube'];
}
if (isset($_POST['cat']))
{
    $cat = $_POST['cat'];
}
 
$turl= $youtube ;
}?>
 
<p>
</p>
<?php
if ( isset($_POST['urler']) )
{
?>
 
<div id="resultado">
<p> Procesando URL ---> <?php echo $turl; ?></p>
 
<p>Titulo: <?php $meta = get_meta_tags($turl);
$titulo = $meta['title'];?><?php echo "$titulo";?></p>
 
<p>Descripcion: <?php
$page = file_get_contents($turl);
$doc = new DOMDocument();
$doc->loadHTML($page);
$divs = $doc->getElementsByTagName('div');
foreach($divs as $div) {
if ($div->getAttribute('id') === 'watch-description-text') {
 echo $div->nodeValue;}} ?></p>
 
Categoria : <?php $la_cat = get_category($cat); ?>
<!-- Si la categoría es padre, listar categoría -->
<?php if ($la_cat->category_parent == 0) { ?>
 
<?php echo $la_cat->cat_name; ?> <?php } ?>
 
</div>
<!-- CODE -->
<!-- CODE -->
<div id="form2">
<form method="post" action="" id="FORMULARIO_2" name="form2" >
 
<input type="hidden" required="required" value="<?php $meta = get_meta_tags($turl);
$titulo = $meta['title'];?><?php echo "$titulo";?>" name="titulo">
 
<input type="hidden" required="required" value="<?php
$page = file_get_contents($turl);
$doc = new DOMDocument();
$doc->loadHTML($page);
$divs = $doc->getElementsByTagName('div');
foreach($divs as $div) {
if ($div->getAttribute('id') === 'watch-description-text') {
echo $div->nodeValue;}} ?>" name="descripcion">
 
<input type="hidden" required="required" value="<?php $la_cat = get_category($cat); ?>
<?php if ($la_cat->category_parent == 0) { ?> <?php echo $la_cat->cat_name; ?> <?php } ?>" name="categoria">
<br>
 
<br>
<input type="submit" value="Guardar" >
<button> Corregir </button>
</form>
</div>
<?php
}
else
{
?>
<div id="form1">
<form method="post" action=''>
<label> *Ejemplo http://www.youtube.com </label>
<input name="youtube" required="required" style="width: 350px"  value="<?php echo $youtube ?>"> </input><br />
 
<label> Seleccionar Categoria: </label>
<?php wp_dropdown_categories($cat); ?>
 
<br>
<button type="submit" name="urler"> Enviar URL </button>
 
</form>
</div>
<?php
}
}
 
?>

Este es mi codigo fuente amm espero que no solo me dejen en mensaje visto u.u 😕

Hacer clic para expandir...

¡Hola! Para guardar los campos del formulario 2, puedes utilizar AJAX para enviar los datos al servidor sin necesidad de recargar la página. Aquí te dejo un ejemplo de cómo podrías hacerlo:

1. Primero, necesitas incluir jQuery en tu página. Agrega esto en el header de tu HTML o directamente en el código:

```html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
```

2. Luego, puedes añadir el siguiente script de JavaScript para manejar la petición AJAX y guardar los datos del formulario:

```javascript
$(document).ready(function() {
$('#FORMULARIO_2').submit(function(e) {
e.preventDefault();

var formData = $(this).serialize();

$.ajax({
type: 'POST',
url: 'tuarchivo.php', // Ruta al archivo PHP donde procesarás los datos
data: formData,
success: function(response) {
// Maneja la respuesta del servidor aquí
alert('Datos guardados correctamente');
},
error: function() {
alert('Error al guardar los datos. Por favor, inténtalo de nuevo.');
}
});
});
});
```

3. En tu archivo PHP (puedes llamarlo `tuarchivo.php`), puedes procesar los datos enviados por AJAX y guardarlos en la base de datos u otro lugar necesario. Aquí puedes recuperar los campos del formulario 2 utilizando `$_POST`:

```php
<?php
// Procesar y guardar datos del formulario 2
if (isset($_POST['titulo']) && isset($_POST['descripcion']) && isset($_POST['categoria'])) {
$titulo = $_POST['titulo'];
$descripcion = $_POST['descripcion'];
$categoria = $_POST['categoria'];

// Aquí puedes realizar las acciones necesarias para guardar los datos en tu base de datos

// Por ejemplo, insertar en la base de datos
// $query = "INSERT INTO tabla (titulo, descripcion, categoria) VALUES ('$titulo', '$descripcion', '$categoria')";
// mysql_query($query);
// echo 'Datos guardados correctamente';
} else {
echo 'Error al procesar los datos del formulario 2';
}
?>
```

Espero que esta guía te sea de ayuda. ¡Déjame saber si tienes alguna pregunta adicional o necesitas más asistencia!