Insert data to database only when form field has input - from duplicated form fields

Question

Hi there I will appreciate any help or suggestion. I do have a webform which has a section "Author". This can be duplicated up to 5 times. After duplication form ID's change. This is working example: https://jsfiddle.net/sdeg4nps/. It is easy to pass data from form when there is only one author, but how to achieve inserting authors when there is more than one author. I do have 5 sql queries which push through NULL when there is no author. I want to store only data when form is filled with authors credentials.

Simple sql:

$author = "INSERT INTO Author (AuthorTitle, F_Name, L_Name, Email, Contact) VALUES ('$AuthorTitle','$F_Name','$L_Name','$Email','$Contactauthor')";

$author2 = "INSERT INTO Author (AuthorTitle, F_Name, L_Name, Email, Contact) VALUES ('$AuthorTitle2','$F_Name2','$L_Name2','$Email2','$Contactauthor2')";

result of var_dump($_POST) is:

array(20) { ["Title"]=> string(0) "" ["Summary"]=> string(0) "" ["WhatDid"]=> string(0) "" ["Other_theme_text"]=> string(0) "" ["WhyDid"]=> string(0) "" ["WhatWell"]=> string(0) "" ["WhatDifferently"]=> string(0) "" ["Scalability"]=> string(0) "" ["FurtherInfo"]=> string(0) "" ["Location"]=> string(0) "" ["title"]=> string(0) "" ["first_name"]=> string(0) "" ["last_name"]=> string(0) "" ["email"]=> string(0) "" ["titleID2"]=> string(0) "" ["first_name_ID2"]=> string(0) "" ["last_name_ID2"]=> string(0) "" ["email_ID2"]=> string(0) "" ["engagement"]=> string(0) "" ["submit"]=> string(6) "Submit" }

I guess it will be if else or some sort of loop to check if form field has some input. But I don't know where to start.

Thank you

Possible duplicate of What's the best way to insert multiple rows into a mysql database using php? — Epodax
– Epodax, Commented Feb 12, 2016 at 10:25
Table design. If you need to have multiple authors to the same book, you need to store authors in a different table, and assign them to a stored book. eg tables would be authors, books and author_assignment — Takarii
– Takarii, Commented Feb 12, 2016 at 10:25
@Takarii Hi I do have a table just for authors, What I want to achieve is to store data for only number of authors (if 1 author 1 entry, if 2 authors 2 entries etc...) Thank you — Vlad
– Vlad, Commented Feb 12, 2016 at 10:28
aha, your question wasn't quite clear. in which case this is indeed a partial duplicate of the question above. review that answer and you should gain the insight you need — Takarii
– Takarii, Commented Feb 12, 2016 at 10:30
@Vlad are you getting the data for each and every author in your php script? or for only one author even if you have filled form for multiple authors.. — Sagar Guhe
– Sagar Guhe, Commented Feb 12, 2016 at 10:35

Sagar Guhe · Accepted Answer · 2016-02-15 05:52:22Z

Structure your form like this, which is more structured and traversable at you server side:

