Jump to content

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


ephdee

Recommended Posts

<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>
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>
          
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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......

Link to comment
Share on other sites

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]

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.