Javascript 将表单组合中的数据保存到MySQL PHP数据库

我已经成功地将表单中的直接数据保存到数据库中，然后将这些数据显示在HTML页面（用户的用户名）上。但是，我正在努力保存从一系列下拉菜单生成的数据（文本）

我已成功允许用户根据他们在四个下拉菜单中选择的内容生成特定的训练计划

JavaScript代码：

<script>
jQuery(function ($) {

    var selects = $('#select-container select'),
    results = $('#results-container > div');

    selects.change(function () {
        var values = '';
        selects.each(function () {
            values += '.' + $(this).val();
        });
        results.filter(values).show().siblings().hide();
    });

});
</script>

jQuery（函数（$）{
var selects=$（“#选择容器选择”），
结果=$（“#结果容器>div”）；
选择。更改（函数（）{
var值=“”；
选择。每个（函数（）{
值+='.+$（this.val（）；
});
results.filter（values.show（）.hide（）；
});
});

HTML代码段：

    <div class="margins1">
<h2>Goal</h2>
<div id='select-container'>
<select>
<option value='none'>Select Option</option>
<option value='FatLoss'>Fat Loss</option>
<option value='LeanMuscle'>Lean Muscle</option>
<option value='SizeMass'>Size & Mass</option>
</select>
<h2>Curent Level</h2>
<select>
<option value='none'>Select Option</option>
<option value='Beginner'>Beginner</option>
<option value='Intermediate'>Intermediate</option>
<option value='Advanced'>Advanced</option>
</select>
<h2>Gym Accessibilty</h2>
<select>
<option value='none'>Select Option</option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
<h2>Days Per Week</h2>
<select>
<option value='none'>Select Option</option>
<option value='3DaySplit'>3-Day Split</option>
<option value='4DaySplit'>4-Day Split</option>
<option value='5DaySplit'>5-Day Split</option>
</select>
</div>

