Hello StackOverflow People.
I need you help. I have this code:
<select name="type" onChange="idk?" class="form-control">
<option value="H">Week 51</option>
<option value="V">Week 52</option>
</select>
And if an user change the week i want to change the file get content :s
$Week = "";
echo file_get_contents('http://rooster.farelcollege.nl/'.$Week.'/c/c00050.htm');
Thanks!
greetings from the Netherlands =)
you can send Ajax request to the "file_get_contents" url.
This is what I am using and it works fine :)
<select name="type" class="form-control">
<option value="H">Week 51</option>
<option value="V">Week 52</option>
</select>
$(document).ready(function() {
$( ".form-control" ).change(function() {
$.ajax({
data: {
// You are not sending any post variables right? Then leave this empty :-) otherwise use it as array 'var1': 'value', 'var2': 'value2' ...
},
url: 'http://rooster.farelcollege.nl/'+$(this).val()+'/c/c00050.htm',
method: 'POST',
success: function(msg) {
alert(msg); // Optional, show text that was given by URL, can be removed
}
});
});
});
jquery.com/jquery.ajax
Related
I have this select box. The selected option is sent with ajax to a server side script.
<select id="main_select">
<option selected="selected" value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
</select>
jquery script
$(document).ready(function() {
$('#main_select').change(function() {
$.ajax({
url: "itemscript.php",
type: "post",
data: {
option: $(this).val()
},
success: function(data) {
$("#details").html(data);
}
});
}).change();
});
And in the server sided script (itemscript.php) I get the variable from the select box like that:
if(isset($_POST["option"]))
{
$itemlevel = $_POST["option"];
}
Now I want to extend this script to send an additional php variable called $element to the server sided script (itemscript.php). The $element variable is a part of the the current url address.
How can I send the additional $element variable within this jquery/ ajax script?
Just add the other data items into the data{} part, separated by commas.
Assuming that your $element data is inside an inputbox, then
HTML
<input id="element">
<br>
<select id="main_select">
<option selected="selected" value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
</select>
$(document).ready(function() {
$('#main_select').change(function() {
$.ajax({
url: "itemscript.php",
method: "POST",
data: {
option: $(this).val(),
element: document.getElementById("element").value
},
.success: function(data) {
$("#details").html(data);
}
});
}).change();
});
In the above, $_POST["element"] will be passed to your php scripts
I have an AJAX request going to my PHP file to pull data from the database that pertains to the users. I want to autofill the form inputs. I was able to fill most of the inputs, but the HTML "select" option is really stumping me. Does anyone know how to autoselect the value in the database?
HTML
<select class="gender-reg" name="gender-reg">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="optout">Rather Not Say</option>
</select>
AJAX REQUEST
$(function () {
$.ajax({
type: 'GET',
url: 'http://localhost:8090/HELPERSITE/src/php/session.php',
dataType: 'json',
data: '',
success: function (response) {
console.log(response);
$(".username-reg").attr("value", (response['username']));
$(".pwd-reg").attr("value", (response['password']));
$(".email-reg").attr("value", (response['email']));
$(".acct-type").text(response['type']);
$(".fname-reg").attr("value", (response['fname']));
$(".lname-reg").attr("value", (response['lname']));
$(".gender-reg").attr("value", (response['gender']));
$(".street-reg").attr("value", (response['street']));
}
})
});
You can simply use .val():
$(".gender-reg").val(response['gender']);
The ajax is fired when user confirms, but if user cancels the confirm dialog still the select tag value changes though ajax isn't fired. I want something like if user cancels then select tag should retain it's previous value. I have this:
<select name="ss" id="<?=$row['id'];?>" onchange="_changeStatus(this.value,'<?=$row['id'];?>');">
<option value='Paid'>Paid</option>
<option value='Verified'>Verified</option>
<option value='Inprocess'>Inprocess</option>
<option value='Chargeback'>Chargeback</option>
</select>
script:
function _changeStatus(v,i){
if(confirm("Sure to Update")){
$.ajax({
type: 'post',
url: 'change-status.php',
data: {val:v,eid:i,actionid:1},
success: function (res) {
if(res!="scr"){
alert("Unexpected Error, Page will be refreshed !");
window.location.reload();
}
}
});
}
}
Should be something like that:
<select defaultValue="Paid" name="ss" id="<?=$row['id'];?>" onchange="_changeStatus(this,'<?=$row['id'];?>');">
<option value='Paid'>Paid</option>
<option value='Verified'>Verified</option>
<option value='Inprocess'>Inprocess</option>
<option value='Chargeback'>Chargeback</option>
</select>
function _changeStatus(vobj,i){
var v = vobj.value;
if($(vobj).attr('value_before')){
var vbefore = $(vobj).attr('value_before');
}else{
var vbefore = vobj.defaultValue;
}
if(confirm("Sure to Update")){
$.ajax({
type: 'post',
url: 'change-status.php',
data: {val:v,eid:i,actionid:1},
success: function (res){
if(res!="scr"){
alert("Unexpected Error, Page will be refreshed !");
window.location.reload();
}else{
$(vobj).attr('value_before',v);
}
}
});
}else{
$(vobj).val(vbefore);
}
}
Please note that I have left it as similar as possible, so you would get a concept. Generally it's not a good practice to bind events inline when using jQuery, as well as mixing javascript with jQuery if not necessary.
I have a problem with submiting my "form" with json. Its not form in traditional way, i will post a code now:
$('#select').on('change', function() {
document.getElementById("info").setAttribute("data-info", this.value);
})
$('#info').on('click', function() {
var id = $(this).data('info');
add(info);
});
function add(info) {
$.ajax({
type: 'get',
cache: false,
contentType: content_type,
beforeSend: function(xhr) {xhr.overrideMimeType(content_type);},
data: {'action': 'info_add', 'info': info },
url: sitepath + 'info/all',
success: function() { update(); }
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="select">
<option value="1">data1</option>
<option value="2">data2</option>
<option value="3">data3</option>
<option value="4">data4</option>
</select>
<div id="info">Button</div>
So as you see, when select is changed it adds "data-info" attribute to div. And when div is pressed it send data-info to php script. And the problem is that it always send the same value. But after refresh it sends fine only once and than again the same value as first. Its hard to explain but here is example:lets say that i change select to "data2" and press on div. It sends "2". But then when i change it to "data3", and press on div, it still sends "2", not "3". There is no cache set or something. Sorry for bad english and thanks in advance :)
Use jQuery for setting if you are also going to be reading it with jQuery
Change
document.getElementById("info").setAttribute("data-info", this.value);
to
$"#info").data("info", this.value);
Still wondering why you are using data atrrbutes when you are not just reading the value on demand.
add($('#select').val());
You are using confusing code, you can achieve the same using:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="select">
<option value="1">data1</option>
<option value="2">data2</option>
<option value="3">data3</option>
<option value="4">data4</option>
</select>
<div id="info">Button</div>
<script>
$('.product__cart, .stock-product__cart').on('click', function() {
var info = $('#select').val();
$.ajax({
type: 'get',
cache: false,
data: {'action': 'info_add', 'info': info },
url: sitepath + 'info/all',
success: function() { update(); }
});
});
</script>
I'm guessing this error has to do with asynchronous programming, but I can't seem to wrap my head around it after looking at various examples on here...
I have a basic form that should do a post request and then it produces a d3 graph based on the form selection value...
<form id="target" method="post">
<select name="len" id="len">
<option value="sel">--Select--</option>
<option value="year">Most Recent Year</option>
<option value="all">All Data</option>
</select>
<input type = "submit"class="btn" value="Submit"/>
</form>
$(document).ready(function(){
$('.btn').on('click',function(){
var myvar = $('select[name=len]').val();
$.ajax({
url: 'dbquery_o2_select.php',
type: 'POST',
data: {'var':myvar},
dataType: "JSON",
success: function (result){
// produce a d3 graph here
},
error: function(jqXHR,textStatus){
alert(textStatus);
}
});
return false; });
});
Upon the second "submit", I get an error saying that 'sampledate' (which is an associated name in the ajax return array named 'result') is undefined.
Thanks in advance for any help. Let me know if you need more info!