i wanna learn how to search something from database, and it's work, here the code
<fieldset>
<form action="" method="POST">
By Round Id : <input id="input-round" type="text" name="name" size="15"/><br/><br/>
By Player Id : <input id="input-player-id" type="text" name="player" size="15"/><br/><br/>
<input id="btn-form-close" type="button" value="Cancel" />
</form>
<script type="text/javascript">
$("#btn-form-close").click(function(){
$('#view-form').html('');
});
$('#input-round').keyup(function(){
var name = $('#input-round').val();
$.ajax({
type:"POST",
url:"<?php echo site_url('account/look_search_history_round');?>",
data:'nama='+name,
success:function(html){
$('#view-list-round-id').html(html);
}
});
});
$('#input-player-id').keyup(function(){
var player = $('#input-player-id').val();
$.ajax({
type:"POST",
url:"<?php echo site_url('account/look_search_history_player');?>",
data:'nama='+player,
success:function(html){
$('#view-list-round-id').html(html);
}
});
});
but i wanna create something like option can be selected, so i can selected search By Round Id or By player Id. but i don't have any idea how to accomplish that. what i get is select that option
<select class="form-control" id="sel1">
<option> By Round Id </option>
<option> By Player Id</option>
</select>
but what about input? can someone give me example, thanks a lot
First you may want to include in the form:
<form action="" method="POST">
Search by
<select class="form-control" id="sel1">
<option id="roundId"> By Round Id </option>
<option id="playerId"> By Player Id</option>
</select>
Id : <input id="input-round" type="text" name="name" size="15"/><br/><br/>
<input id="btn-form-close" type="button" value="Cancel" />
</form>
then send the selected option to backend to process
$('#input-round').keyup(function(){
var name = $('#input-round').val();
var choice = $('#sel1 option:selected').val()
$.ajax({
type:"POST",
url:"<?php echo site_url('account/look_search_history_round');?>",
data:'nama='+name+'&choice='+choice, //process this choice in backend..
success:function(html){
$('#view-list-round-id').html(html);
}
});
});
you have not given value for option
change it like this
<select class="form-control" id="sel1">
<option value="1" data-id="2"> By Round Id </option>
<option value="2" data-id="1"> By Player Id</option>
<option value="3" data-id="2"> By Round Id </option>
</select>
and the jquery function
$('#sel1').change(function(){
var player = $(this).val();
var PR_id = $(this).find(':selected').attr('data-id');
if(PR_id == 1)
{
$.ajax({
type:"POST",
url:"<?php echo site_url('account/look_search_history_player');?>",
data:'nama='+player,
success:function(html){
$('#view-list-round-id').html(html);
}
});
}
else if(PR_id ==2)
{
//next ajax call
}
});
thanks all now i get it, here the code i want it
<form action="" method="POST">
Search by
<select class="form-control" id="select">
<option id="roundId"> Rounds Id</option>
<option id="playerId"> Player Id</option>
</select>
: <input id="input" type="text" name="input" size="15"/><br/><br/>
<input id="submit" type="button" value="Search" />
</form>
jquery function like this
<script type="text/javascript">
$("#btn-form-close").click(function(){
$('#view-form').html('');
});
$("#submit").click(function(){
var data = {
'select' : $("#select").val(),
'input' : $("#input").val(),
};
//alert ($("#input").val());
$.ajax({
type:"POST",
url:"<?php echo site_url('account/look_search_history');?>",
data:data,
success:function(html){
$('#view-list-round-id').html(html);
}
});
});
</script>
and about controller is here
public function look_search_history(){
if($_POST['input']){
$select = $_POST['select'];
$input = $_POST['input'];
if ($select == "Rounds Id"){
$data['tbl_bet_spot'] = $this->login_model->select_by_round($input)->result();
$this->load->view('roulette/view_search_history', $data);
}else if ($select == "Player Id"){
$data['tbl_bet_spot'] = $this->login_model->select_by_player($input)->result();
$this->load->view('roulette/view_search_history', $data);
}
}
}
Related
I have form with 2 inputs, country name and country rating (0-5) and submit button to add country. When button is clicked it executes addCountry function.
I always get an error as message and I don't know why $_POST['country'] and $_POST['ratings'] are not showing.
Function looks like this:
<script>
function addCountry(){
var $country="country";
var $ratings="ratings";
$.ajax({
type:"POST",
url:"../actions/addCountry.php",
data:{ $country: "country", $ratings: "ratings" },
success:function(result){
alert(result);
}
});
}
</script>
Php script should get country name and rating, it looks like this:
<?php
if(isset($_POST['country']) &&
isset($_POST['ratings'])){
$country= $_POST['country'];
$ratings = $_POST['ratings'];
echo $country;
echo "is country. You rated it: ";
echo $ratings;
}
else{
echo "Error";
}
?>
Html looks like this:
<head>
<link rel="stylesheet" href="../styles/styles.css">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript"src= "../actions/mapData.php"></script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery
3.1.1.min.js"></script>
</head>
<body>
<div id="map" style="width: 90%; height: 20%;"></div>
</body>
<body>
<form autocomplete="off" method="POST">
<div class="autocomplete" style="width:100%;">
<input id="country" type="text" name="country" placeholder="Country">
<label for="ratings"> Rate this country: </label>
<select id="ratings" name="ratings">
<option value="one"> 1 </option>
<option value="two"> 2 </option>
<option value="three"> 3 </option>
<option value="four"> 4 </option>
<option value="five"> 5 </option>
</select>
</div>
<input type="submit" id="add" value="Add Country" onclick="addCountry()"/>
</form>
The problem is with your script.
<script>
function addCountry(){
var $country="country";
var $ratings="ratings";
$.ajax({
type:"POST",
url:"../actions/addCountry.php",
data:{ country: $country, ratings: $ratings },
success:function(result){
alert(result);
}
});
}
</script>
The data passed to the page is in the form name : value and you were giving it wrongly.
I have a webpage where I have a user enter in a search and when they enter the search I want data returned by my PHP script to be displayed as a table below the search area. My AJAX call successfully calls my PHP script which retrieves the data successfully. However the HTML elements/data aren't displayed. What is the proper way to generate HTML elements? Is the correct approach to have a PHP script generate them or is it possible to pass the results into some JavaScript function which creates the elements instead?
$sql = "SELECT supplierName, about FROM suppliers";
if ($res = mysqli_query($myConnection, $sql)) {
if (mysqli_num_rows($res) > 0) {
echo "<table>";
while ($row = mysqli_fetch_array($res)) {
//error_log('row');
echo "<tr>";
echo "<td>".$row['supplierName']."</td>";
echo "<td>".$row['about']."</td>";
echo "</tr>";
}
}
echo "</table>";
}
mysqli_close($myConnection);
The commented out error_log outputs the expected amount.
Rough HTML code
<head>
<meta charset="utf-8">
</head>
<body>
<main>
<div id="searchQuery">
<form>
<form action="" method="post" id="form">
<fieldset>
<table>
<tr>
<td>
Food Type*:
<select name = "type" id = "type" style="width:100%">
<option value="Meat">Meat</option>
<option value="Produce">Produce</option>
<option value="Dairy">Dairy</option>
<option value="Grain">Grain</option>
</select>
</td>
<td>
Price: <br>
<select name = "price" id = "price" style="width:100%">
<option value="none">None</option>
<option value="Low to High">Low to High</option>
<option value="High to Low">High to Low</option>
</select>
</td>
</tr>
<tr>
<td>
Food Grade*:
<select name="grade" id="grade" style="width:100%">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="F">F</option>
</select>
</td>
<td>
Organic:
<select name="organic" id="organic" style="width:100%">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
<tr>
<td>
Supplier Name: <br>
<input type="text" name="name" id="name" style="width:95%">
</td>
<td>
<button type="submit" id = "submit" class="button1" form="form" value="Submit" name="submit" style="width:50%">Submit</button>
</td>
</tr>
</table>
</form>
</fieldset>
</form>
</div>
//data displays here <-
</main>
</body>
</html>
Edit: here is the ajax call/form code
'''
$(function() {
$(".button1").click(function() {
var type = $("select#type").val();
var grade = $("select#grade").val();
var organic = $("select#organic").val();
var price = $("select#price").val();
var name = $("input#name").val();
var submit = $("button#submit").val();
$.ajax({
type: "POST",
url: "searchQuery.php",
data: {submit:submit, type: type, grade:grade, organic:organic, price: price, name: name},
success: function() {
console.log('query submitted');
}
});
To anwser your first question: the elements aren't displayed because they occur in an "Asynchronous JavaScript And XML" call (AJAX) which happens outside your page and the only thing you are doing after calling it is:
console.log('query submitted');
you need to somehow send the information back to your page and the way most easy to mantain would be to use PHP to return a JSON (or XML if that's your thing) with something like this:
PHP :
if (mysqli_num_rows($res) > 0) {
$table= array();
while ($row = mysqli_fetch_array($res)) {
array_push($table,array(
'supplierName'=>$row['supplierName'],
'about'=>$row['about']
));
}
echo json_encode($table)
}
And then you can use javascript to generate the table based on the returned json with something like this:
JAVASCRIPT:
success: function(data) {
var myTable = document.getElementById('myTable');
for (i in data) {
var tr = myTable.appendChild(document.createElement('tr'));
for (key in data[i]){
var td = tr.appendChild(document.createElement('td'));
td.title = key;
td.innerHTML = data[i][key];
}
}
}
HTML
//data displays here <-
<table id="myTable"></table>
Some relevant links:
https://www.php.net/manual/en/function.json-encode.php
https://api.jquery.com/jQuery.ajax/
https://www.w3schools.com/jsref/met_document_createelement.asp
Please feel free to add any comment if you would like further clarification.
Yes it is possible
Add success: function(data){} where data is the already defined variable has value is the result you can perform functions using this variable:
$.ajax({
type: "POST",
url: "searchQuery.php",
data: {submit:submit, type: type, grade:grade, organic:organic, price: price, name: name},
success: function(data) {
console.log('query submitted');
document.querySelector("main")[0].append(data);
}
});
This function only works for the first selection,for example, if I choose id_rayon = 1 (is the first order of the data in the table), I can choose id_gardu based id_penyulang on id_rayon = 1, but if I choose another id_rayon id_gardu selection does not appear
<div class="w3-half">
<label>Penyulang</label>
<select class="w3-select w3-border" name="id_penyulang" onchange="pilih_penyulang(this.value);">
<option value="" disabled selected>Choose your option</option>
<?php
$id_rayon=$row['id_rayon'];
$vendor=$mysqli->query("SELECT * FROM `penyulang` where id_rayon=$id_rayon");
while($row_vendor=$vendor->fetch_array())
{
?>
<option value="<?php echo $row_vendor['id_penyulang'];?>"><?php echo $row_vendor['nama_penyulang'];?></option>
<?php
}
?>
</select>
/this only displays the first id and doesn't loop even though it is in the php while loop
<script type="text/javascript">
function pilih_penyulang(id_penyulang)
{
$.ajax(
{
url: 'http://localhost/arrester/option_gardu.php',
data : 'id_penyulang='+id_penyulang,
type: "post",
dataType: "html",
timeout: 10000,
success: function(response)
{
$('#dom_gardu').html(response);
}
});
}
</script>
</div>
<div class="w3-half">
<label>Gardu</label>
<select class="w3-select w3-border" name="id_gardu" id="dom_gardu">
<option value="" disabled selected>Choose your option</option>
</select>
</div>
and this is dom_gardu file that will be called by javascript
<?php
require_once('connect.php');
$id_penyulang = $_POST['id_penyulang'];
$query= $mysqli->query('select * from gardu where id_penyulang="'.$id_penyulang.'"');
while($data=$query->fetch_array()){
echo '<option value="'.$data['id_gardu'].'">'.$data['nama_gardu'].'</option>';
}
?>
my webpage view
my table view
I want auto fill textboxes from database when user choose an element in combo box.
with jQuery or java script in php.
$name when choose an element get text of that
<select name="Work_Subject" id="id2" onchange="">
<option value="*" selected>*</option>
<option value="1">TD</option>
<option value="2">HW</option>
<option value="3">Re</option>
<option value="4">AM</option>
<option value="5">Other</option>
</select>
$name=$_POST['work_suubject'];
$arrResult = mysql_query("SELECT * FROM cr_time name=".$name."",$con);
if((mysql_num_rows($arrResult))>0){
$row = mysql_fetch_row($arrResult);}
<input type="text" name="title_affect" id="title_affect" value="<?php $row['name']?>">
HTML FILE
<select name="Work_Subject" id="id2">
<option value="*" selected>*</option>
<option value="1">TD</option>
<option value="2">HW</option>
<option value="3">Re</option>
<option value="4">AM</option>
<option value="5">Other</option>
</select>
<input type="text" class="result" />
<input type="text" class="result" />
<input type="text" class="result" />
<input type="text" class="result" />
<input type="text" class="result" />
JS
$("#id2").change(function(){
$.ajax({
type: "POST",
url: "some.php",
data: {'value':$(this).val()},
success: function(msg){$('.result').val(msg)}
});
});
some.php
make your code and echo result
Eg. echo $result; die;
$(document).ready(function() {
$("#id2").change(function(){
$.ajax({
type: "POST",
url: "some.php",
data: "element="+$(this).val(),
success: function(msg){
alert( "Прибыли данные: " + msg );
}
});
});
});
Select the item, then pass a value, then do work on the server and then give the result
The form below is present in every row of an html table.However alert("dfd") pops up only for the first row of the table and not for the forms in the other rows(these forms appear on the webpage).Can anyone tell why is it happening?
HTML:
<form class='form form-horizontal' method='post' role='form' id='formsel' name='formsel'>
<fieldset >
<div>
<span class='control-group' >
<span class='controls'>
<select id='formcont' name='formcont' class='form-control' style='cursor:pointer;'>
<option selected='selected' style='display:none;'>Select</option>
<option value='1'>Option1</option>
<option value='2'>Option2</option>
<option value='3'>Option3</option>
</select> <button id='selbtn' name='selbtn' type='submit'>Sub,it</button>
</span>
</span></div>
</fieldset>
</form>
JS:
$("#formsel").submit(function () {
alert("dfd");
$.ajax({
url:"add.php",
data:$("#formcont").val().serialize(),
type:"POST",
success:function(data){
console.log(data);
if(data=="done"){
alert("success");
}
},
error:function(data){
alert("Network ERROR");
}
})
return false;
});
$("#selbtn").click(function () {
("#formsel").submit();
});
PHP:
<?php
include ('db.php');
session_start();
echo "done";
?>
Yes, because you're not sending any data:
$("#formcont").val().serialize()
Should be:
$(this).serialize()
Since the button you're clicking to trigger the submit is a submit button, you really do not need the following code:
$("#selbtn").click(function () {
("#formsel").submit();
});