I have a little problem with this and can't see what I am doing wrong. I have this form:
Clever Geek Handbook

Submitting a form using <input type = "button">

I have a little problem with this and can't see what I am doing wrong. I have this form:

<div class="user">

    <form name="userDetails" id="userDetails" method="post" >
        <input type="text" name="firstName" id="firstName" class="firstName"  placeholder="first name " />
        <input type="text" name="lastName" id="lastName" class="lastName"  placeholder="last name " />
        <input type="text" name="address" id="address" class="address"  placeholder="First line of Address " />
        <input type="text" name="postcode" id="postcode" class="postcode"  placeholder="Postcode " />
        <input type="text" name="email" id="email" class="email"  placeholder="E-Mail " />
        <input type="text" name="phone" id="phone" class="phone"  placeholder="Phone " />

        <input type="button" id="submitDetails" class="submitDetails" name="submitDetails" value="Submit Your Details" />

    </form>

</div>

So, when the user clicks the button, he has to submit the form, and then apply this PHP to the form (I know sql is not a prepared statement and vulnerable to injection, but that will be done later):

 <div class="overallSummary">

  <?php
    $fName = $_POST['firstName'];
    $lName = $_POST['lastName'];
    $address = $_POST['address'];
    $pc = $_POST['postcode'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];

    $userSQL = "INSERT INTO user (forename, surname, address, postcode, email, phone) VALUES ('$fName', '$lName', '$address', '$pc', '$email', '$phone')";


    $result = mysql_query($userSQL) or die(mysql_error());

   ?>
  </div>

However, when I check my tables, no information is entered into the database. Whereas this code is in the same document, so I did not use action = "file.type" in the form declaration. This is because I'm not sure if ajax is appropriate here.

Any help is greatly appreciated, thanks.

EDIT

What I can do is use ajax with jQuery to listen for the button click event:

$(document).ready(function() {
  $(".submitDetails").click(function(e) {
      e.preventDefault();
       var userData = $("#?").val();
       var dataToSend = '?=' + eNameData;

    $.ajax({                
        url: "userDetailTest.php", 
        type: "POST",
        data: dataToSend,     
        cache: false,
        success: function(php_output)
        {
         $(".overallSummary").html(php_output);
           }    
    });
  });
});

The idea here is to use this ajax to click the button and call the ajax function, but I'm not sure what to put as the id in the 'userData' variable and what to add to the dataToSend variable to make it work with my form.

+3


source to share


6 answers


Actually, to submit the form, your type input

must be submit

, not button

.

Using the tag button

will also work.

<input type="submit" id="submitDetails" class="submitDetails" name="submitDetails" value="Submit Your Details" />

Unless you have any javascript code that triggers the form submit.

The action attribute is also required by the spec, but even without it, most browsers assume the action url is the current page.



Edit . If you want to submit the form data without reloading the page, you have to use either ajax or put the whole form underneath iframe

. (Please do it with ajax).

Otherwise, clicking on will input[type=button]

do nothing.

User data is the actual data from your form, you can grab it using:

$(document).ready(function() {
  $(".submitDetails").click(function(e) {
      e.preventDefault();

    // See Teez answer, I wasn't aware of this.
    var dataToSend = $("#userDetails").serializeArray();

    $.ajax({                
        url: "userDetailTest.php", 
        type: "POST",
        data: dataToSend,     
        cache: false,
        success: function(php_output)
        {
         $(".overallSummary").html(php_output);
        }    
    });
  });
});
+4


source


Add an action to the form and use submit.

<form action="pass_data_here.php" method="post">

<input type="submit" value="Submit"/>

Also to make debugging easier you can just echo the fields first before storing them in db. This way you can play around with the data without having to navigate to the DBA table.



Edit: since you really need a button, this ajax might be helpful

$('.submitDetails').click(function(e) {
            e.preventDefault();

              var dataString =  "";
              //this will get all the data of your form separated by &
              $("form input:text").each(function(index, element) {
                    dataString += $(this).attr("id")+"="+$(this).val()+"&";
                });
            dataString = '?' + dataString; //added the needed ?

            $.ajax({                
                url: "userDetailTest.php", 
                type: "POST",
                data: dataString,     
                cache: false,
                success: function(php_output)
                {
                 $(".overallSummary").html(php_output);
                   } 
                });

            });//end submitDetails
+1


source


There are several ways:

Just use below if you don't want to refresh the page:

 var dataToSend = $('userDetails').serializeArray();

Or try below code to submit the form using jquery:

$("userDetails").submit(function(){
  // do your stuff
  $.post(
    "post.php",
    // add all stuff for inserting data 
  );

});

Below links will help you:

http://www.ryancoughlin.com/2008/11/04/use-jquery-to-submit-form/

+1


source


You have basically answered your own question. You need to put an action on the form pointing to the script that processes the form. Start with this, and if you decide to use AJAX later, you can always tweak the code a bit to do this.

0


source


You still need action. If PHP is on the same page, you can use something like:

action="<?php echo $_SERVER['PHP_SELF']"
0


source


The three previous answers need to be combined to give one answer, since you have two things missing from a workable HTML form, action and submission:

<form action="mytarget.php" method="post"/>
....add input fields...
<input type="submit" value="Submit"/>
</form>
0


source






More articles:


All Articles