Loading... ### 页面效果： --- ![前台表单展示][1] ### 实现步骤： 1. 前台模板（注：需要引入jquery文件）>HTML代码： ```html <form id="foot_form"> <input type="hidden" name="fid" value="12"> <input type="hidden" name="sid" value="1"> <input type="hidden" name="dosubmit" value="1"> <input type='hidden' name='info[user_form]' id='user_form' type="text" value='' /> <div class="form_hang"> <div class="form_p"> <font>*</font>您的姓名： </div> <div class="form_txt"><input type="text" name="info[user_name]" id="user_name" placeholder="请输入您的姓名" class="input1" /></div> </div> <div class="form_hang"> <div class="form_p"> <font>*</font>联系方式： </div> <div class="form_txt"><input type="text" name="info[user_tel]" id="user_tel" placeholder="请输入您的联系方式" class="input1" /></div> </div> <div class="form_hang"> <div class="form_p"> <font>*</font>就诊日期： </div> <div class="form_txt"><input type="date" name="info[user_time]" id="user_time" class="input1" /></div> </div> <div class="form_hang"> <div class="form_p"> <font>*</font>疾病描述： </div> <div class="form_txt"><textarea placeholder="请详细描述您的病情，接受过哪些治疗，想获得哪些帮助？" name="info[user_con]" id="user_con" class="input2"></textarea></div> </div> <div class="form_hang"> <a href="tel:021-52530909" class="form_btn"></a> <input type="submit" value="" class="form_btn" id="sub" /> </div> </form> <script type="text/javascript" src="{JS_PATH}foot_liuyan.js"></script> ``` ### JS代码： ```javascript document.writeln("<div id=\'submit_box_loading\' style=\'display:none;top: 50%; left: 50%; margin-left: -105px; margin-top: -40px; width: 210px; height: 80px; line-height: 80px; font-size: 14px; border-radius: 5px; position: fixed; background: url("/statics/images/submit_tips_load.gif") 10px center no-repeat rgb(255, 255, 255); text-align: center; text-indent: 30px;\'>正在提交中，请稍等...</div>"); //留言来源 document.write('<script type="text/javascript" src="http://pv.sohu.com/cityjson?ie=utf-8"></script>'); $("#user_form").attr("value", window.location.href); var reg_cn_en = /^[\u0391-\uFFE5A-Za-z]+$/; var reg_tel_phone = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}/; function verification() { var user_form = window.location.href + "(" + returnCitySN['cname'] + "--" + returnCitySN.cip + ")"; var user_name = $("#user_name").val(); var user_tel = $("#user_tel").val(); var user_time = $("#user_time").val(); var user_con = $("#user_con").val(); var flag = true; $(".input1").each(function () { if (!$(this).val() || $(this).val() == "请输入您的姓名" || $(this).val() == "请输入您的联系方式") { window.alert("当前表单项不能为空"); $(this).focus(); flag = false; return false; } }); if (flag == true) { var i_two = $(".input1").eq(1).val(); if (!reg_tel_phone.test(i_two)) { window.alert("请输入正确的电话!"); $(".input1").eq(1).focus(); flag = false; return false; } } if (flag == true) { flag = false; $("#submit_box_loading").show(); var params = $('#foot_form').serialize(); //序列化表单的值 //var dataString="user_form="+user_form+"&user_name="+user_name+"&user_tel="+user_tel+"&user_time="+user_time+"&user_con="+user_con+""; $.ajax({ type: "POST", url: "index.php?m=formguide&c=index&a=diyform", //提交到后台文件 //data: dataString, //传值 dataType: 'json', //接受数据格式 data: params, success: function (data) { if (data.result === 'success') { $("#submit_box_loading").hide(); alert("留言成功，请等待工作人员回电!"); //$("#submit_box_ok").show(); flag = true; } else { $("#submit_box_loading").hide(); alert("留言失败!"); flag = true; } } }); } return false; } $("#foot_form").submit(function () { return verification(); }); ``` 2. 表单控制器 `phpcms/modules/formguide/index.php` 中增加 `diyform()` 函数。 ```php public function diyform() { if (!isset($_POST['fid']) || empty($_POST['fid'])) { $res['result'] = "error"; exit; } $siteid = $_POST['sid'] ? intval($_POST['sid']) : 1; $formid = intval($_POST['fid']); $r = $this->db->get_one(array('modelid' => $formid, 'siteid' => $siteid, 'disabled' => 0), 'tablename, setting'); if (!$r) { $res['result'] = "error"; exit; } $setting = string2array($r['setting']); if ($setting['enabletime']) { if ($setting['starttime'] > SYS_TIME || ($setting['endtime'] + 3600 * 24) < SYS_TIME) {$res['result'] = "error";exit;}}if (isset($_POST['dosubmit'])) { $tablename = 'form_' . $r['tablename']; $this->m_db->change_table($tablename); $data = array(); require CACHE_MODEL_PATH . 'formguide_input.class.php'; $formguide_input = new formguide_input($formid); $data = new_addslashes($_POST['info']); $data = new_html_special_chars($data); $data = $formguide_input->get($data); $data['userid'] = $userid; $data['datetime'] = date('Y-m-d H:i:s', SYS_TIME); $data['ip'] = ip(); $dataid = $this->m_db->insert($data, true); if ($dataid) { if ($setting['sendmail']) { pc_base::load_sys_func('mail'); $mails = explode(',', $setting['mails']); if (is_array($mails)) { /*foreach ($mails as $m) { sendmail($m, L('tips'), $this->M['mailmessage']); }*/ $f_info = $this->db->get_one(array('modelid' => $formid, 'siteid' => $this->siteid)); $MailSubject = '用户提交表单[' . $f_info['name'] . ']提醒'; $Fields = getcache('formguide_field_' . $formid, 'model'); $Fields['datetime']['name'] = '表单提交时间'; $Fields['ip']['name'] = '提交IP'; unset($data['userid']); foreach ($data as $k => $v) { $MailBody .= $Fields[$k]['name'] . '：' . $v . '<br />'; } foreach ($mails as $m) { sendmail($m, $MailSubject, $MailBody . $this->M['mailmessage']); } } } $this->db->update(array('items' => '+=1'), array('modelid' => $formid, 'siteid' => $this->siteid)); } $res['result'] = "success"; echo json_encode($res); } } ``` [1]: https://www.huangshuxiu.com/usr/uploads/2022/09/3657982907.png Last modification：February 7, 2023 © Allow specification reprint Like 如果觉得我的文章对你有用，请随意赞赏