I need to get selected checkbox values from table and pass those values into ajax.Below code I need to pass selected_Device_Mac into ajax. Using inner text i am to get single mac values.i want to check multiple checkboxes and pass each mac values into ajax.How to implement this?
function getDeviceType() {
var selected_Device_Mac = '';
var selected_device_id = '';
($('#query-type').val() === 'single'){
if ($('#PA').is(":visible")) {
console.log("before")
selected_Device_Mac = document.getElementById("macaddr1").innerText;
selected_device_id = '#Selected_Device';
console.log("after")
} else if ($('#MP').is(":visible")) {
selected_Device_Mac = document.getElementById("macaddr2").value;
selected_device_id = '#Selected_Snmp_Device';
}
}
$('#cover-spin').show();
$.ajax({
method: "GET",
dataType: "text",
url: "getDeviceType",
data: {
mac : selected_Device_Mac,
},
ur code is not clean so that im not sure this is what you need
this code is the way to get value of multi checkbox
<!DOCTYPE html>
<html>
<head>
<title>Title Page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<input type="checkbox" value="a">a
<input type="checkbox" value="b">b
<input type="checkbox" value="c">c
<input type="checkbox" value="d">d
<input type="checkbox" value="e">e
<button onclick="test()" class="btn btn-default">click</button>
<!-- jQuery -->
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>
var test = ()=>{
let check_list=[];
$('body').find("input[type=checkbox]:checked").each(function () {
check_list.push($(this).val());
});
alert(check_list);
}
</script>
</body>
</html>
Related
I'm doing my first steps with JS and HTML, I'm trying to make a page for squaring a number, in the first box I enter a number, the second is blank, I click the button and I want the result of the number entered earlier to appear in the second box, the function is loaded from the external js file, can anyone explain how to do it?
HTML code
<html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="styl.css" type="text/css" />
</head>
<body>
<section>
<h2>Skrypt do potęgowania liczb</h2><br>
Podaj liczbę którą podniesiemy do kwadratu:<br>
<input type="text" id="Liczba" value="" placeholder="Liczba" /><br>
<input type="text" id="Wynik" value="" placeholder="Wynik" />
<button type="button" id="Przycisk" onclick="Potegowanie(Liczba, Wynik)" >Oblicz</button><br>
</section>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
JS code
<script type="text/javascript">
function Potegowanie(pole_na_liczbe, pole_na_wynik)
{
var liczba = document.getElementById("pole_na_liczbe").value;
var wynik = liczba*liczba;
pole_na_wynik.value = wynik;
}
</script>
To get the first value, you could use the document.getElementById(); method, and reference the id of your first inout box, like...
var liczba = document.getElementById("Liczba").value;
...then after you've done the calculation, you could use a similar method to assign the value to your second input box...
document.getElementById("Wynik").value = wynik
Altogether, it looks like this...
function Potegowanie()
{
var liczba = document.getElementById("Liczba").value;
var wynik = liczba*liczba;
document.getElementById("Wynik").value = wynik
}
<html>
<head>
<title>Tytuł strony</title>
<link rel="stylesheet" href="styl.css" type="text/css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<section>
<h2>Skrypt do potęgowania liczb</h2><br>
Podaj liczbę którą podniesiemy do kwadratu:<br>
<input type="text" id="Liczba" value="" placeholder="Liczba" /><br>
<input type="text" id="Wynik" value="" placeholder="Wynik" />
<button type="button" id="Przycisk" onclick="Potegowanie()" >Oblicz</button><br>
</section>
</body>
</html>
Extra pointer...
In JavaScript, we use camelcase to name variables, id's and functions, so your function Potegowanie() for example would be better off being called potegowanie(). It will still work the same, but it's just good practice.
I have the following code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="OrderUp.css">
<title>OrderUp</title>
</head>
<body>
<form onsubmit="return results();" method="post" action="results.html" >
Name : <input name = "name" type= "text" id="name">
<br>
<input value = "Submit" type = "submit" >
</form>
</body>
</html>
Another HTML page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="OrderUp.css">
<title>Results</title>
</head>
<body>
<h2> Your Form Has Been Submitted </h2>
<script type="text/javascript">
function results() {
var name = document.getElementbyId('name').value;
document.write(name);
}
</script>
</body>
</html>
I am trying to pass on the value 'name' and retrieve it on a different html page (results.html). How do I accomplish this? I am not sure what I am doing wrong. Please help. Thank you!
pass the variable in the url using GET like :
<form method="get" action="result.html" >
Name : <input name = "name" type= "text" id="name">
<br>
<input value = "Submit" type = "submit" >
</form>
and retrieve it in the other page like :
<h2> Your Form Has Been Submitted </h2>
<script>
let params = (new URL(document.location)).searchParams;
let name = params.get("name");
console.log(name) // this is your variable
document.querySelector('h2').innerText += name;
</script>
One way is: you could use the 'get' method on the form, and not 'post':
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OrderUp</title>
</head>
<body>
<!-- Use method 'GET', not 'POST', to pass the form values via the url in the address bar -->
<form method="GET" action="results.html">
Name :
<input name="name" type="text">
<br>
<input value="Submit" type="submit">
</form>
</body>
</html>
Then, in result.html, use javascript to extract the name value from the page url.
result.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Results</title>
</head>
<body>
<h2> Your Form Has Been Submitted </h2>
<span>Name Submitted: </span>
<span id="name-label"></span>
<script type="text/javascript">
// Get the value passed in the url by the form
var querystring = location.search;
// => ?name=Roger
// Remove the '?' at the beginning
var nameValuePair = querystring.replace(/^\?/, '');
// => name=Roger
// Split into parts
var parts = nameValuePair.split('=');
// The name is the second value
var name = parts[1];
// Set the name in the HTML element.
document.getElementById('name-label').innerHTML = name;
</script>
</body>
</html>
You cannot simply take a function from one html and put it into another. Using pure JavaScript and HTML the best way to accomplish this would be to make a JavaScript file, put the function there and load it on both pages. That way if you edit the function in one place, it will change in both.
The code would look like this:
Page 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="OrderUp.css">
<title>OrderUp</title>
</head>
<body>
<form onsubmit="return results();" method="post" action="results.html" >
Name : <input name = "name" type= "text" id="name">
<br>
<input value = "Submit" type = "submit" >
</form>
<script type="text/javascript" src="results.js"></script>
</body>
</html>
Page 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="OrderUp.css">
<title>Results</title>
</head>
<body>
<h2> Your Form Has Been Submitted </h2>
<script type="text/javascript" src="results.js"></script>
</body>
</html>
results.js
function results() {
var name = document.getElementbyId('name').value;
document.write(name);
}
Probably the simplest would be to append it to the url:
<script>
function goToResults() {
window.location = "results.html#" + document.getElementbyId('name').value;
}
document.getElementById("submit").onclick = goToResults;
</script>
<input id = "name" />
<button id = "submit" > Submit </ button>
And on results.html just get it from the location:
document.body.innerHTML += document.location.href.split("#")[1];
You need a way to save the information you want to share between pages. There are many options for javascript each with pros and cons
use the uri hash:
location.hash = myValue / var retrieveValue = location.hash;
use localstorage:
localStorage.setItem("key", "value"); / localStorage.getItem("key");
also document.cookie is an option, (you can look that one up as it's slightly more involved to implement with many good answes already around)
I have a dropdown list where users can select multiple options. I stored the selected options in a String variable in this format : [value of first selected option],[value of second selected option]...
Now i want to pass the value of this variable from my Javascript in file 1 to PHP variable in file 2 using Ajax. Here is my code
<!DOCTYPE html>
<head>
<title>test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="http://querybuilder.js.org/dist/selectize/dist/css/selectize.bootstrap3.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>
</head>
<body>
<div class="container">
<form method="post" action="displayData.php" id="multiple_select_form">
<select name="columns" id="columns" class="form-control selectpicker" multiple>
<option value="Country">Country</option>
<option value="Customer Name">Customer Name</option>
<option value="Order Date">Order Date</option>
<option value="Address">Address</option>
</select>
</form>
<br>
<button class="btn btn-info center-block" id="btn-get">Submit</button>
</div>
</body>
</html>
<script>
$('#btn-get').on('click', function() {
var selectedOptions = [];
$.each($(".selectpicker option:selected"), function(){
selectedOptions.push("[" + $(this).val() + "]");
});
var myVar = selectedOptions.join(",");
$.ajax({
type: "POST",
url: 'displayData.php',
data: { testVariable : myVar },
success: function(data)
{alert(data);}
});
$("#multiple_select_form").submit();
});
</script>
I added alert(data) on success in my Ajax to see if the variable got the correct value. It's working but when form is submited and the displayData.php is loaded I get error Undefined index: testVariable
displayData.php is a simple test file
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
$variable = $_POST['testVariable'];
print_r($variable);
?>
Can anyone explain me what can be the issue ? I believe that the Ajax is written correctly. Thank you for your help.
Try this
<!DOCTYPE html>
<head>
<title>test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="http://querybuilder.js.org/dist/selectize/dist/css/selectize.bootstrap3.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script>
</head>
<body>
<div class="container">
<form method="post" action="displayData.php" id="multiple_select_form">
<select name="columns" id="columns" class="form-control selectpicker" multiple>
<option value="Country">Country</option>
<option value="Customer Name">Customer Name</option>
<option value="Order Date">Order Date</option>
<option value="Address">Address</option>
</select>
<input type="hidden" name="testVariable" id="testVariable">
</form>
<br>
<button class="btn btn-info center-block" id="btn-get">Submit</button>
</div>
</body>
</html>
<script>
$('#btn-get').on('click', function() {
var selectedOptions = [];
$.each($(".selectpicker option:selected"), function(){
selectedOptions.push("[" + $(this).val() + "]");
});
$("#testVariable").val(selectedOptions.join(","));
$("#multiple_select_form").submit();
});
</script>
You're making two requests to displayData.php. One is an AJAX request, with the value set in a field called testVariable, and one is a normal form submit with the value set in a field called columns. The error is happening on the second request.
If your intent is to use AJAX, then remove the following code:
$("#multiple_select_form").submit();
You might even remove the <form> wrapper entirely, since you're identifying the elements directly and not really using the form itself for serialization or anything. (If you ever put a button inside the form it will automatically submit unless you explicitly handle the event to cancel that behavior.)
Conversely, if you do want to submit the form, then you can remove the JavaScript code entirely and move the submit button to be inside the <form> wrapper. And, of course, rename the form element to what your server-side code expects:
<select name="testVariable" ...
I have two codes, one is form.html:
<!DOCTYPE html>
<html>
<head>
<script src="D:\frameworks\jquery-1.11.3.js"></script>
<meta charset="ISO-8859-1">
<title>Form</title>
<script type="text/javascript">
$(function(){
$("#sub").on("click", function(){
sessionStorage.n1 = $("#no1").val();
sessionStorage.n2 = $("#no2").val();
location.href = "main.html";
});
});
</script>
</head>
<body>
No1:<input type="text" id="no1">
No2:<input type="text" id="no2">
<br>
<input type="button" value="Submit" id="sub">
</body>
</html>
and the other is main.html:
<!DOCTYPE html>
<html>
<head>
<script src="D:\frameworks\jquery-1.11.3.js"></script>
<meta charset="ISO-8859-1">
<title>Main</title>
<script type="text/javascript">
var n1_arr = new Array();
var n2_arr = new Array();
$(function(){
n1_arr.push(sessionStorage.getItem("n1"));
n2_arr.push(sessionStorage.getItem("n2"));
$("#a").click(function(){
location.href = "form.html";
});
$("#s").click(function(){
for(var i = 0; i < n1_arr.length; i++)
{
alert(n1_arr[i] + " and " + n2_arr[i]);
}
});
});
</script>
</head>
<body>
<input type="button" value="Add" id="a">
<input type="button" value="Show" id="s">
</body>
</html>
I want these to work like this:
First, main.html will open, and on clicking on the 'Add' button, the form.html will open in the same browser tab. The user will enter two numbers in the text boxes with id's no1 and no2. The user will then click on 'Submit' and then again, main.html should open(again in the same browser tab). The user will continue to do this for as long as he wants. On clicking the 'Show' button, alerts of all the values entered by the user, separately in pairs, will occur. How can I achieve this? In this case, only the last entered pair is alerted.
first you have to run the command on console:
sessionStorage.clear();
main.html
<!DOCTYPE html>
<html>
<head>
<script src="D:\frameworks\jquery-1.11.3.js"></script>
<meta charset="ISO-8859-1">
<title>Main</title>
<script type="text/javascript">
var n1_arr = JSON.parse(sessionStorage.getItem("n1")) || [];
var n2_arr = JSON.parse(sessionStorage.getItem("n2")) || [];
$(function(){
$("#a").click(function(){
location.href = "form.html";
});
$("#s").click(function(){
for(var i = 0; i < n1_arr.length; i++)
{
alert(n1_arr[i] + " and " + n2_arr[i]);
}
});
});
</script>
</head>
<body>
<input type="button" value="Add" id="a">
<input type="button" value="Show" id="s">
</body>
</html>
form.html
<!DOCTYPE html>
<html>
<head>
<script src="D:\frameworks\jquery-1.11.3.js"></script>
<meta charset="ISO-8859-1">
<title>Form</title>
<script type="text/javascript">
$(function(){
$("#sub").on("click", function(){
var n1 = sessionStorage.n1 || [];
if(n1.length > 0){
n1 = JSON.parse(sessionStorage.n1);
}
n1.push($("#no1").val());
sessionStorage.n1 = JSON.stringify(n1);
var n2 = sessionStorage.n2 || [];
if(n2.length > 0){
n2 = JSON.parse(sessionStorage.n2);
}
n2.push($("#no2").val());
sessionStorage.n2 = JSON.stringify(n2);
location.href = "main.html";
});
});
</script>
</head>
<body>
No1:<input type="text" id="no1">
No2:<input type="text" id="no2">
<br>
<input type="button" value="Submit" id="sub">
</body>
</html>
It would appear you are overwriting your existing n1 and n2 values.
sessionStorage stores key value pairs, with the value being a string. When you do sessionStorage.setItem('n1', 'test') it will overwrite the existing value.
What you need to do is read the existing value (it will be a string), parse it, append your new value on the end, then insert the whole object back into storage. When storing an object it will be best to stringify it as JSON first.
If you need to store complex objects like arrays etc you may find it better to use indexedDB.
https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
I have a textbox having id=add, a div having id=get and a button named Add. Now I'm trying to enter values in textbox, save them in to an array and then save that array elements in the div tag (using javascript). But I'm unable to do so. Please help.
<html>
<head>
<title>Content</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="stylesheets/keyword.css" rel="stylesheet">
<SCRIPT language="javascript">
//
var data = new array();
data= document.getElementById('add').value;
function copy()
{
document.getElementById('get').innerHTML=data;
// document.getElementById('get').innerHTML= document.getElementById('add').value;
// return true;
}
</SCRIPT>
</head>
<body>
<input type="text" name="add" id="add"/>
<input type="button" name="but1" onclick="copy()" value="Add"/>
<div id="get" class="keyword"></div>
</body>
</html>
Update your code as,
<html>
<head>
<title>Content</title>
<script language="javascript">
function copy() {
var data = document.getElementById('add').value;
document.getElementById('get').innerHTML += data + "<br/>";
}
</script>
</head>
<body>
<input type="text" name="add" id="add" />
<input type="button" name="but1" onclick="copy()" value="Add" />
<div id="get" class="keyword">
</div>
</body>
</html>
PS:Array (not array) is not required here,
This is because data doesn't have any value, you are trying to read the value of the text box before setting a value and also it should be Array()
Try this instead
function copy()
{
var data = new Array();
data= document.getElementById('add').value;
document.getElementById('get').innerHTML=data;
}
JsBin
Three issues in your code:
array() is not recognized in javascript, it's Array().
You are trying to read the value of the text box before a value can be set to it here:
data= document.getElementById('add').value;
function copy(){
It should be:
function copy()
{
data[0]= document.getElementById('add').value;
data is an array. If you want to store a value, it should be used with an index.
JSFiddle
<html>
<head>
<title>Content</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="stylesheets/keyword.css" rel="stylesheet">
<SCRIPT language="javascript">
//
var data = new Array();
function copy()
{
data = document.getElementById('add').value;
document.getElementById('get').innerHTML = data; document.getElementById('get').innerHTML= document.getElementById('add').value;
// return true;
}
</SCRIPT>
</head>
<body>
<input type="text" id="add"/>
<input type="button" name="but1" onclick="copy()" value="Add"/>
<div id="get" class="keyword"></div>
</body>
</html>