0

I am working on a callback page and after the user has entered their details and press the "request a callback" button it toggles a modal i made with CSS3. I put in 27th September but it should display the date that the user selected from the select box and then display it in the modal.

Does anyone know how to do this as i am new to PHP and could only find documentation for displaying it via POST and GET which involved using two pages.

The URL for the live example of the form is: http://temp.tefl.org.uk/callback

enter image description here

Code:

        <h6 style="color:#7F7F7F; padding-bottom:15px">Select the day and time that you would prefer an advisor to call you back on.</h6>

        <form class="form-horizontal">     
<div class="control-group">
   <label class="control-label" for="inputEmail">Date To Call</label>
     <div class="controls">
        <select>
            <option>Monday 1st September </option>
            <option>Tuesday 2st September</option>
            <option>Wednesday 3st September</option>
            <option>Thursday 4st September</option>
            <option>Friday 5st September</option>
         </select>
     </div>
 </div>
         <div class="control-group">
           <label class="control-label" for="inputEmail">Time To Call</label>
            <div class="controls">
              <select>
                  <option>Please select...</option>
                  <option>09:00</option>
                  <option>09:30</option>
                  <option>10:00</option>
                  <option>10:30</option>
                  <option>11:00</option>
                  <option>11:30</option>
                  <option>12:00</option>
                  <option>12:30</option>
                  <option>13:00</option>
                  <option>13:30</option>
                  <option>14:00</option>
                  <option>14:30</option>
                  <option>15:00</option>
                  <option>15:30</option>
                  <option>16:00</option>
                  <option>16:30</option>
                  <option>17:00</option>
              </select>
            </div>
         </div>
        </form>         
        <a class="btn btn-danger" style="margin-top:15px"  href="#openModal">Request A Call Back</a>

    </div>

    </div><!--.row-->

 <div id="openModal" class="modalDialog">
 <div><a href="#close" title="Close" class="close">X</a>
  <h1 style="text-align:center">Thank you, <?php echo $_POST["forename"]; ?></h1>
    <h4 style="text-align:center; margin-top:15px">Your call back request has been logged, a member of our team will contact you on</h4>
    <h4 style="text-align:center; margin-top:25px; color:#7f7f7f"><b>27th September 2014 @ 0900</b></h4>
  <center><a href="http://temp.tefl.org.uk/callback" class="btn btn-success" style="margin-top:15px; margin-bottom:10px">Okay great!</a></center>

</div>
</div>
2
  • actually you've got some sort of script going on there which triggers when you click the "Request A Call Back" button - I've quickly looked through your code but see nothing. Can you point us to your modal script you've included, if you know which one it is, so we can see what variables its working with. Commented Aug 27, 2014 at 11:46
  • Your sensitive informations (etc. date) are written badly. Consider adding an id or a class so javascript can reach them. Commented Aug 27, 2014 at 11:50

3 Answers 3

1

Just I tried this way

Script

<script>
function requestSent(thisValue,className){
    $('.'+className).html(thisValue);
}
</script>

Html

     <select name="dmy" id="dmy" onchange="requestSent(this.value,'responseRecvd1')">
        <option>Monday 1st September </option>
        <option>Tuesday 2st September</option>
        <option>Wednesday 3st September</option>
        <option>Thursday 4st September</option>
        <option>Friday 5st September</option>
     </select>

     <select name="tme" id="tme" onchange="requestSent(this.value,'responseRecvd2')">
              <option>Please select...</option>
              <option>09:00</option>
              <option>09:30</option>
              <option>10:00</option>
              <option>10:30</option>
              <option>11:00</option>
              <option>11:30</option>
              <option>12:00</option>
              <option>12:30</option>
              <option>13:00</option>
              <option>13:30</option>
              <option>14:00</option>
              <option>14:30</option>
              <option>15:00</option>
              <option>15:30</option>
              <option>16:00</option>
              <option>16:30</option>
              <option>17:00</option>
          </select>     

 <h4 style="text-align:center; margin-top:25px; color:#7f7f7f" class="responseRecvd1"><b>27th September 2014</b></h4>
 <h4 style="text-align:center; margin-top:25px; color:#7f7f7f" class="responseRecvd2"><b>@ 0900</b></h4>

