Создание и хранение значения формы в базе данных

У меня есть создать форму с опцией выбора. На основе выбора я показываю и скрываю значение формы, и я не знаю, чтобы сохранить его в базе данных. В моем коде есть опция выбора, я снова показываю поле формы.например, если я выбираю опцию 3, я показываю поле формы 3 раза.

Я хочу сохранить данные в бэкэнде (базе данных). Как хранить базу данных.

Мой код

$(document).ready(function() {
  $('#hidden-div').hide();
  $("#select_btn").change(function() {
    toggleFields();
  });

});

function toggleFields() {
  var selectVal = $("#select_btn").val();
  if (selectVal <= 5) {
    $hiddenHtml = $('#hidden-div').clone().html();
    $("#refer").html('');
    for (var i = 0; i < selectVal; i++) {
      $("#refer").append($hiddenHtml);
    }
  }
}
$( "form" ).submit(function( event ) {
  console.log( $( this ).serializeArray() );
  event.preventDefault();
});
<html>
<head>
<title> Demo </title>
<meta name="robots" content="noindex, nofollow" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="referer" method="post" action="">
  <p>Name:
    <input type="text" name="referer_name" />
  </p>
  <p>Mobile:
    <input type="text" name="referer_mobile" />
  </p>
  <p>Email:
    <input type="text" name="referer_email" />
  </p>
  <p>No of Referrer:
    <select id="select_btn" >
      <option value="0">--Select--</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
    <div id="hidden-div">
 <div id="text">Referral Details</div>
      <p>Name:
        <input type="text" name="name[]" />
      </p>
      <p>Mobile:
        <input type="text" name="mobile[]" />
      </p>
      <p>Email:
        <input type="text" name="email[]" />
      </p>
      
    </div>
    <div id="refer">

    </div>
    <p align="center">
      <input type="submit" value="Submit" />
    </p>
</form>

1 ответ

  1. <html>
    <head>
    <title> Demo </title>
    <meta name="robots" content="noindex, nofollow" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <form id ="refer-form" name="refer-form" action="validate.php"  method="post" >
     
      <p>No of Referrer:
        <select id="select_btn" >
          <option value="0">--Select--</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
        <div id="hidden-div">
     <div id="text">Referrer</div>
          <p>Name:
            <input type="text" name="name[]" />
          </p>
          <p>Mobile:
            <input type="text" name="mobile[]" />
          </p>
          <p>Email:
            <input type="text" name="email[]" />
          </p>
          
        </div>
        <div id="refer">
    
        </div>
        <p align="center">
          <input type="submit" value="Submit" />
        </p>
    </form>
    <script type="text/javascript">
    $(document).ready(function() {
      $('#hidden-div').hide();
      $("#select_btn").change(function() {
        toggleFields();
      });
    
    });
    
    function toggleFields() {
      var selectVal = $("#select_btn").val();
      if (selectVal <= 5) {
        $hiddenHtml = $('#hidden-div').clone().html();
        $("#refer").html('');
        for (var i = 0; i < selectVal; i++) {
          $("#refer").append($hiddenHtml);
        }
      }
    }
    /*$( "form" ).submit(function( event ) {
      console.log( $( this ).serializeArray() );
      event.preventDefault();
    });*/
    
    </script>
    
    
    </head>
      <?php
    for($i = 0; $i < count($name); ++$i) {
    $link = mysqli_connect("localhost", "root", "", "test");
    if($link === false){
    	    die("ERROR: Could not connect. " . mysqli_connect_error());
    	}
    	// Attempt insert query execution
    	$sql = "INSERT INTO test1 (name,email,mobile) VALUES ('$name[0]','$email[$i]', '$mobile[$i]')";
    	echo "$sql";
    	if(mysqli_query($link, $sql)){
    	    echo "Records added successfully.";
    	} else{
    	    echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
    	} 
    
    	// Close connection
    	mysqli_close($link);
    	}
    ?>

    Здесь я прикрепил рабочий код для ссылки любого