I am working on a history search function.
I have managed to get a working code to save the value from the textbox but I do not know how to load them into a listbox.
I want a listbox with clickable items so that I can click on a previous search value and load that value as I do from the textbox.
Here is my code:
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="jquery.js"></script>
<script src="j.js"></script>
</head>
<body>
<center>
<table>
<tr>
<td style="text-align: center">
<font size="22">Sök order</font>
</td>
</tr>
<tr>
<td>
<form action="test.php" method="post">
<input style="font-size: 44pt; text-align: center" size="9" type="text" name="txtSearch" id="txtSearch"/>
<input type="submit" id="submit" value="submit">
</form>
</td>
</tr>
</table>
</center>
</body>
</html>
And the j.js that handles the local storage function.
$(function () {
$("#submit").click(function () {
var txtSearch = $("#txtSearch").val();
localStorage.setItem('searchvalue',txtSearch);
});
});
And last my test.php that handles the post search request
<?php
$txtSearch = $_REQUEST['txtSearch'];
header('Location: '.'https://mywebsite.com/se/editor/order_info.php?webshop=23946&ordernr='.$txtSearch);
?>
How can I achieve this?
Thank you.
by js, you can
window.location = "https://mywebsite.com/se/editor/order_info.php?webshop=23946&ordernr="+localStorage.getItem('searchvalue');
to save in listbox or any other
document.getElementById("id").value=localStorage.getItem('searchvalue');
to save in array
var a = [];
a[0]=localStorage.getItem('searchvalue');
Related
When I run the code nothings changes and nothing works, the JavaScript does not do anything not even run the alerts. The ranges in the HTML are supposed to go into a function that gets their value and outputs it to a <div>. That does not happen
This is the JavaScript
$(startup);
function startup(){
$("#speedRange").change(srange);
$("#LimitRange").change(lrange);
$("#ticketbtn").cick(findfine);
$("#ticketreset").click(reset);
}
var speed;
var limit;
function srange() {
speed = $("#speedRange").val();
speed = Number(speed);
$("#YourSpeed").html(speed);
function lrange() {
limit = $("#LimitRange").val();
limit = Number(limit);
$("#OverSpeed").html(limit);
function findfine() {
alert("ll")
}
function reset() {
alert("ll")
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Speeding Ticket Calculator</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Speeding Ticket Calculator</h1>
<table id="speedtable">
<tr>
<td>Select Your Speed<br>40 <input type="range" id="speedRange"> 160 </td>
<td><div id="YourSpeed"></div></td>
</tr>
<tr>
<td>Select The Speed Limit<br>40 <input type="range" id="limitRange"> 100 </td>
<td><div id="OverSpeed"></div></td>
</tr>
</table><br>
<a id="ticketbtn" class="button1">Calculate Penalty</a>
<a id="ticketreset" class="button1">Reset</a><br>
<br><br><br>
<div id="finebox">
</div>
<script src="script.js">
<p id="demo"></p>
</script>
</body>
</html>
This is the Html
Jquery On API to be used in latest version of jquery.
and some function braces where missing,
find the working snippet below.
$(document).ready(function(){
debugger;
startup();
});
function startup(){
debugger;
$("#speedRange").on('change',srange);
$("#limitRange").on('change',lrange);
$("#ticketbtn").on('click',findfine);
$("#ticketreset").on('click',reset);
}
var speed;
var limit;
function srange() {
debugger
speed = $("#speedRange").val();
speed = Number(speed);
$("#yourSpeed").html(speed);
}
function lrange() {
debugger
limit = $("#limitRange").val();
limit = Number(limit);
$("#overSpeed").html(limit);
}
function findfine() {
debugger
alert("ll")
}
function reset() {
debugger;
alert("ll");
$("#overSpeed").html('');
$("#yourSpeed").html('');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Speeding Ticket Calculator</h1>
<table id="speedtable">
<tr>
<td>Select Your Speed<br>40 <input type="range" id="speedRange"> 160 </td>
<td><div id="yourSpeed"></div></td>
</tr>
<tr>
<td>Select The Speed Limit<br>40 <input type="range" id="limitRange"> 100 </td>
<td><div id="overSpeed"></div></td>
</tr>
</table><br>
<a id="ticketbtn" class="button1">Calculate Penalty</a>
<a id="ticketreset" class="button1">Reset</a><br>
<br><br><br>
<div id="finebox">
</div>
<p id="demo"></p>
I am trying to get my variable I have saved to display on a table I have created on another page. I get the information from the user from a form, and have a button that is clicked and fires off to save the values into variables. My problem is that I can't change the inner html on the other page with the variable I have saved. I am using 1 js file and 2 html files. I can only use js/jquery, html, and css. here is my code:
loanpage.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Super Awesome Loan Guys</title>
<link rel="stylesheet" type="text/css" href="loanpage.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="loanpage.js"></script>
</head>
<body>
<div class="bg" id="text-center">
<div class="companytitle"><span class="dollar">$</span>uper Awe<span class="dollar">$</span>ome Loan Guy<span class="dollar">$</span></div>
<div>
<form action="infopage.html">
<h4>Loan Amount:</h4>
<input type="text" id="loanamount" name="loanamount"><br>
<input type="radio" id="12month" name="time">12 Months
<input type="radio" id="18month" name="time">18 Months
<input type="radio" id="24month" name="time">24 Months
<h4>Name:</h4><input id="namefield" type="text" name="firstlastname">
<h4>Phone:</h4><input id="phonefield" type="text" name="phonennumber">
<h4>Email:</h4><input id="emailfield" type="text" name="email">
<h4>Zip Code:</h4><input id="zipfield" type="text" name="zipcode"><br>
</form>
<button type="button">Submit</button>
</div>
</div>
</body>
</html>
infopage.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Super Awesome Loan Guys Loan Information</title>
<link rel="stylesheet" type="text/css" href="loanpage.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="loanpage.js"></script>
</head>
<body>
<div class="bg" id="text-center">
<h1>Here is the info you submitted!</h1>
<table>
<tr>
<th>Name</th>
<th>Phone Number</th>
<th>Email Address</th>
<th>Zip Code</th>
<th>Loan Amount</th>
<th>Loan Duration</th>
<th>Interest</th>
</tr>
<tr>
<td id="displayName">1</td>
<td id="displayPhone">1</td>
<td id="displayEmail">1</td>
<td id="displayZip">1</td>
<td id="displayAmount">1</td>
<td id="displayDuration">1</td>
<td id="displayInterest">1</td>
</tr>
</table>
</div>
</body>
</html>
loanpage.js
//js code
var name = "";
var phone="";
var email="";
var zip="";
var loan=0;
var loanrate=12.0;
var loanlen=0;
//Jquery code
$(document).ready(function (){
$("#submitbutton").click(function(){
loan = parseFloat($("#loanamount").val());
if ($("#12month").is(':checked')){
loanlen = 12;
}
else if ($("#18month").is(':checked')){
loanlen = 18;
}
else if ($("#24month").is(':checked')){
loanlen = 24;
}
name = $("#namefield").val();
phone = $("#phonefield").val();
email = $("#emailfield").val();
zip = $("#zipfield").val();
document.getElementById("displayName").innerHTML(name);
document.getElementById("displayPhone").innerHTML(phone);
document.getElementById("displayEmail").innerHTML(email);
document.getElementById("displayZip").innerHTML(zip);
document.getElementById("displayAmount").innerHTML(loan);
document.getElementById("displayDuration").innerHTML(loanlen);
document.getElementById("displayInterest").innerHTML(loanrate);
});
});
Local Storage is your best bet.
// Save data to the current local store
localStorage.setItem("username", "John");
// Access some stored data
alert( "username = " + localStorage.getItem("username"));
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
I have a basic table that I am creating from text input and when you click the "addTask" button it adds a tr with an empty text box and clicking the "delTask" button should delete the rows from the table that have checkboxes checked.
Everything works perfectly in JSFiddle (except the line to render last textbox readonly which only works outside of JSFiddle) but when I try to test the code out live the "delTask" button does not work correctly. It will delete all rows except the first one in the table.
I'm fairly new to JQuery so please don't judge if it's something simple but I have really searched for an answer and tried everything I could find. Can anyone help me figure out what is wrong here? Thanks in advance.
EDIT I have fixed the initial issue of the delTask button not working at all by changing $(":checkbox[checked='true']") to $(".checkbox:checked") when testing outside of JSFiddle but still cant get the button to delete the first row on the table in a live test.
JSFiddle link: http://jsfiddle.net/2aLfr794/14/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>
<body>
<table id="tasks" cellpadding="3" cellspacing="3" border="0">
<tr>
<td><input type="checkbox"></td>
<td><input type="text" class="text"></td>
</tr>
</table>
<br>
<input type="button" id="addTask" value="Add Task" />
<input type="button" id="delTask" value="Delete Tasks" />
<script>
$("#addTask").click(function(){
var newTxt = $('<tr><td><input type="checkbox"></td><td><input type="text" class="text"></td></tr>');
$(".text").last().prop("readonly", true);
$("#tasks").append(newTxt);
});
$("#delTask").click(function(){
$(".checkbox:checked").each(function(){
var curTask = $(this).parents('tr');
curTask.remove();
});
});
</script>
</body>
</html>
Your Issues:
1.You are not assigning class checkbox to default checkbox and dynamically created checkboxes.
2.To access a checked element the syntax is $(".checkbox[checked='checked']")
Your Updated Code:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<body>
<table id="tasks" cellpadding="3" cellspacing="3" border="0">
<tr>
<td>
<input type="checkbox" class="checkbox">
</td>
<td>
<input type="text" class="text">
</td>
</tr>
</table>
<br />
<input type="button" id="addTask" value="Add Task" class="addSubmit" />
<input type="button" id="delTask" value="Delete Selected Tasks" />
<script>
$("#addTask").click(function() {
var newTxt = $('<tr><td><input type="checkbox" class="checkbox"></td><td><input type="text" class="text"></td></tr>');
$(".text").last().prop("readonly", true);
$("#tasks").append(newTxt);
});
$(document).ready(function() {
$("#delTask").click(function() {
console.log($(".checkbox[checked='checked']"))
$(".checkbox:checked").each(function() {
var curTask = $(this).parents('tr');
curTask.remove();
});
});
});
</script>
</body>
if you get "$ is not defined" error, try writing
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> as <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
Note the "http:" before "//cdnjs" which is needed when you are running those from local machine, and not a webserver. At least it was always required for me.
$("input[type=checkbox]:checked")
worked for me
I Write This code For Registration of a User. Now I want to Validate this Page Whether all the Fields are Filled by the user or Not. The Same Script Code I Write to Login page It's Showing an alert if any one filed empty in the page. But it is not working for this Page.
The Main Difference is i Used Div in Login Page here I Used Table.
Registration Page Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/Registration.css">
<script>
function validateForm()
{
var a=document.forms["regform"]["user"].value;
var b=document.forms["regform"]["pass"].value;
var c=document.forms["regform"]["copa"].value;
var d=document.forms["regform"]["mono"].value;
if(a==""||b==""||c=""||d="")
{
alert("Please Enter All the Fields");
return false;
}
else
{
window.location="afterregister.html"
//alert("Registered Successfully");
}
}
</script>
</head>
<body>
<h1>Registration</h1>
<form name="regform" onsubmit="return validateForm();" method="post">
<table>
<tr>
<td><label>Username:</label></td>
<td><input type="text" name="user"/></td>
</tr>
<tr>
<td><label>Password:</label></td>
<td><input type="text" name="pass"/></td>
</tr>
<tr>
<td><label>Confirm Password:</label></td>
<td><input type="text" name="copa"/></td>
</tr>
<tr>
<td><label>Mobile Number:</label></td>
<td><input type="text" name="mono"/></td>
</tr>
<tr>
<td></td>
<td><input type="button" onclick = "return validateForm()" value="Register" name="" class="row1" />
<input type="button" name="" value="Cancel" class="row1"></td>
</tr>
<tr>
<td></td>
<td><input type="button" name="" value="Forgot Password" class="row2"></td>
</tr>
</table>
</form>
</body>
</html>
Login Page Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/Login.css">
<script>
function myFunction()
{
var x=document.forms["loginform"]["user"].value;
var y=document.forms["loginform"]["pass"].value;
if(x==""||y=="")
{
alert("Please Enter All the Fields");
return false;
}
else
{
window.location="afterLogin.html"
}
}
</script>
</head>
<div></div>
<body>
<h1></h1>
<form name="loginform" onsubmit="return myFunction();" method="post">
<div class="username"><label>Username:</label><input type="text" name="user"/></div>
<div class="password"><label>Password:</label><input type="text" name="pass"/></div>
<div class="buttons"><input type="button" onclick = "return myFunction()" value="Login" name=""/> <input type="button" value="Cancel" name=""/></div>
</form>
</body>
You are already calling the validation function on your form submit onsubmit="return myFunction();". So there isn't any need to call it again on your button click. So please change
<input type="button" onclick = "return validateForm()" value="Register" name="" class="row1" />
to
<input type="submit" value="Register" name="" class="row1" />
And do this in your script
<script>
function validateForm()
{
var a=document.forms["regform"]["user"].value;
var b=document.forms["regform"]["pass"].value;
var c=document.forms["regform"]["copa"].value;
var d=document.forms["regform"]["mono"].value;
if(a===""||b===""||c===""||d==="")
{
alert("Please Enter All the Fields");
return false;
}
else
{
window.location="afterregister.html"
//alert("Registered Successfully");
}
}
</script>
Solution:
Do the following 2 steps:
1- First close your <input> tags as either of the following method:
i. <input type = "textbox" name = "name" /> <!-- This is suggested -->
OR
ii. <input type = "textbox" name = "name"></input>
2- Go through these 2 useful links - it will guide you through what you exactly need:
Form Validation Tutorial - 1
Form Validation Tutorial - 2
I am trying to make this code work, I want the innerHTML to be changed but It's instantly changing and gets back to its initial state . Any help ?
<!DOCTYPE html>
<html>
<head>
<script>
function click_me(){
alert('fdsfs');
var tweety=document.getElementById('text_this').innerHTML;
alert(tweety);
var text_area="<input type=text value='"+tweety+"'>";
alert(text_area);
document.getElementById('text_this').innerHTML=text_area;
}
</script>
</head>
<body>
<form name="form1">
<table border=1>
<tr>
<td>
<div id="text_this">123</div>
</td>
<td>
<button onclick="click_me();">Edit</button>
</td>
</tr>
</body>
</html>
Your form is getting submitted. Add a return false; to your button onclick event.
<button onclick="click_me(); return false;">Edit</button>
Or, make the button type='button' (This is the better option)
<button onclick="click_me();" type='button'>Edit</button>
The reason is because the button type is submit by default if a type is not specified.
From MDN,
submit: The button submits the form data to the server. This is the
default if the attribute is not specified, or if the attribute is
dynamically changed to an empty or invalid value.
<!DOCTYPE html>
<html>
<head>
<script>
function click_me(){
alert('fdsfs');
var tweety=document.getElementById('text_this').innerHTML;
alert(tweety);
var text_area="<input type=text value='"+tweety+"'>";
alert(text_area);
document.getElementById('text_this').innerHTML=text_area;
}
</script>
</head>
<body>
<form name="form1">
<table border=1>
<tr>
<td><div id="text_this">123</div></td>
<td><button onclick="click_me();return false;">Edit</button></td>
</tr>
</table>
</form>
</body>
</html>
added a return false statement to the onclick event. without it, the form gets submitted and the page reloads
jsfiddle here