无需离开页面即可发送html表数据和表单数据

Question

I have to code to do both of these functions, however, when I try to integrate them its either one or the other. (either the email is sent with the name / email & lands on server.php, or the email is sent with the data & none of the inputs are sent). I want to be able to send both the html table data as well as the users name & email inputs. The code below will simply echo the html data or the users inputs.

This code sends data to the server:

Jquery / Html

<script language="javascript" type="text/javascript" src="jQuery.js">
</script>
<script language="javascript" type="text/javascript">
$(function(){
    var dataArr = [];
     $("table").each(function(){
        dataArr.push($(this).html());
    });
     $('#sendServer').click(function(){
     $.ajax({
          type : "POST",
          url : 'server.php',
          data : "content="+dataArr,
          success: function(data) {
              alert(data);// alert the data from the server
          },
          error : function() {
          }
        });
    });
});
</script>

 <table id="table" border=1>
    <thead> <tr>
    <th>First</th>
    <th>Last</th>
    <th>Date of birth</th>
    <th>City</th>
    </tr></thead>
    <tbody>
    <tr>
    <td>TEXT1</td>
    <td>TEXT2</td>
    <td>TEXT3</td>
    <td>TEXT4</td>
    </tr>
    <tr>
    <td>TEXT5</td>
    <td>TEXT6</td>
    <td>TEXT7</td>
    <td>TEXT8</td>
    </tr>
    <tr>
    <td>TEXT9</td>
    <td>TEXT10</td>
    <td>TEXT11</td>
    <td>TEXT12</td>
    </tr>
    </tbody>
    </table>
  <input id="sendServer" name="sendServer" type="button" value="Send to Server" />

Server.php

<?php 
echo $_REQUEST['content'];

?>

This form send data using ajax

<div style="padding:3px 2px;border-bottom:1px solid #ccc">Ajax Form</div>
<form id="ff" action="test.php" method="post">
<table>
    <tr>
        <td>Name:</td>
        <td><input name="name" type="text"></input></td>
    </tr>
    <tr>
        <td>Email:</td>
        <td><input name="email" type="text"></input></td>
    </tr>
    <tr>
        <td>Phone:</td>
        <td><input name="phone" type="text"></input></td>
    </tr>
    <tr>
        <td></td>
        <td><input type="submit" value="Submit"></input></td>
    </tr>
</table>
</form>

The jquery script

$('#ff').form({
success:function(data){
    $.messager.alert('Info', data, 'info');
}
});

And the php

$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];

echo "Your Name: $name <br/> Your Email: $email <br/> Your Phone: $phone";

I'm sure that I'm just missing something small. When I implement these into my code, an email is sent. The email contains either the name & email, or the html table data. The difference in code is putting a button action="submit" on my code. Whenever the email sent displays the name & email, the page also redirects to the blank php page. Hopefully I'm being clear enough. Cheers.

Answer 1

Just add a e.preventDefault(); to your submission javascript inside #sendServer's click handler. This will prevent the form from submitting traditionally like it's doing now.

You'll also need to add the parameter e to that function:

$('#sendServer').click(function(e){
    // ajax call
    e.preventDefault();
}

Or return false; in the same place as was commented below.