Guide to creating a new browser tab in Java Script with customizable parameters

Here is a function I created to open a new window with a specific URL and pass certain parameters.

 function viewWeightAge() {
            var userNIC = document.getElementById("NICNo");
            var childName = document.getElementById("childName");
            window.location.href = "https://localhost:8080/KiddieCare/AdminPanel/WeightAgeGraph.jsp?childName="+childName+"&userNIC="+userNIC;
         
        }

Could somebody help me identify the error in this code?

Updated Question:

function showWeightAge(){
    var userNIC = document.getElementById("NICNo");
            var childName = document.getElementById("childName");
            var parameters= userNIC,childName;
            window.open ('https://localhost:8080/KiddieCare/AdminPanel/WeightAgeGraph.jsp','Window Name',parameters);
}

I have attempted to open a new window with the function above. It should look like thishttps://i.sstatic.net/bbLEu.png


By using window.open(), I am able to open a new window, but I am struggling to pass parameters to the new JSP file.
javascript

Answer №1

It's better to utilize window.open() instead of using window.location.href to modify the current window's URL

For more information on window.open(), visit https://www.w3schools.com/jsref/met_win_open.asp

Be aware that this action may trigger a popup blocker

For your specific scenario, you can implement it as follows:

function viewWeightAge() {
     const userNIC = document.getElementById("NICNo");
     const childName = document.getElementById("childName");
     window.open("https://localhost:8080/KiddieCare/AdminPanel/WeightAgeGraph.jsp?childName="+childName+"&userNIC="+userNIC);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjusting Javascript code to launch a URL in a new window or new tab depending on the user's selection

I seem to be encountering a puzzling issue with a link on my website. When clicked normally, the link opens in a new window. However, if I right-click and select "open in new window" or "open in new tab," it just reloads the same page where the link was cl ...

javascripturl

Transferring data from AJAX to PHP class methods

Q. Is it feasible to transfer data from ajax to a specific php class with functions? For instance, verifying a username on the registration form to check if the user already exists. This form is straightforward and will gather a username input along with ...

javascriptphpjqueryhtmlajax

npm installs a multitude of dependencies

Recently, I purchased an HTML template that includes various plugins stored in a directory named bower_components, along with a package.js file. While trying to add a new package that caught my interest, I opted to utilize npm for the task. Upon entering ...

javascriptcssnode.jsnpmpackage

JavaScript table search feature for novices - finding results

I am relatively new to this, but I am working on improving the workflow within my company. I found some code at this link in order to create an internal site for searching current part numbers. However, my employees are looking for parts based on descripti ...

javascriptsearchhtml-tablematch

Error: The selector "html" is not considered pure as it does not contain any local class or id. Pure selectors must include at least one local class or id

When working on my Next.js project, I included the following code in _app.js: import '../src/styles/style.module.scss'; import '../src/styles/main.module.scss'; This is the content of main.module.scss: // ./src/styles/main.module.scss ...

javascriptcssnext.js

How can I update a CSS class value by utilizing AngularJS variables?

I am currently facing an issue with making my CSS values dynamic. The code I have tried is not functioning as expected. <style> .panel-primary { background-color:{{myColorPanel}} } </style> I came across a similar query on Ho ...

javascripthtmlcssangularjs

The functionality of my website is currently experiencing difficulties when accessed through the Android UC Browser

My website, , is experiencing issues with product loading and the '+' button in the side menu not working on UC Browser. It works fine on other Android browsers like Chrome and Firefox, but I am confused as to why it is not functioning properly o ...

javascriptjqueryhtmlcssuc-browser

Connect Promise.all() with an array of identification numbers

I'm fairly new to working with Promises and I have a question regarding linking the results of `Promises.all()` to unique IDs for each promise once they resolve. Currently, I am making requests to a remote server and retrieving data for each request. ...

javascriptnode.jsexpress

What is the best way to elevate a child component's state to the parent component in order to pass it down as props?

Currently, I am utilizing react-dnd and most of their internal functions require the component parameter in order to determine various aspects of the component. For instance, Component allows us to reference the component itself, enabling actions such as g ...

javascriptreactjsreact-dnd

The integration of query, URL, and body parameters is not working as expected in Seneca when using Seneca

I'm facing some difficulties with Seneca and seneca-web as a beginner. This is the current state of my code: "use strict"; var express = require('express'); var Web = require("seneca-web"); var bodyParser = require('body-parser' ...

javascriptnode.jsexpressseneca

Opencart: The Key to Your Website's Success

Quick question - I have a Java snippet that needs to be added to my OpenCart checkout page before the closing </body> tag. However, I cannot locate the </body> tag in the checkout.tpl file of OpenCart. Can anyone guide me on where to find thi ...

javascripttagsopencartdocument-body

I encountered a problem in Javascript where I was unable to get the video.getCurrentTime() function to display the current time of

While everything else in my code is running smoothly with setInterval, there seems to be an issue with video.getCurrentTime() not displaying in the div id = "test" when the video is playing. I've been trying to figure out why this is happening. Here&a ...

javascripthtml

What is the process for adding new data to a data source without overwriting existing information?

I need assistance with a react native app I am developing. I am currently facing an issue where the data received from a fetch request needs to be displayed in a list view. However, each time new data is fetched, it overwrites the previously received data ...

javascriptreactjsreact-native

Recognize different HTML components when an event occurs

My application is equipped with a multitude of buttons, inputs, and other elements that trigger different events. I am looking for a way to easily differentiate between each element and the event it triggers. For instance, consider the following snippet f ...

javascripthtmlangularjs

Display identical text using JavaScript filter

My search filter highlight is currently displaying [object Object] instead of <mark>match values</mark> when replacing the values. This is the code I am using: this.countries.response.filter((val) => { const position = val.value.toLowerCa ...

javascripthtmltypescriptstenciljs

Issues with conditional statements not properly executing in ASP.NET when using onclick and onselect functions

I've been stuck on this issue for over a day now and can't seem to figure out why my code isn't working. I'm creating a web page in ASP.NET and trying to implement a text box with gray placeholder text that changes to black when clicked ...

javascriptasp.netif-statementonclickonselect

AJAX request made to a specific local directory, instead of the usual localhost

Currently, I am working on a project to create a database that can be filtered using various options. My approach was to keep it simple by using HTML for sliders and checkboxes, along with JavaScript/jQuery for filtering the results. This setup allows me t ...

javascriptjqueryajax

use a jQuery function to submit a form

I have an HTML page with a form, and I want to display a specific div when the form is successfully submitted. The div code is as follows: <div class="response" style="display: none;"> <p>You can download it <a href="{{ link }}">here&l ...

javascriptjqueryhtmlajaxdjango

Integrating Express into a React Webpack project

I am currently in the process of integrating express into my React project to establish connections with databases for storing form data. As of now, I am using webpack to create a dev server that displays my React view. My technology stack includes... Web ...

javascriptnode.jsreactjsexpresswebpack

Employing live labels on a Morris Bar Chart

I'm using the Morris Bar Chart to showcase the sales of different products. To enhance user experience, I want to display dynamic labels when hovering over the bars. The data is being fetched through PHP. array('product' => $row['pr ...

javascriptphpjquerymorris.js