$(function() {
  $(document).on('click', '[name="btnAdd"]', function() {
    console.log(1111);
    $('[name="btnAdd"]').css('display', 'none');
    var num = $('.clonedInput').length, // Checks to see how many "duplicatable" input fields we currently have
      newNum = new Number(num + 1), // The numeric ID of the new input field being added, increasing by 1 each time
      newElem = $('#author' + num).clone().attr('id', 'author' + newNum).fadeIn('slow');

    newElem.find('.label1').attr('id', 'author_' + 'ID' + newNum).attr('name', 'author_' + 'ID' + newNum).html('Author' + newNum);

    // Title - select
    newElem.find('.input_title').attr('id', 'title' + 'ID' + newNum).attr('name', 'data[authors][' + newNum + '][title]').val('');

    // First name - text
    newElem.find('.input_fn').attr('id', 'first_name_' + 'ID' + newNum).attr('name', 'data[authors][' + newNum + '][first_name]').val('');

    // Last name - text
    newElem.find('.input_ln').attr('id', 'last_name_' + 'ID' + newNum).attr('name', 'data[authors][' + newNum + '][last_name]').val('');

    // Email - text
    newElem.find('.input_email').attr('id', 'email_address_' + 'ID' + newNum).attr('name', 'data[authors][' + newNum + '][email]').val('');
    $('[name="btnDel"]').css('display', 'none');
    newElem.find('[name="btnDel"]').css('display', 'inline');
    newElem.find('[name="btnDel"]').attr('id', 'btnDel' + num);

    newElem.find('[name="btnAdd"]').css('display', 'inline');
    newElem.find('[name="btnAdd"]').attr('id', 'btnAdd' + num);
    $('#author' + num).after(newElem);
    $('#ID' + newNum + '_title').focus();

    $('[name="btnAdd"]').css('display', 'none');

    // Right now you can only add 4 sections, for a total of 5. Change '5' below to the max number of sections you want to allow.
    if (newNum == 5)
      $('[name="btnAdd"]').attr('disabled', true);

    $('#btnAdd' + num).css('display', 'inline');
    // value here updates the text in the 'add' button when the limit is reached

  });

  $(document).on('click', '[name="btnDel"]', function() {
    // Confirmation dialog box. Works on all desktop browsers and iPhone.
    if (confirm("Are you sure you wish to remove this section? This cannot be undone.")) {

      var num = $('.clonedInput').index();
      var count = $('.clonedInput').length;



      // if only one element remains, disable the "remove" button
      $(this).parents('.clonedInput').remove();
      console.log(count);
      var newCount = $('.clonedInput').length;
      if (count - 1 === 1) {
        $('#btnDel').css('display', 'none');
        $('#btnAdd').css('display', 'inline')
      } else {
        $('#btnDel' + (newCount - 1)).css('display', 'inline');

      }


      $('[name="btnAdd"]').attr('disabled', false);
      $('#btnAdd' + (newCount - 1)).css('display', 'inline');


      // enable the "add" button



    }
    return false; // Removes the last section you added
  });
  // Enable the "add" button
  $('#btnAdd').attr('disabled', false);
  // Disable the "remove" button
  $('#btnDel').css('display', 'none');
});

.main {
  margin-top: 1%;
  background: #f8f8f8;
  padding: 4%;
  margin-bottom: 100px;
  /*border: 1px solid red;*/
}
.label1 {
  font-family: sans-serif;
  font-size: 13px;
  font-weight: bold;
  min-width: 96%;
  max-width: 96%;
  padding: 5px;
  /*margin: 1%;*/
  /*border: 1px solid black;*/
}
.help-block,
.help-block-title,
.help-block-fn,
.help-block-ln,
.help-block-email,
.help-block-checkbox {
  font-family: sans-serif;
  font-size: 11px;
  color: #AAA;
  min-width: 75%;
  max-width: 75%;
  padding: 5px;
  margin-top: 1px;
  margin-left: 0;
  /*margin-left: 1%;*/
  /*border: 1px solid green;*/
}
.help-block-checkbox {
  margin-top: 10px;
}
textarea {
  font-family: sans-serif;
  min-height: 100px;
  min-width: 100%;
  max-width: 100%;
  padding: 5px;
  background: #EEEEEE;
  border-radius: 4px;
  /*border-top-right-radius: 4px;*/
  border-style: inset;
  border: 1px solid #d1d1d1;
}
.singleline1 {
  /* this is used for textfield expanded when checkbox other is checked */
  font-family: sans-serif;
  position: relative;
  left: 5%;
  width: 50%;
  padding: 5px;
  background: #EEEEEE;
  border-radius: 4px;
  border-style: inset;
  border: 1px solid #d1d1d1;
}
.submit {
  position: relative;
  left: 47%;
  bottom: 30%;
}
.checkbox {
  position: relative;
  font-family: sans-serif;
  font-size: 12px;
  line-height: 2em;
  padding: 5px;
  margin-left: 15px;
  */
  /*border: 1px solid black;*/
}
.textboxstyle {
  font-family: sans-serif;
  padding: 5px;
  width: 100%;
  background: #EEEEEE;
  border-radius: 4px;
  border-style: inset;
  border: 1px solid #d1d1d1;
}
.checboxauthor {
  position: relative;
  padding-top: 11px;
  /*to be deleted*/
  width: 2%;
  height: 60px;
}
.boxtitle {
  position: relative;
  float: left;
  padding-right: 10px;
  padding-bottom: 5px;
  /*margin-right: 3px;*/
  margin: 0;
  height: 50px;
  width: 6%;
  /*border: 1px solid red;*/
}
.date {
  font-family: sans-serif;
  padding: 5px;
  width: auto;
  background: #EEEEEE;
  border-radius: 4px;
  border-style: inset;
  border: 1px solid #d1d1d1;
}
.prg-text {
  font-family: sans-serif;
  display: inline;
  /*font-size: 10px;*/
  font-weight: bolder;
}
.clonedInput + .clonedInput {
  /*border-top: 2px solid #2a2a2a;*/
  padding-top: 20px;
}
#btnAdd,
#btnDel {
  color: #fff;
  padding: 3px 18px 5px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 1px 2px rgba(000, 000, 000, 0.5), inset 0 0 0 rgba(255, 255, 255, 0.9);
  -webkit-box-shadow: 0 1px 2px rgba(000, 000, 000, 0.5), inset 0 0 0 rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 2px rgba(000, 000, 000, 0.5), inset 0 0 0 rgba(255, 255, 255, 0.9);
}

