PHP multiple forms and Ajax
Question
I've put together a little script that works fine in general, it just needs a minor fix and some Ajax code. Basically, it appends a couple of forms to each output line. Submission works properly, 2 POSTS and 1 GET. But I'd like it to happen without a page refresh, ergo the Ajax code. I've tried messing around with some but the multiple variables are making it a nightmare. Here's the full code, first the main page:
<html>
<head>
<title></title>
</head>
<body>
<?php
$lines = file('file.txt');
foreach ($lines as $line) {
$field = explode("|", $line);
$name = $field[0];
$id = $field[4];
echo $name . '<br>';?>
<form method="post" action="submit-here.php?id=<?php echo $id;?>">
<select name="FORM1" size="3">
<option value="Value-1">Value-1</option>
<option value="Value-2">Value-2</option>
<option value="Value-3">Value-3</option></select>
<select name="FORM2" size="3">
<option value="Value-4">Value-4</option>
<option value="Value-5">Value-5</option>
<option value="Value-6">Value-6</option></select>
<br><br><input type="submit" value="submit" name="submit">
</form>
<?php
}
?>
</body>
</html>
file.txt is just your usual DSV flat file ie field1|field2|field3|field4\\n
Which brings me to the required minor fix I mentioned, namely the line break at the end of each row generates a pair of "phantom" forms after every legitimate form pair, add more line breaks and get more ghost code, I tried using preg_replace and if...else to filter them out but without success.
submit-here.php:
$id = $_GET["id"];
$FORM1 = $_POST["FORM1"];
$FORM2 = $_POST["FORM2"];
$write = $id . '|' . $FORM1 . '|' . $FORM2 . "\n";
$fn = "file2.txt";
$fh = fopen($fn, 'a');
fwrite($fh, $write);
fclose($fh);
1 answers
solution1
0 ACCPTED 2010-08-14 23:11:02
Multiple Forms Part:
This works for me:
<html>
<head>
<title></title>
</head>
<body>
<?php
$lines = file('test.txt');
$count=0;
foreach ($lines as $line) {
$field = explode("|", $line);
if (count($field) > 2) {
//only print the form if there is real data
print_form($field, $count);
$count++;
}
}
?>
</body>
</html>
<?php
function print_form($field, $num) {
$name = $field[0];
$id = $field[4];
echo $name . '<br>';?>
<form method="post" action="submit-here.php">
<input type="hidden" id="id_<?=$num?>" value="<?php echo $id;?>">
<select id="sel1_<?=$num?>" name="FORM1" size="3">
<option value="Value-1">Value-1</option>
<option value="Value-2">Value-2</option>
<option value="Value-3">Value-3</option></select>
<select id="sel2_<?=$num?>" name="FORM2" size="3">
<option value="Value-4">Value-4</option>
<option value="Value-5">Value-5</option>
<option value="Value-6">Value-6</option></select>
<br><br>
<input type="button" value="submit" name="submit" onClick="submitForm(<?=$num?>);">
</form>
<?php
}
AJAX Part
In your html head, add the following script block:
<script language="JavaScript" type="text/JavaScript">
<!--
function submitForm(num) {
//issue AJAX request
var data = "FORM1="+document.getElementById("sel1_"+num);
data = data+"&FORM2="+docucument.getElementById("sel2_"+num);
data = data+"&id="+document.getElementByID("id_"+num);
var request = getXmlHttpObject();
request.onreadystatechange =
function() { if(request.readyState == 4 && request.status == 200)
alert("Form received."); };
request.open("POST", "submit-here.php", true);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
request.send(data);
}
function getXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
//-->
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.