drhzc64482 2012-08-27 12:50
浏览 37
已采纳

简单的联系表格与模态响应

Alright, I know there are many questions/answers for a modal contact form, but I would like to know how I can have a normal contact form on the page and when submitted, the PHP action is popped up in a modal, saying "Thanks for contacting us", or something along those lines, and then the ability to close. I've done HTML contact forms and hooked in the PHP action before, just never in a modal... Any simple solutions (without the use of plugins)?

If anyone has this question and wants it answered, please be sure to vote up.

  • 写回答

1条回答 默认 最新

  • duankekan9269 2012-08-27 13:36
    关注

    If you want to have a javascript-free solution, then your form-handling script will need to be able to present all states of the form. These include:

    • initial unfilled form
    • response to first submission which may be:
      • display of partially or incorrectly filled form with errors marked
      • thank-you message
    • response to thank-you message

    A modal popup is only a translucent container element (e.g. <div>) styled to be z-positioned on top of all the other html (except its children) and to cover the entire viewport. It contains a form and anything else you might like. When it is not in use, its display attribute is set to none.

    So your php form handler might work something like this:

    $modalclass='modalhide';
    $filteredpost=array();
    
    if(isset($_POST['submit1']){ //user submitted form data
        //validate submitted data
        $filteredpost = my_cleanup_function($_POST); 
        if(my_form_is_good($filteredpost){
          $modalclass='modalshow';
          $filteredpost=array();
        } 
    } 
    
    echo <<< EOF
    <form method='POST' name='mainform' action='myhandler.php'>
       //other form fields
       <input type='submit' name='submit1'>
    </form>
    <div class='$modalclass'>
       <form name='thanksmodal' method='POST' action='myhandler.php'>
          //content of some sort
          <input type='submit' name='thankssubmit'>
       </form>
    </div>
    EOF;
    

    The AJAX method is similar except that a javascript intercepts the submit button actions, submits to a form-handling script asynchronously and presents the results. There are lots of javascript libraries around to make this easier. jQuery and jQuery-UI are my two favourites.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 用windows做服务的同志有吗
  • ¥60 求一个简单的网页(标签-安全|关键词-上传)
  • ¥35 lstm时间序列共享单车预测,loss值优化,参数优化算法
  • ¥15 Python中的request,如何使用ssr节点,通过代理requests网页。本人在泰国,需要用大陆ip才能玩网页游戏,合法合规。
  • ¥100 为什么这个恒流源电路不能恒流?
  • ¥15 有偿求跨组件数据流路径图
  • ¥15 写一个方法checkPerson,入参实体类Person,出参布尔值
  • ¥15 我想咨询一下路面纹理三维点云数据处理的一些问题,上传的坐标文件里是怎么对无序点进行编号的,以及xy坐标在处理的时候是进行整体模型分片处理的吗
  • ¥15 一直显示正在等待HID—ISP
  • ¥15 Python turtle 画图