<div class="margins3">
<h1>Workout Plan...</h1>
<div id='results-container'>
<div class='LeanMuscle Intermediate Yes 4DaySplit'><b>Day 1: Chest & Triceps </b><br>
Dumbbell/Barbell Bench Press (3 sets, 8-12 reps)<br>
Incline Dumbbell/Barbell Bench Press (3 sets, 8-12 reps)<br>
Dumbbell/Cable Flies (3 sets, 10-15 reps)<br>
Press-ups (3 sets, until failure)
Incline Treadmill Walk (10-15 minutes, slow pace)<br>
<b>Day 2: Back & Biceps</b><br>
Dumbbell/Barbell Rows (3 sets, 8-12 reps)<br>
Pull-ups/Chin-ups (3 sets, 6-12 reps)<br>
Seated Rows (3 sets, 8-15 reps)<br>
Dumbbell/Barbell Bicep Curls (3 sets, 8-15 reps)<br>
Dumbbell Hammer Curls (3 sets, 8-15 reps)<br>
<b>Day 3: Legs</b><br>
Barbell Squats (3 sets, 8-15 reps<br>
Leg Press Machine (3 sets, 8-15 reps)<br>
Leg Extension Machine (3 sets, 8-15 reps)<br>
Leg Curl Machine (3 sets, 8-15 reps)<br>
Calf Raises (3 sets, 8-20 reps)<br>
<b>Day 4: Shoulders & Trapezius</b><br>
Dumbbell/Barbell Shoulder Press (3 sets, 8-12 reps)<br>
Barbell Shrugs (3 sets, 6-12 reps)<br>
Dumbbell Rear Delt Flies (3 sets, 8-15 reps)<br>
Barbell Upright Rows (3 sets, 6-12 reps)<br>
Incline Treadmill Walk (10-15 minutes, slow pace)
    </div>
    </div>
</div>

目标
选择选项
脂肪损失
瘦肌肉
尺寸和质量
电流电平
选择选项
初学者
中间的
先进的
健身房可达性
选择选项
对
不
每周天数
选择选项
三日分割
4天分割
五日分割
训练计划。。。
第1天：胸部和三头肌

哑铃/杠铃卧推（3套，8-12次）

倾斜哑铃/杠铃台压（3套，8-12次）

哑铃/电缆飞片（3套，10-15次）

按下ups（3套，直至故障）
倾斜跑步机行走（10-15分钟，慢配）

第2天：背部和二头肌

哑铃/杠铃排（3组，8-12次）

引体向上/引体向上（3组，6-12次）

坐成一排（3组，8-15次重复）

哑铃/杠铃二头肌卷发（3组，8-15次）

哑铃锤卷发（3组，8-15次）

第3天：腿

杠铃下蹲（3组，8-15次

压腿机（3套，8-15次）

伸腿机（3套，8-15次）

卷腿机（3套，8-15次）

小腿抬高（3组，8-20次）

第4天：肩部和斜方肌

哑铃/杠铃肩部按压（3组，8-12次）

杠铃耸耸肩（3组，6-12次）

哑铃后三角飞（3组，8-15次）

杠铃直排（3组，6-12次重复）

倾斜跑步机行走（10-15分钟，慢配）

编辑：用于注册的PHP代码

    <?php

define('DB_HOST', 'localhost');
define('DB_NAME', 'test');
define('DB_USER','root');
define('DB_PASSWORD','root');

$con=mysql_connect(DB_HOST,DB_USER,DB_PASSWORD) or die("Failed to connect to MySQL: " . mysql_error());
$db=mysql_select_db(DB_NAME,$con) or die("Failed to connect to MySQL: " . mysql_error());

function NewUser()
{   
$username = $_POST['username'];
$password =  $_POST['password'];
$query = "INSERT INTO members (username,password) VALUES ('$username','$password')";
$data = mysql_query ($query)or die(mysql_error());
if($data)
{
 header("Location: Correct.php");
}
}

function SignUp()
{
  if(!empty($_POST['username'])&&!empty($_POST['password']))
  {
    $query = mysql_query("SELECT username FROM members WHERE username = '$_POST[username]'") or die(mysql_error());
    $num_rows = mysql_num_rows($query);
    if($num_rows==0) 
    {
      NewUser();
    }
    else
    {
     header("Location: UsernameExisting.html");
   }
 }
 if(empty($_POST['username']))
 {
   header("Location: MissingUsername.html");
 }
 if(empty($_POST['password']))
 {
   header("Location: MissingPassword.html");
 }
 if (empty($_POST['username'])&&empty($_POST['password'])){
  header("Location: MissingDetails.html");
}
}
if(isset($_POST['submit']))
{
  SignUp();
}
?>

---

您的选择标记没有名称属性。需要名称属性才能将数据发送到服务器

阅读一些html表单。
您也可以使用JSON提交它

更改HTML代码，使ID与所有select标记关联

然后你可以用JSON转换它，如下所示

        jQuery(function ($) {

var selects = $('#select-container select'),
results = $('#results-container > div');

selects.change(function () {


    var values = '';
    selects.each(function () {
        alert($(this).val());
        values += '.' + $(this).val();
    });


        var values = '{
        "goal" : $("#goal").val(),
        "current_level" : $("#current_level").val(),
        "gym_a" : $("#gym_a").val(),
        "days_P_W" : $("#days_P_W").val(),
        }';

var finalValue = eval('(' + values + ')');

});

}))

在这里，目标、当前水平、健身房等是您选择的标记的id。
您可以发布php代码将数据插入数据库吗？在
values+='.+$（this.val（）
您需要更改此选项，以便在过滤器中应用
。。。因此它将变成
values+=$（this）.val（）+''和筛选行将是
results.filter（'.'+values）.show（）.sibbines（）.hide（）
这将解决您遇到的JS问题，PHP方面要复杂得多。抱歉，我已经编辑了这篇文章并添加了一些PHP脚本。谢谢您的时间@pramod.nikam.dev。所以首先我需要像这样给标签分配ID？然后我就可以把这些变量传给数据库，对吗？此外，var最终价值实现了什么？不确定我是否理解这一部分。是的，在服务器端解析json，然后将其传递给db。eval只是正确json结构的变体[link]非常感谢您的时间！原谅我，但你说的不礼貌是什么意思？剩下的似乎是合乎逻辑的。谢谢你，我会在接下来的几天里尝试一下，让你知道我的进展。非常感谢您的支持。