php result in a W3CSS Modal

Navigation
1

Hello! I'm testing W3.CSS and I really enjoyed what I saw until I crashed into a form with the result inside a Modal. My difficulty is when the onclick event 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>
    
asked by anonymous 05.03.2017 / 06:00

1 answer

0

Friend,

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

For the simplicity of the code, this 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 modal behavior, you would not even have to involve php, dynamically dealing with 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>
    
05.03.2017 / 19:14
How to prevent access with macros disabled? [closed] Bring Sdk facebook javascript data