将可变数据从Javascript传递到PHP文件

时间:2017-10-06 04:37:22

标签: javascript php

有没有办法让我提交收集的数据并使用javascript传递给变量到php页面。 我有一个表单,其中包含发布到php文件的输入字段我正在使用jquery函数来序列化表单数据并在php中处理它。然而,除了来自输入字段的表单数据,我想发送我收集并存储在javascript变量中的数据,并将其选择为php变量,以便我可以运行for循环。



<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>New User Registration</title>
</head>

<body>
	<div id="newUserHld">
		<table id="newUserFrmTbl">
			<form id="newUserFrm">
				<tr>
					<td><label id="firstnameLbl">First Name</label></td>
					<td><input type="text" id="firstname" size="20" /></td>
				</tr>
				<tr>
					<td><label id="lastnameLbl">Last Name</label></td>
					<td><input type="text" id="lastname" size="20" /></td>
				</tr>
				<tr>
					<td><label id="dobLbl">Date of Birth</label></td>
					<td><input type="text" id="dob" size="8" /></td>
				</tr>
				<tr>
					<td><label id="positionLbl">Position</label></td>
					<td>
						<select size="1">
							<option>Select Option</option>
							<option> WFXM </option>
							<option>Operations Manager</option>
							<option>Assistant</option>
						
						</select>
					</td>
				</tr>
				<tr>
					<td><label id="usernameLbl">Username</label></td>
					<td><input type="text" id="username" size="20" /></td>
				</tr>
				<tr>
					<td><label id="passwordLbl">Password</label></td>
					<td><input type="password" id="password" size="20" /></td>
				</tr>
				<tr>
					<td><label id="payRateLbl">Pay Rate</label></td>
					<td><input type="text" id="payRate" size="20" /></td>
				</tr>
				<tr><td><input type="submit" id="createUsr"	name="createUsr" value="Create User" />	</td>	
			</form>
		</table>
	</div>
	<div id="success">
	</div>
	<button type="button" onclick="getFrmElm()">Try it</button>
</body>
	<script>
		function getFrmElm (){
			var x = document.getElementById("newUserFrm");
			var txt = "";
			var i;
			for (i = 0; i < x.length; i++) {
    		txt = txt + x.elements[i].id + "<br>";
}
		formSubmit();
		
		}
		
		
function formSubmit(){
			$.ajax({
				type:'POST',
				url:'userreg.php',
				data:$('#newUserFrm').serialize(),
				success:function(response){
					$('#success').html(response);
				}
				});
			
	
			 
			return false;
		}

	 
	</script>
</html>




PHP FROM userreg




<?php
include_once "iud.php";
$db = connectDatabase();
        $formfields = test_input($_POST['txt'];
		$firstname=test_input($_POST['firstname']);
		$lastname=test_input($_POST['lastname']);
		
		
		
		$sql="INSERT INTO contacts(firstname, lastname) ";
		$sql .= "values (";
		$sql .= "'".$firstname."', '".$lastname."'";
		$sql .= ")";
		if(mysqli_query($db, $sql)){
			echo "Record Inserted";
			}else{
			echo "Insert failed";	
			}

	mysqli_close($db);

	function test_input($data){
		
	$data=trim($data);
	$data=stripslashes($data);
	$data=htmlspecialchars($data);
	return $data;	
	}



?>
&#13;
&#13;
&#13;

基本上我想从表单中发送数据,但也要从VAR txt发送数据。

2 个答案:

答案 0 :(得分:0)

修改您的ajax以包含数据密钥。 目前没有钥匙。

$.ajax({
    type:'POST',
    url:'userreg.php',
    data: {
        firstName: $("#firstName").val(),
        lastName: $("#lastName").val(),
        // ... and so on until all the form element in here - then your PHP will work
    },
    success:function(response){
        $('#success').html(response);
    }
});

答案 1 :(得分:0)

enter image description here输入字段中缺少的名称属性,如果用户ajax需要在标头中链接jquery库文件。下面的代码有助于使用ajax发布您的表单数据。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>New User Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
    <div id="newUserHld">
        <table id="newUserFrmTbl">
            <form id="newUserFrm" method="POST" >
                <tr>
                    <td><label id="firstnameLbl">First Name</label></td>
                    <td><input type="text" id="firstname" size="20" name="firstname" /></td>
                </tr>
                <tr>
                    <td><label id="lastnameLbl">Last Name</label></td>
                    <td><input type="text" id="lastname" size="20" name="lastname" /></td>
                </tr>
                <tr>
                    <td><label id="dobLbl">Date of Birth</label></td>
                    <td><input type="text" id="dob" size="8" name="dob" /></td>
                </tr>
                <tr>
                    <td><label id="positionLbl">Position</label></td>
                    <td>
                        <select size="1" name="positionLbl">
                            <option>Select Option</option>
                            <option> WFXM </option>
                            <option>Operations Manager</option>
                            <option>Assistant</option>

                        </select>
                    </td>
                </tr>
                <tr>
                    <td><label id="usernameLbl">Username</label></td>
                    <td><input type="text" id="username" size="20" name="username" /></td>
                </tr>
                <tr>
                    <td><label id="passwordLbl">Password</label></td>
                    <td><input type="password" id="password" size="20"  name="password" /></td>
                </tr>
                <tr>
                    <td><label id="payRateLbl">Pay Rate</label></td>
                    <td><input type="text" id="payRate" size="20"  name="payRate" /></td>
                </tr>
                <tr><td><input type="submit" id="createUsr" name="createUsr" value="Create User"  onclick="formSubmit(); return false;" />  </td>   
            </form>
        </table>
    </div>
    <div id="success">
    </div>
</body>
    <script>

function formSubmit(){
    alert($('#newUserFrm').serialize());
            $.ajax({
                type:'POST',
                url:'userreg.php',
                data:$('#newUserFrm').serialize(),
                    success:function(response){
                        $('#success').html(response);
                    }
                });



            return false;
        }


    </script>
</html>

和php文件来检查响应。

<?php 
print_r($_POST);
exit;
?>