Mi problema es el siguiente. Actualmente tengo un formulario que se despliega mediante un popup al cliquear sobre un botón. Necesito saber cómo puedo modificar mi código para que, en caso de que el usuario haga algunos cambios en los campos del formulario pero no lo envie, sino que cierre el popup, al abrirlo nuevamente los datos del formulario se reestablezcan con sus value por defecto y no se guarden los cambios que había realizado el usuario.
Adjunto mi código hasta el momento.
Código PHP del formulario
<form name="publishform" id="publishform" class="publishform" method="POST" action="" onsubmit="return validateForm()">
<div name="publish" class="contenedor-inputs">
<div class="thirdone">
<div class="locationtitle modified">
<p>Ubicación</p>
</div>
<div class="location">
<div class="locationselector modified">
<div class="loc1">
<p>Provincia</p>
<select name="provincia" id="editprovincia" disabled>
<option selected><?php echo $lista['provincia'];?></option>
</select>
</div>
<div class="loc2">
<p>Localidad</p>
<select name="localidad" id="editlocalidad" disabled>
<option selected><?php echo $lista['localidad'];?></option>
</select>
</div>
</div>
</div>
</div>
<div class="secondthree">
<div class="currency">
<p>Moneda</p>
<div class="currencyselector">
<select name="currency" id="currency" onchange="show_moneda();">
<option value="<?php echo $lista['moneda'];?>" selected><?php echo $lista['moneda'];?> <?php echo '[Seleccionado]';?></option>
<option value="1">Dólar estadounidense (USD)</option>
<option value="2">Bitcoin (BTC)</option>
<option value="3">Ethereum (ETH)</option>
<option value="4">Binance Coin (BNB)</option>
<option value="5">Cardano (ADA)</option>
<option value="6">Dogecoin (DOGE)</option>
<option value="7">XRP (XRP)</option>
<option value="8">Polkadot (DOT)</option>
<option value="9">Uniswap (UNI)</option>
<option value="10">Litecoin (LTC)</option>
<option value="11">Chainlink (LINK)</option>
<option value="12">Tether (USDT)</option>
<option value="13">USD Coin (USDC)</option>
<option value="14">Binance USD (BUSD)</option>
<option value="15">DAI (DAI)</option>
</select>
<script type="text/javascript">
function show_moneda(){
var currency = document.getElementById('currency');
var currencyselected = currency.options[currency.selectedIndex].text;
document.getElementById("currencyselected").value = currencyselected;
console.log(currencyselected);
}
</script>
<input type="hidden" id="currencyselected" name="currencyselected" value="<?php echo $lista['moneda'];?>"></input>
</div>
</div>
<div class="quantfeecontainer">
<div class="quantity">
<p>Cantidad</p>
<div class="quantityselector">
<input type="number" name="quantity" id="quantIndicator" value="<?php echo $lista['cantidad'];?>" step="0.1" min="0">
</div>
</div>
<div class="fee">
<div class="feeptitle modified">
<p>Porcentaje de Comisión</p>
</div>
<div class="feeselector">
<input type="number" name="fee" id="feeIndicator" value="<?php echo $lista['comision'];?>" step="0.1" min="0">
</div>
</div>
</div>
</div>
<div class="firsttwo">
<div class="operationcheck">
<div class="operationtitle modified">
<p>Elegir Operación</p>
</div>
<input type="radio" id="checkCompra" name="operation" value="Compra">
<label for="checkCompra">Comprar</label>
<input type="radio" id="checkVenta" name="operation" value="Venta">
<label for="checkVenta">Vender</label>
<p class= "textmodified">Actualmente: <span><?php echo $lista['operacion'];?></span></p>
</div>
<div class="methodcheck">
<div class="methodtitle modified">
<p>Elegir Método</p>
</div>
<input type="checkbox" id="checkP2P" name="p2p" value="" onClick="P2P(this)">
<label for="checkP2P">P2P</label>
<input type="checkbox" id="checkF2F" name="f2f" value=""onClick="F2F(this)">
<label for="checkF2F">F2F</label>
<p class = "textmodified">Actualmente utilizas: <span><?php echo $lista['p2p'];?></span> <span><?php echo $lista['f2f'];?></span></p>
</div>
</div>
</div>
<div class="actionbuttons">
<a href="#" id="btn-cerrar-popup" class="btn-volver">Volver</a>
<input type="submit" id="confirmar" name="confirmar" class="btn-confirm" value="Actualizar">
</div>
<script type="text/javascript">
function validateForm() {
var currency = document.forms["publishform"]["currency"].value;
var quantity = document.forms["publishform"]["quantity"].value;
var fee = document.forms["publishform"]["fee"].value;
var operation = document.forms["publishform"]["operation"].value;
var p2p = document.forms["publishform"]["p2p"].value;
var f2f = document.forms["publishform"]["f2f"].value;
if (currency == " " && quantity == "0" && fee == "" || (operation != "Compra" && operation != "Venta") || (p2p == "" && f2f == "")) {
setTimeout(function () {
swal("¡Ups!","Algunos campos parecen estar vacíos. Es necesario que completes todas las opciones para poder editar tu anuncio.","error", {button: "Intentar de nuevo",})
}, 200);
return false;
}
}
</script>
</form>
Función JQuery para mostrar el formulario en popup al cliquear sobre un botón
$(function() {
$('.publishPModify').on('click', function(e) {
let publishContainer = $(this).closest('.publishContainer');
$(publishContainer).find('.overlay').addClass('active');
$(publishContainer).find('.publishannouncer').addClass('active');
$(publishContainer).find('.publish').addClass('active');
$(publishContainer).addClass('active');
});
$('.btn-volver').on('click', function(e) {
let publishContainer = $(this).closest('.publishContainer');
e.stopPropagation();
$(this).closest('.overlay').removeClass('active');
$(this).closest('.publishannouncer').removeClass('active');
$('.publish').removeClass('active');
$(publishContainer).removeClass('active');
});
});
Desde ya muchas gracias.