get value and send in url using Ajax - javascript

i want to get the number in text field and send it in Url methode GET ;
$(document).ready(function () {
$("#go").click(function() {
var n = document.getElementById('nombre').value;
alert("Chess.php?number=9");
$('#chess').load("Chess.php?number="+n);
});
the value :
<input type="text" name="nombre" id="nombre">


Try again with code below:
$(document).ready(function () {
$('#go').click(function() {
$.get('Chess.php', { number: $('#nombre').val() } );
});
});
PS: Its stranger the attribute value called nombre and the field called number. Change this too. Other tip is dont use Uppercase for the url, use only 'chess.php'.
I hope to help you.


There's a missing }) ...
Plus you have to add in the head section of your script the following :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$("#go").click(function()
{
var n = document.getElementById('nombre').value;
alert("Chess.php?number=9");
$('#chess').load("Chess.php?number="+n);
})
});
</script>


it works now like this
$(document).ready(function () {
$("#go").click(function() {
$('#chess').load("Chess.php?number="+document.getElementById('nombre').value);
});
});

Related

how to use javascript variable in script tag?

I want to Use TypeID in another tag. would please help me?
<script>
$(ItemType).change(function () {
var TypeID = $(this).val();
});
</script>
<div class="form-group">
#if(TypeID==1){
do something
} else {
do something
}
<div>

HTML5 localStorage.setItem value set but not getting value

jQuery:
$(document).ready(function () {
alert(localStorage.getItem(pet_name));
$("#lost_step1").click(function(){
alert($("#pet_name").val());
localStorage.setItem(pet_name, $("#pet_name").val());
alert(localStorage.getItem(pet_name));
}
}
When I am reloading page than It not getting value of pet_name outside click function. It alerting inside click function. How can I resolve this error? Why it not getting value? Please help me. Rightnow I am helpless. and sorry for my weak English.

maybe try this
https://jsfiddle.net/dalinhuang/hgf1gcz5/1/
based on your example:
$(document).ready(function() {
var pet_name = "pet_name";
alert('init --> ' + localStorage.getItem(pet_name));
$("#lost_step1").click(function() {
var pet_name_val = $("#pet_name").val();
alert('before save-->' + pet_name_val);
localStorage.setItem(pet_name, pet_name_val);
alert('after save-->' + localStorage.getItem(pet_name));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input value="test_pet_name" id="pet_name" />
<br>
<button id="lost_step1">CLICK ME!</button>

Passing a variabe to jquery using Odometer

I would like to use a jquery odometer to display information on a master page. http://www.jqueryscript.net/animation/Smooth-Animated-Numbers-with-Javascript-CSS3-odometer.html
In order to do that I have to retrieve that value from SQL Server using C#. Then I have to pass it to the jscript odometer in the html() as shown below. If I get the valuje - how do Isend it to the javascript?
<script>
setTimeout(function(){
$('.odometer').html('123222');
}, 1000);
</script>

Try this html
</head>
<body>
<script src="https://rawgit.com/HubSpot/odometer/v0.4.6/odometer.min.js"></script>
<style src="https://rawgit.com/HubSpot/odometer/master/themes/odometer-theme-default.css"></style>
<script>
odometerOptions = {
auto: false
};
</script>
<script type = "text/javascript">
$(function(){
var exampleOdometerValue = 123456;
var exampleOdometer = new Odometer({ el: $('.odometer-example')[0], theme: 'digital', value: exampleOdometerValue });
exampleOdometer.render()
setTimeout(function(){
exampleOdometerValue = exampleOdometerValue+100.07;
exampleOdometer.update(exampleOdometerValue);
}, 2000);
});
</script>
<div class="odometer odometer-example">123</div>
</body></html>

You can use the below implementation to pass the value from code behind to Jquery
This is one example how to do it.
First Declare a Public Variable in code behind
//Declare a Public Variable in code behind
public string odometervalue = "667";
Read the value in Jquery Like given below
<script>
$(function () {
setTimeout(function () {
//Get the value from serverside
var uid = '<%=odometervalue %>';
odometer.innerHTML = uid;
}, 1000);
});
</script>

use java script variable in ActionLink mvc3 razor

I have a textbox where i must to write a value, how to pass this value in my controller if I call my controller using ActionLink, this is my code:
view:
#Html.TextBox("tisch", "", new { #class = "teschChange"})
#Html.ActionLink("Apply Command", "ApplyCommand", "Work")
and this is te script
<script type="text/javascript">
$(function test() {
$(".teschChange").change(function () {
var tisch = $(this).attr('value');
});
});
</script>
I must to send tisch in ApplyCommandController
Thanks

Instead of using an action link, use a standard link:
<a id="l" href="#Url.Action("ApplyCommand", "Work")">Apply Command</a>
Then, you can use this script:
<script type="text/javascript">
$(function test() {
$(".teschChange").change(function () {
var tisch = $(this).attr('value');
$("#l").attr("href", "#Url.Action("ApplyCommand", "Work")/" + tisch);
});
});
</script>
Which will assign a href of: /Work/ApplyCommand/tisch.

this was the correct script:
$("#l").attr("href", "#Url.Action("ApplyCommand", "Work")?tisch=" + tisch);

How do you use $('document').ready(function()) in jQuery?

I have a piece of code that is working fine in IE, but it doesn’t run in Firefox. I think the problem is that I have not been able to implement $('document').ready(function). The structure of my json is like [{"options":"smart_exp"},{"options":"user_intf"},{"options":"blahblah"}].
I will be very thankful if someone can see my code & help me in correctly implementing it. Here is my code:
<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2
/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$.getJSON("http://127.0.0.1/conn_mysql.php", function (jsonData) {
$.each(jsonData, function (i, j) {
document.form1.fruits.options[i] = new Option(j.options);
});});
});
</script></head>
<body><form name="form1">
My favourite fruit is :
<select name="fruits" id="fruits" /></form></body>
</html>

Short version (suggested by meeger): don't use single quotes around document.
document is a variable that comes with JavaScript (at least in the browser context). Instead, try the following for the relevant line.
$(document).ready(function() {
You'll also want to take the onLoad attribute off of the body tag, else it will run twice.

Just run $(document).ready(function() {doStuff}). This will automatically run when the document is ready.
It's best practice, at least in my opinion, that you don't put any events in the html itself. This way you separate the structure of an html document from it's behavior. Instead attach events in the $(document).ready function.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON("http://localhost/conn_mysql.php", function (jsonData) {
var selectElem = $('#fruits');
for(var i = 0; i < jsonData.length; i++) {
selectElem.append($('<option>').html(jsonData[i].options));
}
});
});
</script>
</head>
<body>
<form name="form1">
My favourite fruit is :
<select name="fruits" id="fruits" />
</form>
</body>
</html>
EDIT:
I tested with the following and mocked the json object since I can't make that call myself.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var jsonData = JSON.parse('[{"options":"smart_exp"},{"options":"user_intf"},{"options":"blahblah"}]');
var selectElem = $('#fruits');
for(var i = 0; i < jsonData.length; i++) {
selectElem.append($('<option>').html(jsonData[i].options));
}
});
</script>
</head>
<body>
<form name="form1">
My favourite fruit is :
<select name="fruits" id="fruits" />
</form>
</body>
</html>

