使用＆LT提交表单;输入类型=＆rdquo;按钮＆QUOT;＆GT; [英] Submitting a form using <input type ="button">

问题描述

我有这个有点麻烦，不能看到我在做什么错。我有这样的形式：

I'm having a little trouble with this and can't see what I'm 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>

因此​​，当用户点击这个按钮就应该再提交表单有这个在PHP的形式采取​​行动（我知道SQL是不是prepared声明，很容易受到注资，不过这将在以后进行）：

So when the user clicks the button it should submit the form then have this PHP to act upon the form (I know that the sql isn't a prepared statement and is vulnerable to injections but this 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>

然而，当我检查我的表，没有信息插入到数据库中。考虑到这一点code是因此为什么我没有用行动=file.type的形式声明中同一文档全押。这是因为我不能确定AJAX是否适合在这里。

However when I check my tables, no information is inserted into the database. Bearing in mind this code is all in the same document hence why I have not used action="file.type" within the form declaration. This is because I'm unsure whether ajax is appropriate here.

任何帮助很多AP preciated，谢谢你。

Any help is much appreciated, thank you.

修改

我能做的就是使用了Ajax使用jQuery来监听按钮点击事件：

What I could 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);
           }    
    });
  });
});

这里的想法是使用这个AJAX单击该按钮时，并调用AJAX功能，但我不能确定什么作为的变量用户数据的ID以及如何在dataToSend'变量添加使其与我的形式工作。

The idea here is to use this ajax for when the button is clicked and call the ajax function but i'm unsure what to put as the ID in the variable 'userData' and what to add in the 'dataToSend' variable to make it work with my form.

推荐答案

其实对于提交表单的输入的键入的需要是提交，而不是按钮。

Actually to submit the form your input type needs to be submit, not button.

使用按钮标记也将工作。

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

除非你有一些JavaScript code这就是触发表单提交。

Unless you have some javascript code thats triggering the form submit.

action属性也是要求根据规范，但即使没有它，大多数浏览器承担操作URL是当前页面。

The action attribute is also required as per the specification, but even without it, most browsers assume the action URL to be the current page.

修改：如果您要在不重新加载页面提交表单数据，您包含为使用AJAX，或者把整个形式的<$ C $下C> IFRAME 。 （请用Ajax做代替）。

Edit: If you want to submit the form data without reloading the page, you have to use either ajax, or put the entire form under an iframe. (Please, do it with ajax instead).

否则点击输入[类型=键] 会不会真的做任何事情。

Otherwise clicking on the input[type=button] won't really do anything.

用户数据是从表单的实际数据，你可以使用捕捉它：

The user data is the actual data from your form, you could capture 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);
        }    
    });
  });
});

这篇关于使用＆LT提交表单;输入类型=＆rdquo;按钮＆QUOT;＆GT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！