Вызов Javascript из формы с использованием Onsubmit

Я новичок в PHP и AJAX, и у меня проблемы, и я не знаю, как его решить. Я создаю эту страницу, на которой показан набор записей, полученный в результате запроса. Есть 2 страницы: getdata.php и phpajax.php. phpajax.php вызывает getdata.php через Javascript.Вызов Javascript из формы с использованием Onsubmit

То, что я сделал:

мне удалось заставить его работать, используя кнопку "Попробуй" (используя статическое значение)

Что я хочу:

Как для правильного отображения данных с помощью кнопки «Отправить» на один клик (ATM данные появляются на пару секунд после того, как я дважды нажимаю «Отправить», а затем исчезает, потому что страница внезапно обновляется)?
Как передать значение SELECT и TEXT в fshowdata() с помощью кнопки отправки?
Как передать значение SELECT и TEXT в fshowdata() с помощью кнопки «Попробовать»?

Вот для phpajax.php:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 

    <html> 
    <head> 
    <script> 

    function fshowdata(str1,date1) { 
    //alert("The form was submitted"); 
    if (str == "") { 
     document.getElementById("txtHint").innerHTML = ""; 
     return; 
    } else { 
     if (window.XMLHttpRequest) { 
      // code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp = new XMLHttpRequest(); 
     } else { 
     // code for IE6, IE5 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      document.getElementById("txtHint").innerHTML =  xmlhttp.responseText; 
     } 
    } 
    //document.getElementById("demo").innerHTML = str1 + " " + date1; 
    xmlhttp.open("GET","getdata.php?q="+str1+"&"+"t="+date1,true); 

    xmlhttp.send(); 
} 
} 
</script> 

<style> 
table { 
width: 100%; 
border-collapse: collapse; 
} 

table, td, th { 
border: 1px solid black; 
padding: 5px; 
} 

th {text-align: left;} 
</style> 
</head> 
<body> 

<p id="demo">Click the button to change the text in this paragraph.</p> 

<?php 


$con = mysql_connect('localhost','root','123'); 
if (!$con) { 
die('Could not connect: ' . mysql_error()); 
} 

mysql_select_db('mydb')or die('Could not select database'); 
$sql="SELECT DISTINCT(rides) FROM t_trx ORDER BY rides "; 
$result = mysql_query($sql) or die('Query failed: ' . mysql_error()); 



echo "<form onsubmit='"."fshowdata(`some rides`,`a date`)"."' action='".""."'>"; 
echo "Choose Rides : "." "."<select id='"."rides"."' name='"."rides"."'>"; 
echo "<option value='"."ALL"."'>ALL</option>"; 
while($row = mysql_fetch_array($result)) { 
echo "<option value='".$row["rides"]."'>".$row["rides"]."</option>"; 
} 
mysql_free_result($result); 
echo "</select>"; 
mysql_close($con); 

echo "<input id='"."date2"."' type='"."TEXT"."' name = '"."date2"."'>"; 
echo "<input id='"."button1"."' type='"."SUBMIT"."' value = '"."SUBMIT"."'>"; 
echo "</form>"; 


echo "<button onclick='"."fshowdata(`ROLLER COASTER`,`18/07/2015`)"."'>"; 
echo "Try it"; 
echo "</button>"; 

?> 
<br> 
<div id="txtHint"><b>Data will be shown here...</b></div> 

</body> 
</html>

И для getdata.php:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
table { 
width: 100%; 
border-collapse: collapse; 
} 

table, td, th { 
border: 1px solid black; 
padding: 5px; 
} 

th {text-align: left;} 
</style> 
</head> 
<body> 

<?php 
$q = $_GET['q']; 
echo $q; 
$date_ = $_GET['t']; 
echo $date_; 
$con = mysql_connect('localhost','root','123'); 
if (!$con) { 
die('Could not connect: ' . mysql_error()); 
} 

mysql_select_db('mydb')or die('Could not select database'); 

$sql="SELECT * FROM t_trx WHERE rides = '".$q."' AND date1 = '".$date_."'  LIMIT 10"; 
echo $sql; 
$result = mysql_query($sql) or die('Query failed: ' . mysql_error()); 

echo "<table> 
<tr> 
<th>Rides</th> 
<th>Number</th> 
<th>Date</th> 
</tr>"; 
while($row = mysql_fetch_array($result)) { 
echo "<tr>"; 
echo "<td>" . $row['Rides'] . "</td>"; 
echo "<td>" . $row['Number'] . "</td>"; 
echo "<td>" . $row['Date'] . "</td>"; 
echo "</tr>"; 
} 
echo "</table>"; 
mysql_close($con); 
?> 
</body> 
</html>

Спасибо, ребята. Я ценю вашу помощь ...

источник

2015-07-31 PAdjee

ваша страница обновляется, потому что поведение отправки не перехвачено вашим кодом js. Поэтому javascript отправляет данные, но ваш браузер также отправляет страницу, как если бы это была классическая форма. вы могли бы использовать jQuery, это упростило бы для вас. Есть много примеров онлайн о том, как сделать ajax-вызовы с помощью jQuery. – Hakim

Thx Hakim. У вас есть несколько образцов об этом? – PAdjee

использовать ниже код, чтобы пропустить обновления страницы

onsubmit="return fshowdata(`some rides`,`a date`)"

в fshowdata функции, вы должны вернуть ложь.

источник

2015-07-31 09:09:40 selvan

Я попробовал, и он не работал. страница продолжает освежать ... – PAdjee

извините! вы должны вернуть false; – selvan

yup. он работает .. thx @selvan. Как передать значение формы в fshowdata()? – PAdjee

Вызов Javascript из формы с использованием Onsubmit

ответ

Смежные вопросы