[RESOLVED] Using javascript to submit a form

[chris1990]

I've made an instant quote calculator where you can book online. I have used a number of div elements with text fields because there's a lot of information to collect when booking. When the user has finished filling it in and clicks submit, i use javascript to fill in the form below. As the user clicks submit within one of my div elements and not the button on the form, i need to use javascript to 'click' submit. I did some searching on the web and found this ' document.forms["MyForm"].submit() ', but when using the code i get an error 'object does not support this property or method'.

Thanks in advance, Chris1990

My javascript code:

function SendEmail() {
    BookingTitleName = document.getElementById('TitleName').value
    BookingFirstName = document.getElementById('FirstName').value
    BookingLastName = document.getElementById('LastName').value
    BookingEmail = document.getElementById('EmailAddress').value
    BookingPhone = document.getElementById('MobilePhone').value
	
	document.getElementById('post_fullname').value = BookingTitleName + " " + BookingFirstName + " " + BookingLastName;
	document.getElementById('post_email').value = BookingEmail;
	document.getElementById('post_phone').value = BookingPhone;
	document.forms["onlinebooking"].submit();
	}

My form:

  <form action="processor.php" enctype="multipart/form-data" method="post" name=
    "onlinebooking" id="onlinebooking" >

            <input id="post_fullname" name="post_fullname" type=
            "text" maxlength="255" value="" />
            
            <input id="post_email" name="post_fullname" type=
            "text" maxlength="255" value="" />
            
            <input id="post_phone" name="post_fullname" type=
            "text" maxlength="255" value="" />
            
            <textarea id="post_fulladdress" name="post_fulladdress"></textarea>
            
            <input id="post_fullname" name="post_fulldate" type=
            "text" maxlength="255" value="" />
            
            <input id="post_fullname" name="post_fulltime" type=
            "text" maxlength="255" value="" />
            
            <input id="post_fullname" name="post_fullstart" type=
            "text" maxlength="255" value="" />
            
            <input id="post_fullname" name="post_fulldestination" type=
            "text" maxlength="255" value="" />
            
            <input id="post_fullname" name="post_vehicletype" type=
            "text" maxlength="255" value="" />
            
            <input id="post_fullname" name="post_fullpassengers" type=
            "text" maxlength="255" value="" />
            
            <input id="post_fullname" name="post_flightno" type=
            "text" maxlength="255" value="" />
            
            <input id="post_fullname" name="post_specialreq" type=
            "text" maxlength="255" value="" />
            
            <input id="post_fullname" name="post_distance" type=
            "text" maxlength="255" value="" />
            
            <input id="post_fullname" name="post_fare" type=
            "text" maxlength="255" value="" />
            
            <input type="hidden" name="form_id" value="onlinebooking" />
            
            <input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />

    </form>

[SambaNeko]

What you've posted is insufficient. The SendEmail() function needs to be called somewhere; it will not be called implicitly. There are no elements with ID "TitleName", "FirstName", "LastName", "EmailAddress" or "MobilePhone". And I don't see any reason in your markup for why you must use form submission via Javascript.

[chris1990]

Sorry, I thought i had provided enough code. Heres a link to a live page. If you need the links to my .js pages let me know and ill post them.

[chris1990]

I've been through my code over and over again, corrected a few mistypes and tested it all. Everything works as it should except this one line of code:

document.forms["onlinebooking"].submit();

also i just tried testing the submit button on the form and all i get is a blank page ??, any suggestions

[SambaNeko]

document.forms is not an associative array; you must use numeric keys to access its data:

document.forms[0].submit(); //this will submit the first form on the page

Or you could use getElementById(), which is more predictable in that it will always get the form with the specified ID:

document.getElementById("onlinebooking").submit();

As for why you're getting a blank page after submitting, you would need to show your code for the processor.php page that the form gets submitted to.

Edit for correction: document.forms can access elements by their id attribute in an associative fashion; the other methods presented for accessing the form element are still valid though.

[chris1990]

I've tried both of sets of code above, and they still show the same error.

Heres the php code for my proccessor:

I think the white page is because the errors are disabled on my server, using my xammp server the error im getting is
"Warning: mail() [function.mail]: "sendmail_from" not set in php.ini or custom "From:" header missing in C:\xampp\htdocs\calc\processor.php on line 9 "

<?php

$where_form_is="http://".$_SERVER['SERVER_NAME'].strrev(strstr(strrev($_SERVER['PHP_SELF']),"/"));

mail("[email protected]","Car 2000 Heywood : Online Booking","From: [email protected]","

<table width='600' border='0' cellspacing='0' cellpadding='0'>
  <tr>
    <td width='163'><strong>Contact Info</strong></td>
    <td width='437'>&nbsp;</td>
  </tr>
  <tr>
    <td>Name</td>
    <td>" . $_POST['post_fullname'] . "</td>
  </tr>
  <tr>
    <td>Email</td>
    <td>" . $_POST['post_email'] . "</td>
  </tr>
  <tr>
    <td>Phone</td>
    <td>" . $_POST['post_phone'] . "</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><strong>Journey Info</strong></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Pick-up Address</td>
    <td>" . $_POST['post_fulladdress'] . "</td>
  </tr>
  <tr>
    <td>Pick-up Date</td>
    <td>" . $_POST['post_fulldate'] . "</td>
  </tr>
  <tr>
    <td>Pick-up Time</td>
    <td>" . $_POST['post_fulltime'] . "</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Start</td>
    <td>" . $_POST['post_fullstart'] . "</td>
  </tr>
  <tr>
    <td>Destination</td>
    <td>" . $_POST['post_fulldestination'] . "</td>
  </tr>
  <tr>
    <td>Vehicle Type</td>
    <td>" . $_POST['post_vehicletype'] . "</td>
  </tr>
  <tr>
    <td>No of Passengers</td>
    <td>" . $_POST['post_fullpassengers'] . "</td>
  </tr>
  <tr>
    <td>Flight No</td>
    <td>" . $_POST['post_flightno'] . "</td>
  </tr>
  <tr>
    <td>Special Requirements</td>
    <td>" . $_POST['post_specialreq'] . "</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Distance</td>
    <td>" . $_POST['post_distance'] . "</td>
  </tr>
  <tr>
    <td>Fare</td>
    <td>" . $_POST['post_fare'] . "</td>
  </tr>
</table>
 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


 Eagle Car 2000 Heywood : Online Booking.
");

include("confirm.html");

?>

[SambaNeko]

Correcting myself from my last post, you should be able to use this code for form submission:

document.forms["onlinebooking"].submit();

However your problem seems to be that your form submission button is named "submit". So when Javascript sees "document.forms["onlinebooking"].submit", it tries to access your button rather than a method and complains "this is not a function." Simple solution is to rename the button that you've named "submit."

As for the PHP, your mail() function has the arguments in the wrong order, for one thing. The third argument should be the email body, and the fourth should be headers - you have these mixed up.

[chris1990]

Thanks for your help, got it all working now.