Send jquery and html to AJAX or php and then send it to mail

Question

which is gonna be a Question form.

My questions is how can i send the filled out checkboxes and the estimated price to my email. I simply want to make a copy of the whole form and send it to my mail.

Link to the form as it is now: http://magnusaga.com/skjema/mailsend.php

the HTML:

<form id="ContactForm"  action="/mail.php" >

 <p>   <input type="checkbox" id="waterdm" name="waterdm" value="10" />Water Damage</p>

  <p>  <input type="checkbox" id="screendm" name="screendm" value="20" />Screen Damage</p>

  <p>  <input type="checkbox" id="Chargerdm" name="Chargerdm" value="30" />Charger Damage</p>

   <p>   <input type="checkbox" id="hdphdm" name="hdphdm" value="10" />Headphone Damage</p>
<p>Calculated Price:
    <input type="text" name="price" id="price" />
        <input type="text" name="days" id="greater" />

</p>
  <input class="submit" value="send"/>
      <div class="form_result"> </div>
           <div class="day_result"> </div>
</form>

the jquery:

<script>

$(document).ready(function () {
    var $inputs = $('input[type="checkbox"]')
    $inputs.on('change', function () {
        var sum = 0;
        $inputs.each(function() {
           if(this.checked)
               sum += parseInt(this.value);
        });

                if(sum > 30)
            $("#greater").val("3 days");
        $("#price").val(sum);   

    });



});

</script>

I think i have to append it to php.

Answer 1

I can suggest this jquery plugin. Jquery Form

<script>
    $(document).ready(function(){
            $('#submit').click(function(){ 
                var queryString = $('#myform').formSerialize(); 
                // the data could now be submitted using $.get, $.post, $.ajax, etc 
                $.ajax({
                    type: "POST",
                    data: queryString,
                    success: function(data){
                        alert('Message Sent');
                    }
                });
            });
    });
</script>
<form id="form" action="" id="myform">
    <p>
        <input type="checkbox" id="waterdm" name="waterdm" value="10" />Water Damage</p>
    <p>
        <input type="checkbox" id="screendm" name="screendm" value="20" />Screen Damage</p>
    <p>
        <input type="checkbox" id="Chargerdm" name="Chargerdm" value="30" />Charger Damage</p>
    <p>
        <input type="checkbox" id="hdphdm" name="hdphdm" value="10" />Headphone Damage</p>
    <p>Calculated Price:
        <input type="text" name="pris" id="price" />
    </p>
    <p>Estimated days:
        <input type="text" name="dager" id="greater" />
    </p>
    <input type="submit" value="send" id="submit"/>
    <div class="form_result"></div>
    <div class="day_result"></div>
</form>

PHP Code:

$message = "";
foreach($_POST as $k => $v){
    $v = strip_tags($v);
    $message .= "<p>$k:$v</p>";
}

Answer 2

There are two ways to get this mailed to you: Use a normal form, send it to the server PHP is running on, process it using PHP into an eMail text, and send it to you using the PHP mail() command.

The other way is more basic, you set mailto:me@myself.com as action in the HTML form, and set form encoding to "text/plain", "application/x-www-form-urlencoded" or "multipart/form-data" depending on your needs. Thsi however requires that the user has configured a mailer and clicks through to make the mailer send the eMail.

A third way, using jQuery.post to send the form to the server, is also possible, but includes extra handling which might be unnecessary.