编辑ajax表单命令

时间:2016-04-19 14:41:52

标签: jquery html ajax xhtml

如何将提交按钮的以下代码更改为也会打印和/或返回页面顶部的代码?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com
/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/
recaptcha/api.js" async defer></script>
<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-
awesome.min.css" />
<link rel="stylesheet" type="text/css" href="file:///C|/Users/CRAIG
/Desktop/test/form_files/ajax-form.css" />
<script type="text/javascript" src="file:///C|/Users/CRAIG/Desktop
/test/form_files/jquery.ajax-form.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#JQAjaxForm1').fdAjaxForm({formEmailURL:"file:///C|/Users/CRAIG
/Desktop/test/form_files/email.php",formFileUploadURL:"file:///C|/Users
/CRAIG/Desktop/test/form_files/file_upload.php"});
});
</script>
</head>

<body>
<form id="JQAjaxForm1" class="JQAjaxForm" action="?" method="post">
  <div class="cf_form_content">
    <div class="cf_form_element cf_basic_element cf_required">
      <div class="cf_field_cover"> <span> <span class="cf_main_label">
  <span>Name:</span></span> <span class="cf_sub_label"><span>your
 name</span></span> </span>
    <div>
      <input type="text" name="name[]" placeholder="Your name" />
    </div>
  </div>
</div>
<div class="cf_form_element cf_email_element cf_required">
  <div class="cf_field_cover"> <span> <span class="cf_main_label">
<span>Email:</span></span> <span class="cf_sub_label"><span>a valid
 email</span></span> </span>
    <div>
      <input type="text" name="email[]" placeholder="Your name" data-val-
type="email" />
      <i class="cf_icon_mail"></i> </div>
  </div>
</div>
<div class="cf_form_element cf_textarea_element cf_required">
  <div class="cf_field_cover"> <span> <span class="cf_main_label">
<span>Message:</span></span> <span class="cf_sub_label"><span>more
 details</span></span> </span>
    <div>
      <textarea name="message[]" rows="5" placeholder="Type your message
here..."></textarea>
    </div>
  </div>
</div>
<div class="cf_form_element cf_submit_element">
  <div class="cf_field_cover">
    <div>
      <div class="cf_submit" style="text-align:right">
        <div class="cf_submit_button" style="float:right"> <span
 class="cf_label">Submit</span> <span class="cf_icon_submit"></span>
</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>
</body>
</html>

这是提交表单的整个ui。后一部分有编码提交表格。我不确定还有什么可以添加/贡献帮助。

1 个答案:

答案 0 :(得分:0)

您可能希望对您的问题更具体一点,但这是我的答案:

<div class="cf_form_element cf_submit_element">
  <div class="cf_field_cover">
    <div>
      <div class="cf_submit" style="text-align:right">
        <button class="cf_submit_button" style="float:right">
            <!--I'm guessing that's your submit button-->
            <span class="cf_label">Submit</span>
            <span class="cf_icon_submit"></span>
        </button>
        <button class="cf_submit_button" style="float:right" onclick="f()">
            <span class="cf_label">Print</span><!--Print button-->
            <span class="cf_icon_print"></span>
        </button>

    <script>
    function f(){
        window.print();
    }
    </script>