Result php in a Modal W3.CSS

Asked

Viewed 164 times

1

Hello! I’m testing the W3.CSS and I really liked what I saw until I locked it in a form with the result inside a Modal. My difficulty is when the event "onclick" submits the form, it opens the modal and the page gives a refresh without passing the data to the Modal.

Github

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>FORM + W3.CSS</title>
	<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
</head>
<body>
<!-- Meu form-->
	<div class="w3-content w3-container w3-blue" style="width: 500px;">
  		<h2>Meu Form</h2>
	</div>

	<form action="#" class="w3-content w3-container" style="width: 500px;">
  		<p>
 		<label>Nome</label>
 		<input id="nome" class="w3-input" type="text" name="nome">
 		</p>
  		<p>
  		<button onclick="abreModal()" class="w3-button">Abrir Modal</button>
  		</p>
</form>

<!-- Meu modal-->
<div id="meumodal" class="w3-modal">
  <div class="w3-modal-content">
    <div class="w3-container">
      <span onclick="fechaModal()" class="w3-closebtn">&times;</span>
      	<?php
      		$nome= $_GET['nome'];
			echo $nome;
		?>
    </div>
  </div>
</div>

<!-- funções-->
<script>
	function abreModal() {
		var nome = document.getElementById('nome').value;
		document.getElementById('meumodal').style.display='block';
	}
	function fechaModal() {
		document.getElementById('meumodal').style.display='none';
	}
</script>
</body>
</html>

php javascript ajax w3.css

1 answer

0

Friend,

If I understood correctly just missing the execution of the method that opens the modal, that would be abreModal().

For the simplicity of the code, it would already work:

<script>
function abreModal() {
    var nome = document.getElementById('nome').value;
    document.getElementById('meumodal').style.display='block';
}
function fechaModal() {
    document.getElementById('meumodal').style.display='none';
}

<?php
    if(isset($_GET['nome']))
    {
        echo "abreModal();";    
    };
?>

</script>

In time, if your learning is only with modal behavior, you wouldn’t need to even involve php, dynamically handling HTML content:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>FORM + W3.CSS</title>
	<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
</head>
<body>
	<!-- Meu form-->
	<div class="w3-content w3-container w3-blue" style="width: 500px;">
  		<h2>Meu Form</h2>
	</div>

	<form class="w3-content w3-container" style="width: 500px;" action="javascript:void(0)">
  		<p>
 		<label>Nome</label>
 		<input id="nome" class="w3-input" type="text" name="nome">
 		</p>
  		<p>
  		<button onclick="abreModal()" class="w3-button">Abrir Modal</button>
  		</p>
	</form>

	<!-- Meu modal-->
	<div id="meumodal" class="w3-modal">
	  <div class="w3-modal-content">
		<div class="w3-container">
		  <span onclick="fechaModal()" class="w3-closebtn">&times;</span>
		  <div id="modalNome"></div>
		</div>
	  </div>
	</div>

	<!-- funções-->
	<script>
		function abreModal() {
			var nome = document.getElementById('nome').value;
			document.getElementById('meumodal').style.display='block';
			document.getElementById('modalNome').innerText = nome;
		}
		function fechaModal() {
			document.getElementById('meumodal').style.display='none';
		}
		
	</script>
</body>
</html>

Browser other questions tagged php javascript ajax w3.css

You are not signed in. Login or sign up in order to post.