or

How to pass values arguments to modal.show() function in Bootstrap

Sign up to request clarification or add additional context in comments.

Comments

0

I assume the modal window is on the same html page with your form? You can't use POST is this case, as it does not contain user input yet (the page was rendered before user submitted his data).

I guess you also use Javascript to display that modal window? In this case you can simply substitute the date and time from user's input with javascript (just a quick example with some updates to your html):

<select id='selected_date'>
            <option>Monday 1st September </option>
            <option>Tuesday 2st September</option>
            <option>Wednesday 3st September</option>
            <option>Thursday 4st September</option>
            <option>Friday 5st September</option>
         </select>

<div id="openModal" class="modalDialog">
 <div><a href="#close" title="Close" class="close">X</a>
  <h1 style="text-align:center">Thank you, <span class="username"><span> ?></h1>
    <h4 style="text-align:center; margin-top:15px">Your call back request has been logged, a member of our team will contact you on</h4>
    <h4 style="text-align:center; margin-top:25px; color:#7f7f7f"><b><span class="date"></span> @ 0900</b></h4>
  <center><a href="http://temp.tefl.org.uk/callback" class="btn btn-success" style="margin-top:15px; margin-bottom:10px">Okay great!</a></center>

</div>

$("form a.btn-danger").click(function(){
  //your modal page opening is handled somewhere here

  var selectedDate = $("#selected_date").find(":selected").text();
  $("#openModal").find("span.date").html(selectedDate);
});

And as a quick note: it's better to use css instead of inline style definitions;)

Comments

0

As i have tried using jquery. Its working with me. Just added "id" to the select element and a span to the date placing area.

May it helps you.

    <script>
    $(document).ready(function(){
        $('.btn-danger').click(function(){
            var datetocall = $('#date-to-call').val();
            var datetotime = $('#date-to-time').val();
            if(datetotime == 'Please select...')
            {
                var datetottime = '';
            }
            var addeddate = datetocall +' '+datetotime;
            $('#element_date').html(addeddate);
        });
    });
    </script>
<h6 style="color:#7F7F7F; padding-bottom:15px">Select the day and time that you would prefer an advisor to call you back on.</h6>

        <form class="form-horizontal">     
<div class="control-group">
   <label class="control-label" for="inputEmail">Date To Call</label>
     <div class="controls">
        <select id="date-to-call">
            <option>Monday 1st September </option>
            <option>Tuesday 2st September</option>
            <option>Wednesday 3st September</option>
            <option>Thursday 4st September</option>
            <option>Friday 5st September</option>
         </select>
     </div>
 </div>
         <div class="control-group">
           <label class="control-label" for="inputEmail">Time To Call</label>
            <div class="controls">
              <select id="date-to-time">
                  <option>Please select...</option>
                  <option>09:00</option>
                  <option>09:30</option>
                  <option>10:00</option>
                  <option>10:30</option>
                  <option>11:00</option>
                  <option>11:30</option>
                  <option>12:00</option>
                  <option>12:30</option>
                  <option>13:00</option>
                  <option>13:30</option>
                  <option>14:00</option>
                  <option>14:30</option>
                  <option>15:00</option>
                  <option>15:30</option>
                  <option>16:00</option>
                  <option>16:30</option>
                  <option>17:00</option>
              </select>
            </div>
         </div>
        </form>         
        <a class="btn btn-danger" style="margin-top:15px"  href="#openModal">Request A Call Back</a>

    </div>

    </div><!--.row-->

 <div id="openModal" class="modalDialog">
 <div><a href="#close" title="Close" class="close">X</a>
  <h1 style="text-align:center">Thank you, <?php echo $_POST["forename"]; ?></h1>
    <h4 style="text-align:center; margin-top:15px">Your call back request has been logged, a member of our team will contact you on</h4>
    <h4 style="text-align:center; margin-top:25px; color:#7f7f7f"><b><span id="element_date">27th September 2014 @ 0900</span></b></h4>
  <center><a href="http://temp.tefl.org.uk/callback" class="btn btn-success" style="margin-top:15px; margin-bottom:10px">Okay great!</a></center>

</div>
</div>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.