How can I display my input text data on modal when I click submit button

[ephdee]

<form method="post" action="">

    <input type="text" name="something" value="<?= isset($_POST['something']) ? htmlspecialchars($_POST['something']) : '' ?>" />

    <input type="submit" name="myBtn" />


  </form>







<!-- Trigger/Open The Modal -->

 <button type="button" id="myBtn" class="btn btn-info" data-toggle="modal" data-target="#myModal">Proceed</button>


<!-- The Modal -->

<div id="myModal" class="modal">


  <!-- Modal content -->

  <div class="modal-content">


    <span class="close">×</span>


    <p>Some text in the Modal..</p>

     <?php

if(isset($_POST['myBtn'])) {

  echo 'You entered: ', htmlspecialchars($_POST['something']);

}

?>




  </div>

</div>



<script>

// Get the modal

var modal = document.getElementById('myModal');


// Get the button that opens the modal

var btn = document.getElementById("myBtn");


// Get the <span> element that closes the modal

var span = document.getElementsByClassName("close")[0];


// When the user clicks the button, open the modal 

btn.onclick = function() {

    modal.style.display = "block";

}


// When the user clicks on <span> (x), close the modal

span.onclick = function() {

    modal.style.display = "none";

}


// When the user clicks anywhere outside of the modal, close it

window.onclick = function(event) {

    if (event.target == modal) {

        modal.style.display = "block";

    }

}

</script>



      </div>

</div></div>

Edited March 31, 2017 by requinix
DON'T YELL AT US

[ginerjm]

Hmmm... Your input form/screen shows the data that has been provided already when you are clicking the submit button. Why then do you need to go thru all this JS to show it again?

[ephdee]

i dont get you please am still new to php and javscript. kindly explain to me better or modify the code for me please

[ginerjm]

You don't get who/what? We didn't post anything - you did.

[ephdee]

The below code is not part of it, it was a mistake

<input type="submit" name="myBtn" />

[ephdee]

You were trying to eexplain something to me in your first reply......... but i really dont get the explanation

[ginerjm]

To whom are you directing your question? If it is me - I wasn't trying to tell you anything. I was asking you something.

 

When you have a form on your client screen and the user is filling it in with data and clicks the submit button I asked you why you wanted to show this data in your 'modal' window/div area? What purpose does it serve? The user can already see it since he just typed it in.

[ephdee]

The reason i wanted to show it in modal is to allow the user to confirm/verify. After verification the user then click the submit button in modal and a new modal window will pop up

[ginerjm]

How are you going to make this popup div modal? And are you saying that after they look at it and agree to submit it, that ANOTHER modal div is going to show up? Whatever for?

 

Couldn't you just add a js confirm popup to the real 'submit' button to get them to say yes before it submits? Much simpler and less annoying for the user.

[ephdee]

Yes is going to be popup div modal. After confirming their input and click on submit another modal will pop. Its an assignment and that is the way we are instructed to do it. kindly help me please. I Have been facing this challenge for over a month.

[ginerjm]

For me to write it would not be helping you to learn.

 

Show us the code you are writing (your first post is kind of vague) and tell us what you have a problem with. What is wrong - the #1 submit doesn't display the div ? That is a JS problem. The div shows up but you can't get the data to display in it? That is a JS problem. You can't get an answer from the user from the modal? How are you trying to do it - with some Ajax or more JS?

 

This is a php forum. If you answer any of my questions with a yes, then perhaps you need to move this conversation.

[ephdee]

My answer is yes to all your questions those are the exact problem i am facing. I am trying to do it with some more JS.

 

I dont know but i think this where i am having issues

 <form method="post" action="">
    <input type="text" name="something" value="<?= isset($_POST['something']) ? htmlspecialchars($_POST['something']) : '' ?>" />
      </form>         

<!-- Trigger/Open The Modal -->
 <button type="button" id="myBtn" name="myBtn" class="btn btn-info" data-toggle="modal" data-target="#myModal">Proceed</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
 
    <span class="close">×</span>
   
    <p>Some text in the Modal..</p>
     <?php
