如何将表单提交到数据库以及登录控制台中的ID

时间:2017-05-09 13:19:32

标签: javascript ajax

我正在尝试在引导模式中添加表单提交以及单击以打开模态到数据库的行的ID。我可以单独添加ID,我可以单独添加表单提交,但我不能在同一个数据库中组合这两个信息源。

在下面的代码中,我获得了ID(var uid),并将其记录在控制台中。

是否可以将该记录的值添加到ajax帖子中?我怎么能这样做,所以它与表格值一起发送?

$(document).ready(function () {

 $(document).on('click', '#getUser', function(e){

              e.preventDefault();

              var uid = $(this).data('id'); // get id of clicked row

                 console.log(uid);

$("#bestilform").on("submit", function(e) {

    var formURL = $(this).attr("action");
    var antal_ordre = $("antal_ordre").val();
    var navn_ordre = $("navn_ordre").val();
    var email_ordre = $("email_ordre").val();
    var telefonnummer_ordre = $("telefonnummer_ordre").val();

    $.ajax({
        url: formURL,
        type: "POST",
        data: {'id': uid, 'antal_ordre': antal_ordre, 'navn_ordre': navn_ordre, 'email_ordre': email_ordre, 'telefonnummer_ordre': telefonnummer_ordre},
        dataType: 'json'
        })



        hide modalcontant and show order
         success: function(data, textStatus, jqXHR) {

             $("#seordre").show();
             $("#afgivordre").hide();
         },
         error: function(jqXHR, status, error) {
             console.log(status + ": " + error);
         }
    });
    e.preventDefault();
});

//submit form with id #submitForm
    $("#submitForm").on('click', function() {
    $("#bestilform").submit();
 });
});


 </script>

这个data: 'id': uid只是在数据库中给了我一个0。我在我的php文件中转换为整数。

1 个答案:

答案 0 :(得分:0)

在设置它的函数外部定义var uid以及需要它的函数。使其成为两个函数的全局。 (不是最好的方法)。将参数传递给提交的函数的更好方法。在这种情况下,您将实现一致性,您的UID永远不会被定义。您的代码可能看起来像......

&#13;
&#13;
$(document).ready(function() {
	//define variable
	var uid;
  
  $(document).on('click', '#getUser', function(e) {
    e.preventDefault();
    // set it in one function
    uid = $(this).data('id'); // get id of clicked row
    console.log(uid);
    // and call another one
    $("#bestilform").submit();
  });

  $("#bestilform").on("submit", function(e) {
    var formURL = $(this).attr("action");
    var antal_ordre = $("select[name$='antal_ordre']").val();
    var navn_ordre = $("input[name$='navn_ordre']").val();
    var email_ordre = $("input[name$='email_ordre']").val();
    var telefonnummer_ordre = $("input[name$='telefonnummer_ordre']").val();
		// uid will be avaiable over here
	    $.ajax({
	      url: formURL,
	      type: "POST",
	      data: {
	        'id': uid,
	        'antal_ordre': antal_ordre,
	        'navn_ordre': navn_ordre,
	        'email_ordre': email_ordre,
	        'telefonnummer_ordre': telefonnummer_ordre
	      },
	      dataType: 'json'
	    });    
	    // something else???
	        
	    return false;
    });

  //submit form with id #submitForm
  $("#submitForm").on('click', function() {
    $("#bestilform").submit();
  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
  <td id="getUser" data-id="67">click me</td>
</tr>
</table>
<br><br>

<form method="post" action="bestil.php" data-toggle="validator" role="form" class="form-group" id="bestilform">
  <!-- antal måltider, som køber vil bestille-->
  <div class="form-group">
    <label>Antal måltider</label>
    <select class="form-control selectpicker" name="antal_ordre">
      <option value="1" selected>1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
  </div>
  <!-- navn på køber-->
  <div class="form-group">
    <label for="InputName1">Fulde Navn</label>
    <input name="navn_ordre" type="text" class="form-control" id="exampleInputName1" placeholder="Indtast dit navn">
  </div>
  <!-- email på køber-->
  <div class="form-group">
    <label for="InputEmail1">Email</label>
    <input name="email_ordre" type="email" class="form-control" id="exampleInputEmail1" placeholder="Indtast din e-mail" data-error="Hov! Det er vist ikke en email...">
    <div class="help-block with-errors"></div>
  </div>
  <!-- telefonnummer på køber-->
  <div class="form-group">
    <label for="InputPhonenumber1">Telefonnummer</label>
    <div class="input-group">
      <span class="input-group-addon">+45 </span>
      <input name="telefonnummer_ordre" data-minlength="8" type="number" class="form-control" id="exampleInputPhone1" placeholder="Indtast dit telefonnummer">
    </div>
  </div>
  <!--modal footer-->
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal" data-toggle="modal" data-target="#lavbestillingaccepter">Tilbage
    </button>
    <button type="button" class="btn btn-primary" id="submitForm" form="bestilform">Køb Måltid!
    </button>
  </div>
</form>
&#13;
&#13;
&#13;