<div id="author1" class="clonedInput">
  <p id="author" name="author" class="label1">Author</p>
  <div class="row">
    <div class="col-md-1 col-sm-6 col-xs-4">
      <input id="title" name="data[authors][0][title]" type="text" placeholder="" class="input_title textboxstyle" required="">
      <p id="help-block-title" name="help-block-title" for="title" class="help-block-title">Title</p>
    </div>
    <div class="col-md-2">
      <input id="first_name" name="data[authors][0][first_name]" type="text" placeholder="" class="input_fn textboxstyle" required="">
      <p id="help-block-fn" name="help-block-fn" for="fn" class="help-block-fn">First Name</p>
    </div>
    <div class="col-md-2">
      <input id="last_name" name="data[authors][0][last_name]" type="text" placeholder="" class="input_ln textboxstyle" required="">
      <p id="help-block-ln" name="help-block-ln" for="ln" class="help-block-ln">Last Name</p>
    </div>
    <div class="col-md-2">
      <input id="email" name="data[authors][0][email]" type="email" placeholder="[email protected]" class="input_email textboxstyle" required="">
      <p id="help-block-email" name="help-block-email" for="email" class="help-block-email">Email</p>
    </div>
    <div class="col-md-1 col-sm-1 col-xs-2">
      <input id="checkbox" name="data[authors][0][contact]" type="checkbox" value="YES">
      <p id="help-block-checkbox" name="help-block-checkbox" for="checkbox" class="help-block-checkbox">Contact</p>
    </div>
    <div class="col-md-2 col-sm-2 col-xs-4">
      <button id="btnAdd" name="btnAdd" type="button" class="btn btn-info">Add author</button>
    </div>
    <div class="col-md-2 col-sm-2 col-xs-3">
      <button id="btnDel" name="btnDel" type="button" class="btn btn-danger">Remove author</button>
    </div>
  </div>
</div>

Your PHP Script

$data = $_POST['data'];
foreach($data['authors'] as $author){
    $query = "INSERT INTO Author (AuthorTitle, F_Name, L_Name, Email, Contact) VALUES ('".$author['title']."','".$author['first_name']."','".$author['last_name']."','".$author['email']."','".$author['contact']."')";
    // your other code
}

The above code should work fine... hope this will help you...

P.S.: I have not worked on the prevention of sql injections as this is a quick example, you may work on it...

Collectives™ on Stack Overflow

Insert data to database only when form field has input - from duplicated form fields

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related