I have two page, the index.html and print.html
on my index.html page there is a calculator and i have a button called print that is located on index.html
when you click PRINT button, it would go to print.html. My problem is does not send the input value I made on index.html.
Note: This work if I dont go to print.html. the value shows up, but if set it on another page, the value does show up
PRINT.HTML
$(document).ready(function() {
$('#print_modal').click(function() {
e.preventDefault();
var rec_product = $('#rec_product').val();
var calc_height = $('#calc_height').val();
var calc_width = $('#calc_width').val();
var calc_depth = $('#calc_depth').val();
$('#srec_product').text(rec_product);
$('#sheight').text(calc_height);
$('#swidth').text(calc_width);
$('#sdepth').text(calc_depth);
window.print();
return false;
window.location.href = "print.html";
window.open(url, '_blank');
});
$("#print_modal").click(function(e) {
e.preventDefault();
var value = //get input value
$.get( "print.html", {"value":value});
});
this jQuery code will direct you to print.html?value=12(where 12 is your value).
You can then use PHP in print.html to retrieve the value ($_GET['value'])
You can use
window.location = '/print.html?rec_product='+$("#rec_product").val()+'&calc_height='+$("#calc_height").val();
for loading your print.html in same window tab.
If you are sending multiple parameter use following code to get value on print.html:
<script type="text/javascript">
load();
function load()
{
window.location.search.replace ( "?", "" ).split("&")
.forEach(function (item) {
var tmp = item.split("=");
document.getElementById(""+tmp[0]).value=tmp[1];
});
}
</script>
If you want to do it via jquery then use
$("#"+tmp[0]).val(tmp[1]);
insted of:
document.getElementById(""+tmp[0]).value=tmp[1];
You must have same name input type fields as send in parameter.
You can also use load function code in your
$( document ).ready(function() {
});
on print.html.
Related
I am trying to pass data from an input field on one page to an input field on a second page.
Using localStorage I am able to get the data and then output it as an alert on the target page.
<script>
function setValue() {
var parseAmount = document.getElementById("amount").value;
localStorage.setItem("amountKey", parseAmount);
}
</script>
However, I need the stored data to populate this input field:
<input type="number" class="" id="demo2" value="3000"/>
My best effort so far is:
<script>
function getValue() {
var parseAmount2 = localStorage.getItem("amountKey");
document.getElementById("demo2").value = parseAmount2;
}
</script>
Any help would be greatly appreciated!
Items from localStorage are defined as strig, your input is defined as number, try parseInt (and do you invoke getValue()?):
function getValue() {
var parseAmount2 = localStorage.getItem("amountKey");
document.getElementById("demo2").value = parseInt(parseAmount2);
}
getValue();
Once the content on the page loads, you can load the value into the page.
/* modern browsers - will execute code once all elements are loaded onto the client */
window.addEventListener('DOMContentLoaded', (event) => {
// content is loaded, load the value from storage
getValue(); // call the function to perform
});
function getValue() {
var parseAmount2 = localStorage.getItem("amountKey");
document.getElementById("demo2").value = parseAmount2;
}
https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event
I have two scripts, first of them clicks on the button and after that browser opens a new window, where i should click on the other button by the second script, is it possible to run them both at the same time, I mean like unite those scripts together?
function run() {
var confirmBtn = document.querySelector(".selector,anotherSelector ");
}
after this new window appears and here`s the second part of my script
var rooms = document.querySelectorAll(" .btn-a-offers");
console.log(rooms);
for (var room = 0; room < rooms.length; room++) {
rooms[room].click();
}
var prices = document.querySelectorAll(" .li-right-side>strong");
console.log(prices);
for (var price = 0; price < price.length; price++) {
}
var prices = [];
document.querySelectorAll(".new-pa-hotelsoffers .li-right-side > strong").forEach(function(price) {
prices.push(parseFloat(price.innerHTML.replace(/[^0-9.]/g, "")))
})
console.log(
Math.min(...prices).toFixed(2)
)
My English is not that good so I want to be sure that I explained everything right, second script must be executed in the new window, that opens after first script
Depending on the logical dependancy of your application and the use of the functions, you could execute the second function in a document.ready function on the second page.
Example:
<script>
//jQuery
$( document ).ready(function() {
secondFunction();
});
//Pure JS
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
r(function() {
secondFunction();
});
</script>
However, if the page is to act independantly, and the second function is only to respond upon the execution of the first function, then that solution would not be the one you are looking for.
In the case where the function has to act entirely dependant on the use of the first function you could parse a value in the URL (better known as a GET variable) and check if that value is set.
Example:
<script>
functionOne() {
window.location.href = '/your_page.php?click=1';
}
</script>
Then on your second page you need to retrieve the GET variable.
<?php
$clicked = $_GET['click'];
?>
You can then perform a check to see if the variable has been set and fire your function upon that logic.
<?php
if($clicked != "") {
echo '
<script>
functionTwo();
</script>';
}
?>
Another way of doing it could be by the use of AJAX and have the other function execute in the AJAX' success function. That way you can eliminate the use of the GET variable, which is visible in the URL.
Example:
<script>
functionOne() {
$.ajax({
type : "POST", //or GET
url : "/your_page.php",
data : {
//parse your POST variable data if any
// variable : value,
// anotherVairable : anotherValue
// [....]
},
success: function (html) {
//Success handling
secondFunction();
}
})
}
</script>
Note that the AJAX used in the example is jQuery AJAX, so if you want to use some AJAX logic involving this structure, you'll need to include a jQuery library.
You should pass some parameter in the URL query like this:
// first-script.js
openNewWindow('http://example.com?run-second-script=1') // openNewWindow is fake function, just for demo
// second-script.js
if (window.location.search.includes('run-second-script=1')) { ... your code here ...}
I'have and AJAX post request:
$(document).ready(function() {
$("span").click(function(e) {
e.preventDefault();
e.stopPropagation();
var URL = "someURL";
$.post(URL, this.id, function(data, status) {
var val = parseInt(document.getElementById(this.data).innerHTML)
document.getElementById(id).innerHTML = val + 1 ;
document.getElementById(id).disabled=true;
});
});
});
Read
<span id="${book.id}">
This script is working as expected; a button with number in it increase by one.
The problems are:
A refresh of the page occurs. On button click it reloads all on the page.
I'm not able to disable the button after the change
In short I need a count button which increase by 1 and can be changed once per user.
Update It seems that reload it's related to another function defined as
$(document).ready(function() {
So i have one in the body and one in the head.
Of course it refreshes the page, you're sending it a link to go to via href. Instead, remove the href, and put an onclick event and handler. Replace your anchor tag, with this:
<a onclick="runFunction()">Read</a>
And replace your script, with this.
<script>
function runFunction(){
$(document).ready(function(){
$("span").click(function(e){
e.preventDefault();
e.stopPropagation();
var URL="someURL";
$.post(URL,
this.id,
function(data,status){
var val = parseInt(document.getElementById(this.data).innerHTML)
document.getElementById(id).innerHTML = val + 1 ;
document.getElementById(id).disabled=true;
});
});
});
}
</script>
I have to refresh view page without clicking on refresh button.
Javascript code:--
<script type="text/javascript">
$(function () {
var metaId = $("#ID").val();
var img = $("##name input[type=hidden]").val();
if ("#found" == "False") {
$.post(rootURL + "Picture/AddThumb", { guidOrName: img, meta: metaId, id: contentId }, function (data) {
//arrangePoster([data]);
});
}
});
</script>
Post sometimes doesn't work.
It is better to use ajax jquery method.
http://api.jquery.com/jquery.ajax/
Then on Picture/AddThumb add printing parameters.
Use done to show data resulted ( to test also if it works correctly )
I'm trying to insert a form field into a popup page. For some reason the form field doesn't get inserted. Any pointers. Pasted below is the code:
$(".ddlAddListinTo li").click(function () {
var urlstring = "../ActionTypes";
var ddlselectedVal = $(this).attr('id');
var $form = $("#frmPostToEmailReports");
var AgentId = $form.find("#AgentId").val();
var ReportName = $form.find("#ReportName").val();
var Params = $form.find("#Params").val();
if (ddlselectedVal != "None" && ddlselectedVal != "select") {
$.post(urlstring, { AgentId: AgentId, ReportName: ReportName, Params: Params },
function (data) {
window.open(urlstring);
$("#divfrmInfo").append($form);
});
} });
HTML for my popup window :
<html>
<head></head>
<body>
<h2>AddToCart</h2>
<form name="frmContact">
<div>
<div class="CartHeader">
<ul>
<li>
<span class="CartImage"></span>
<span class="Title">To Add Listing(s) to Cart</span>
<span class="SubTitle">Select your personal cart or add listings to a contact</span>
</li>
</ul>
</div>
**<div id="divfrmInfo"></div>**
</div>
</form>
</body></html>
Looking at it some more you could do something like this, in opener document.
$(".ddlAddListinTo li").click(function () {
...
function (data) {
$(window.open(urlstring)).load ( function() {
// Here "this" will be the window.
$(this.document).find("#divfrmInfo").append($form.clone())
});
}
This way you attach to load event for popup by jQuery.
Have a look at .clone() for the append part. If it is not cloned it will be "ripped" from your main document and placed inside the popup.
Old answer:
...
Here is a fiddle (With fixed typo/formatting).
Next problem is in your script you say:
$(".ddlAddListinTo li").click
However, there are no elements in DOM with class ddlAddListinTo.
OK, by comment:
after window.open(urlstring); you are still in DOM of document from where you opened the window. As such:
$("#divfrmInfo")
will look for an element in original document with that ID, not in the popup.
If you add something like this in the popup document*:
$(window).load(function() {
// Call function "fill()" in opener.
window.opener.fill(document);
});
And this in your opener document:
function fill(what) {
// Here "what" is document of popup.
what.getElementById("divfrmInfo").innerHTML = "TEST";
}
I think the selector in your AJAX callback is unable to get DOM elements in the popup. Try this:
var tmpWin = window.open(urlstring);
$(tmpWin.document).find("#divfrmInfo").append($form);
THe problem is you are tring to aceess the DOM of the spawned page before it is there. The window is loaded but the HTML is still being loaded at the time you are trying to access it. You will need to change the parent and popup page. On the parent page you will need a function to return what you want to populate the pop up with. On the popup page you will want to call the function on the parent page when the DOM is ready.
Something like:
Parent Page
//Add this OUTSIDE your document ready
function getContent(){
return $("#frmPostToEmailReports");
}
Popup
//Include Jquery in your prefered way
<script>
$(document).ready(function () {
$("#divfrmInfo").append(window.opener.getContent());
});
</script>
Alos make sure to remove where you attempt to pupulate in the success function. Also see: How to get element and html from window.open js function with jquery
Previous Useless Answer Below
See this answer to get you started.
Instance you will want something like:
$(".ddlAddListinTo li").click(function () {
var urlstring = "../ActionTypes";
var ddlselectedVal = $(this).attr('id');
var $form = $("#frmPostToEmailReports");
var AgentId = $form.find("#AgentId").val();
var ReportName = $form.find("#ReportName").val();
var Params = $form.find("#Params").val();
if (ddlselectedVal != "None" && ddlselectedVal != "select") {
$.post(urlstring, { AgentId: AgentId, ReportName: ReportName, Params: Params },
function (data) {
var popup = window.open(urlstring);
popup.document.$("#divfrmInfo").append($form);
});
} });