I'm attempting to make a selection and pass the variable to a .php page. I can do it with the jQuery examples on a date selector ... but can't figure it out on the menu selector. When I use this control in conjunction with the datepicker, it allows me to pass both variables, but when I just use it by itself, it doesn't hand it off.
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<title>DailyRecords</title>
<link rel="stylesheet" href="jquery/jquery-ui.css">
<script src="jquery/js/jquery-1.10.2.js"></script>
<script src="jquery/jquery-ui.js"></script>
<html>
<head>
<html>
<head>
<script>
function showUser(str) {
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;
}
}
xmlhttp.open("GET","roster.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<script>
$(function() {
$( "#restaurant" ).selectmenu({
});
});
</script>
<table>
<form>
<td>
<select name="restaurant" id="restaurant" onchange="showUser(this.value)">
<option value="">selection</optoin>
<option value="101">DA</option>
<option value="102">FV</option>
<option value="103">CS</option>
<option value="104">TO</option>
</select>
</td>
</form>
</table>
<div id="txtHint"><b>Select restaurant</b></div>
</body>
</html>
Use my code it will work. But make sure your jquery files jquery/js/jquery-1.10.2.js available in the right path or not?
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<title>DailyRecords</title>
<link rel="stylesheet" href="jquery/jquery-ui.css">
<script src="jquery/js/jquery-1.10.2.js"></script>
<script src="jquery/jquery-ui.js"></script>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
}
else
{
$.ajax({
url: "roster.php",
data : "q="+str, //if you want to pass one variable
//data : "name="+name+"&natives="+natives, //if you want to pass more than 1 variable
type : "POST", // if you want to pass get method put "GET"
success :function(text){
alert(text);
document.getElementById('txtHint').innerHTML=text;
}
});
}
}
</script>
</head>
<body>
<table>
<form>
<td>
<select name="restaurant" id="restaurant" onchange="showUser(this.value)">
<option value="">selection</optoin>
<option value="101">DA</option>
<option value="102">FV</option>
<option value="103">CS</option>
<option value="104">TO</option>
</select>
</td>
</form>
</table>
<b>Select restaurant</b> <div id="txtHint"></div>
</body>
</html>
roster.php file
<?php
echo $_POST['q'];
?>
since you using jquery you can do it like bellow :
<script>
function showUser(str)
{
var datastring ;
datastring = "q="+str;
$.post("roster.php",datastring,function(){
//your result here
});
}
</script>
Use this following code
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<title>DailyRecords</title>
<link rel="stylesheet" href="jquery/jquery-ui.css">
<script src="jquery/js/jquery-1.10.2.js"></script>
<script src="jquery/jquery-ui.js"></script>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
}
else
{
$.ajax({
url: "roster.php",
data: {"q":str}, //if you want to pass one variable
type : "POST", // if you want to pass get method put "GET"
success :function(data){
console.log(data);
document.getElementById('txtHint').innerHTML=data;
}
});
}
}
</script>
</head>
<body>
<table>
<form>
<td>
<select name="restaurant" id="restaurant" onchange="showUser(this.value)">
<option value="">selection</optoin>
<option value="101">DA</option>
<option value="102">FV</option>
<option value="103">CS</option>
<option value="104">TO</option>
</select>
</td>
</form>
</table>
<b>Select restaurant</b> <div id="txtHint"></div>
</body>
</html>
get post value in poster.php
<?php
if(isset($_POST['q'])){
echo $_POST['q'];
}
?>
Related
So i have 2 html pages (index.html and index2.html) and i can't call js function in index2.html .I set up a console.log() in every functions and nothing show up when i try to invoke functions from index2.html . I found nothing in the javascript that could create this issue. Here is my code :
index2.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="script.js"></script>
<input class="example_input" type="text" placeholder="Search.." id="search2">
<button id="button2" class ="example_button" type="submit" onclick="getvids()"><i class="fa fa-search"></i></button>
<br/>
<br/>
<label for="numofvids2">Nombre de vidéos:</label>
<select name="Vidsnum2" id="numofvids2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</head>
<body>
<script src="script.js"></script>
<h1><span id="vidsdiv2"></span></h1>
</body>
</html>
script.js :
function getvids() {
console.log("getvids")
var suburl2 = document.getElementById("search2").value;
var numofvids2 = document.getElementById("numofvids2").value;
if (suburl2 != "") {
suburl2 = suburl2.replace(" ", "%20");
var url2 = 'https://api.dailymotion.com/videos?search='+suburl2+'&page=1&limit='+numofvids2+'&fields=thumbnail_1080_url'
var request2 = new XMLHttpRequest();
request2.open('GET', url2);
request2.responseType = 'json';
request2.onload = function() {
var texte2 = request2.response;
if (texte2.list[0] != undefined) {
var n2 = 0
while (texte2.list[n2] != undefined) {
var allvids2 = allvids2+texte2.list[n2].thumbnail_1080_url+"<br/>";
n2 = n2+1
};
var allvids2 = allvids2.replace("undefined", "")
document.getElementById("vidsdiv2").innerHTML = allvids2;
} else {
document.getElementById("vidsdiv2").innerHTML = "Not found";
};
};
request.send();
} else {
document.getElementById("vidsdiv2").innerHTML = "Empty research";
}
};
I'm new to JS and i want to receive the value from a variable in JS, send it by post (or ajax) to a PHP file, and see the text display. The thing is i've been trying different ways to do it but i always get a undefined index in php.
My code is below
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>PRUEBA AJAX JS PHP HTML</title>
</head>
<body>
<H1>prueba</H1>
<input type="checkbox" name="switch" id="switch" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("#switch").change(function ()
{
var checked=$("#switch").attr("checked");
if(checked)
{
$("switch").removeAttr("checked");
console.log("estado apagado switch 1");
var estados="1";
$.post("accion.php", {estado: "david"});
}else
{
$("#switch").attr("checked","checked");
console.log("estado encendido switch 1");
var estados="2";
$.post("accion.php", {estado: "david 2"});
}
});
</script>
</body>
</html>
accion.php
<?php
$est = $_POST['estado'];
echo $est;
if ($est=="david") {
echo "no mameees";
}else{
echo "no mameees no se puso ";
}
?>
Someone has any idea ?
$("#switch").change(function () {
var checked=$("#switch").prop("checked");
if(checked)
{
console.log(checked);
}else{
console.log(checked);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Switch <input type="checkbox" name="switch" id="switch" >
Use prop instead of attr to find checkbox is checked or not.
You can let php check if the checkbox was checked or not in a success callback from $.post:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>PRUEBA AJAX JS PHP HTML</title>
</head>
<body>
<H1>prueba</H1>
<input type="checkbox" name="switch" id="switch" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("#switch").change(function ()
{
var checkbox = $("#switch");
$.post("accion.php", {estado: checkbox.val()}, function(data){
$("h1").html(data);
});
});
</script>
</body>
</html>
accion.php
<?php
$checkbox = isset($_POST['estado']) && $_POST['estado'] == 'on'; // 'on' is the default checkbox value when you don't specify it in html
if ($checkbox) {
echo "it's been checked";
}else{
echo "it wasn't checked";
}
?>
PS: when working with ajax ( check out $.post options) i recommend using dataType: 'json' and your php should respond with a valid JSON, you have json_encode for that.
use
var checked = $('#switch').is(':checked');
instead of
var checked=$("#switch").attr("checked");
I have this dropdown list
#Html.DropDownList("orderPosted", orderList, new { data_native_menu = "false", data_options_prefix = "Insert at Position: ", data_mini = "true" })
and the script to update #itemPosition to pass it to the controller
#Html.Hidden("itemPosition")
<script>$("#itemPosition").val($("#orderPosted option:selected").text());
$(function () {
$("#orderPosted").on("change", function () {
$("#itemPosition").val($("option:selected", this).text());
});
})
</script>
It will assign the text to #itemPosition when the page loads, but the 'On Change' function is not working. What is wrong with the way I have this formatted.
Here is a working example, you can find out what you are doing wrong by comparing it with your code:
function getSelected(el) {
var value = el.val();
var text = el.find("option").filter(":selected").text();
$("#page-one pre").text("Selected: "+value+" - "+text);
}
$(document).on("pagecreate", "#page-one", function() {
getSelected($("#select-custom-1"));
$("#select-custom-1").change(function() {
getSelected($(this));
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page-one">
<div data-role="content" role="main">
<select name="select-custom-1" id="select-custom-1" data-native-menu="false">
<option value="1">The 1st Option</option>
<option selected value="2">The 2nd Option</option>
<option value="3">The 3rd Option</option>
<option value="4">The 4th Option</option>
</select>
<pre></pre>
</div>
</div>
</body>
</html>
BTW, yes you are right, the selected attribute won't be updated, but by using the filter as above, you will get (and can post back) the selected option(s) text as expected.
This is my page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="/Scripts/jquery-2.1.3.js"></script>
<script>
function DoSubmit() {
if ($("#noAggLabel")) {
$("#noAggLabel").innerHTML = "";
}
if (this.value) {
$("#orderForm").submit();
}
}
</script>
</head>
<body>
<div>
<form action="/Orders/GetXML" id="orderForm" method="post"> <p>
<select id="OrdersSelect" name="productionOrderId" onchange="DoSubmit();"><option value="">Orders</option>
<option value="1">Order 1</option>
<option value="2">Order 2</option>
<option value="3">Order 3</option>
</select>
</p>
</form> </div>
<div id="codesTable">
</div>
</body>
</html>
I'm developing a ASP.NET MVC 5 app with .NET Framework 4.5.1 and C#.
This is the View that generates that HTML:
#model Models.ProductionOrderViewModel
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-2.1.3.js"></script>
<script>
function DoSubmit() {
if ($("#noAggLabel")) {
$("#noAggLabel").innerHTML = "";
}
if (this.value) {
$("#orderForm").submit();
}
}
</script>
</head>
<body>
<div>
#using (#Html.BeginForm("GetXML", "Orders", FormMethod.Post, new { id = "orderForm" }))
{
<p>
#Html.DropDownList("productionOrderId",
new SelectList(Model.ProductionOrders, "Id", "OrderNumber"),
"Orders",
new { id = "OrdersSelect", onchange = "DoSubmit();" })
</p>
}
</div>
#if (!Model.PagingInfo.HasAggregations)
{
<div id="noAggDiv">
#Html.Label("No tiene agregaciones", new { #id = "noAggLabel" })
</div>
}
<div id="codesTable">
</div>
</body>
</html>
Why I can't do a submit? I change selected value and nothing happens.
That's because the DoSubmit function isn't called with the element as the context. In the function this will refer to the window object.
You can set the context when you call the function:
onchange="DoSubmit.call(this);"
If you bind the event using jQuery instead of the onchange attribute, the context will be right:
$(function(){
$('#OrdersSelect').change(DoSubmit);
});
Side notes: There is no innerHTML method in jQuery, you would use the text or html method to set the content. You don't have to check if there is any element first, if there is no element, then the jQuery object will be empty, so calling text on it just does nothing.
You should check the content of the value. If you just use it in an if statement it will be converted to a boolean, so an empty string is still evaluated as true.
function DoSubmit() {
$("#noAggLabel").text("");
if (this.value != "") {
$("#orderForm").submit();
}
}
Remove the onchange attribute, and bind through jQuery
<script>
function DoSubmit() {
if ($("#noAggLabel").length) {
$("#noAggLabel").html();
}
if (this.value) {
$("#orderForm").submit();
}
}
$(function(){
$('#OrdersSelect').on('change', DoSubmit);
});
</script>
Also add .length to the $("#noAggLabel") test because it always returns a jQuery object (and it always evaluates to true when used in a boolean test).
when i run with welcome.jsp, dojo creates a textbox dynamically.but when i call the welcome.jsp with ajax in index.jsp, which shows only div element.which doesn't create a text field inside that div........... please someone help me?
hear is the code.
index.jsp
<!DOCTYPE html>
<%#page import="java.util.*" %> <%#page import="org.hibernate.*,org.hibernate.cfg.*,example.*" %>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/dojo.js" data-dojo-config="parseOnLoad: true, isDebug: true"></script>
<link rel="stylesheet" type="text/css" href="dojo-release-1.9.2-src/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="dojo-release-1.9.2-src/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="dojo-release-1.9.2-src/dijit/themes/tundra/tundra.css">
<script>
require(["dojox/layout/ContentPane"]);
function showCustomer(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
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;
}
}
alert("str is"+str);
xmlhttp.open("GET","welcome.jsp",true);
xmlhttp.send();
alert(4);
}
</script>
</head>
<body class="tundra">
<form action="">
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="customer1">customer1</option>
</select>
</form>
<br>
<div data-dojo-type="dojox/layout/ContentPane" id="txtHint" data-dojo-props="href: '/welcome.jsp', executeScripts: true">
Customer info will be listed here...
</div>
</body>
</html>
welcome.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<%#page import="java.util.*" %> <%#page import="org.hibernate.*,org.hibernate.cfg.*,example.*" %>
<html>
<head>
<title>Dojo DnD test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/dojo.js" data-dojo-config="parseOnLoad: true, isDebug: true"></script>
<link rel="stylesheet" type="text/css" href="dojo-release-1.9.2-src/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="dojo-release-1.9.2-src/dijit/themes/claro/document.css">
<link rel="stylesheet" type="text/css" href="dojo-release-1.9.2-src/dijit/themes/claro/dijitTests.css">
<body onload="vali();">
</body>
<script>
dojo.require("dojo.dnd.Source");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Button");
require(["dojox/layout/ContentPane"]);
var widgets = new Array();
var source;
var c=new Array();
dojo.ready(function() {
for (var i = 0; i < 5; i++) {
widgets.push(
new dijit.form.TextBox({
value: i,
class: 'dojoDndItem',
}).placeAt("source"));
}
source = new dojo.dnd.Source("source", {
copyOnly: false
});
new dojo.dnd.Source("target");
});
setValue = function() {
widgets[0].attr("value", (new Date).getTime());
};
insertNew = function() {
widgets.push(
new dijit.form.TextBox({
value: widgets.length,
class: 'dojoDndItem',
}));
source.insertNodes(true, [widgets[widgets.length-1].domNode]);
};
</script>
</head>
<body class="claro">
<form name="form1">
<div dojoType="dijit.form.Button" onClick="setValue">
set value textbox 0
</div>
<div dojoType="dijit.form.Button" onClick="insertNew">
insert new textbox
</div>
<table>
<tr>
<td>
<div id="source" style="height: 200px; width: 200px; border: 1px solid red;">
</div> </td>
<td><div id="target" style="height: 200px; width: 200px; border: 1px solid blue;">
</div></td></tr></table>
</form>
</body>
</html>
That's because when you load your content with AJAX, scripts are not interpreted. You have to evaluate them by yourself using the eval() function. Or, since you're using Dojo, you could look at the dojox/layout/ContentPane module. This module allows you to load a page (through AJAX requests) and execute the scripts that are on it without the entire XMLHttpRequest or ActiveXObject overhead (and without having to manually call eval()).
To do this with the dojox/layout/ContentPane, you just replace your <div> with ID #txtHint by:
<div data-dojo-type="dojox/layout/ContentPane" id="txtHint" data-dojo-props="href: 'welcome.jsp', executeScripts: true">
Customer info will be listed here...
</div>
You only need to make sure you load Dojo, set the data-dojo-config attribute so that parseOnLoad: true property is set and you need to make sure you import the dojox/layout/ContentPane module by having the following code:
require(["dojox/layout/ContentPane", "dojo/parser"]);
A full example loading a webpage can be found on this JSFiddle (I change the href to / so it would load the homepage again, because I have no welcome.jsp page).
Another example doing the same programmatically can be found on this JSFiddle.