Here it is in all its glory. The shorthand, awesome version:
UPDATED
<script type="text/javascript" language="javascript">
$(function() {
$.getJSON("http://localhost/conn_mysql.php", function (jsonData) {
var cacheFruits = $('#fruits'),
cacheOption = $(document.createElement('option'));
$.each(jsonData, function (i, j) {
cacheFruits.append(
cacheOption.clone().attr('value', j.options).html(j.options)
);
});
});
});
</script>
Of course, I don't know what your JSON structure is, so you may need to play around with the append section of the code.
There should be no reason why the above would not work.

You do not need quotes around document. Once the page has completely loaded, it will start executing whatever you have defined in ready()
$(document).ready(function() {
$(this).getJSON("http://localhost/conn_mysql.php", function (jsonData) {
$(this).each(jsonData, function (i, j) {
document.form1.fruits.options[i] = new Option(j.options);
});
});
});

Try this, your json data should be in this format:
[{'text':'sometext','value':'somevalue'},{'text':'sometext','value':'somevalue'}];
$(document).ready(function() {
$(this).getJSON("http://localhost/conn_mysql.php", function (jsonData) {
var options = [];
$.each(jsonData, function (i, j) {
options.push('<option value="' + j.value + '">' + j.text + '</option>');
});
$('#fruits').html( options.join(''));
});
});
Please note that there may be an encoding/escaping issues here.
Make sure that you escape the text properly from the server side.
htmlentities, htmlspecialchars can help you with that.
This should work in most browsers

Categories