if(isset($_POST['myBtn'])) {
  echo 'You entered: ',"something";
}
?>

   
    
  </div>
</div>
 

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "block";
    }
}
</script>


      </div>
</div></div>
          

[ginerjm]

You have JS questions - you s/b on the JS forum.

 

As for your issues - what are your issues?

 

I will say this. Learn how to organize your web page. Put your html in one place. Put your JS in another place. Use proper HTML page structure. Why is your JS in the middle of your php code and your html code? Separate your php code completely from your html/js code. Make this document easy to read and you might find it easier to maintain.

 

HTML structure should look something like this ( I may be out-dated here)

<html>

<head)

<style>

</style>

<script>

(your js code)

</script>

</head>

<body>

(html code; no js code;)

</body>

</html>

 

Does any of this look familiar?

Edited March 31, 2017 by ginerjm

[ephdee]

concerning the issues, whenver i click on the the 2nd button before clicking on the 1st button it show the modal window but does not show the user input

 

(2nd button):

<button type="button" id="myBtn" name="myBtn" class="btn btn-info" data-toggle="modal" data-target="#myModal">Proceed</button>

but when i click on the 1st submit button it  reload the page but does not show the modal . if i decide to click on the 2nd button again after i have click on the 1st one, it show the user input in the modal

 

(1st button):

 <input type="submit" name="myBtn" />

 i only need one button but because of the probs i decided to use two buttton so i can get to the root of the problem. when i try to use only the first  button it only reload the page, when i use the 2nd button it show the modal but doesnot display the user input......

[ginerjm]

Obviously there is much more to this page than you are sharing.

 

First of all WHERE do you paste the input element data into this modal box? You're not revealing that. Plus you define some html elements but you don't assign them id values so your js can't see them. PS - you use a class designation for your span. Why not an id?

 

While this doesn't make a lot of sense since I know it is only a small part of your whole page, see if you can see how it COULD be written here.

[/php]

<?php

if(isset($_POST['myBtn']))

{

$message = 'You entered: ',"something";

}

if (isset($_POST['something']))

$something = htmlspecialchars($_POST['something']);

else

$something = '';

//

DisplayPage();

exit();

//******************************

// PHP ends here

//******************************

// HTML output begins here

//******************************

function DisplayPage()

{

global $message, $something;

$code=<<<heredocs

<!DOCTYPE html>

<html>

<head>

<title>My Page</title>

<script>

// Get the modal

var modal = document.getElementById('myModal');

// Get the button that opens the modal

var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal

var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal

btn.onclick = function()

{

modal.style.display = "block";

}

// When the user clicks on <span> (x), close the modal

span.onclick = function()

{

modal.style.display = "none";

}

// When the user clicks anywhere outside of the modal, close it

window.onclick = function(event)

{

if (event.target == modal)

{

modal.style.display = "block";

}

0 // WHAT IS THIS??????

}

</script>

</head>

<body>

$message

<br><br>

$something

<br>

<form method="post" action="">

<input type="text" name="something" value="$something" />

</form>

<!-- Trigger/Open The Modal -->

<button type="button" id="myBtn" name="myBtn" class="btn btn-info" data-toggle="modal" data-target="#myModal">Proceed</button>

<!-- The Modal -->

<div id="myModal" class="modal">

<!-- Modal content -->

<div class="modal-content">

<span class="close">×</span>

<p>Some text in the Modal..</p>

</body>

</html>

heredocs;

echo $code;

return;

}

[/php]

[ginerjm]

PS - you don't have a submit button. You only have one "button"-like element in this code, not 2.

[ephdee]

  Am lost

[ginerjm]

So maybe you want to re-think your approach to data entry until your skills match your ideas?

 

You really haven't presented anything to us that we can work with. You show us half of a script no part of which is complete and want us to solve an undefined 'issue'. I asked you what the issue was but you never answered.