Set fallback value to display on page if URL parameter is blank - html

I would like to populate a first name in the header of a webpage using a URL parameter. So if the URL is domain.com?name=Steve, the header would read: Hi there, Steve! I have the the below code working for that:
<html>
<body>
Hi there <span id="name"></span>!
</body>
</html>
<script>
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const name = urlParams.get('name');
document.getElementById("name").innerHTML = name;
</script>
How do I add a fallback value, say, "Hi there, Friend!", if the URL parameter is blank or missing altogether?
Thank you!
I've been unable to find a solution which works.

I believe you can make either the name variable itself dependent on the URL parameter being not "null" or blank, or set the innerHTML based on the same.
For example:
const name = urlParams.get('name') !== null ? urlParams.get('name') : 'Friend';
// OR
document.getElementById("name").innerHTML = name !== null ? name : 'Friend';

Related

How to get elements from javascript file and put them into HTML elements

So I'm very new to HTML and I was trying to take an txt output file, convert it into usable data, and input that data into HTML, changing various attribute values, like title and innerHTML
As an example, I was trying to use document.GetElementById("vars").search to reference the sequence of dna stored in search and set it to some button's title, but it wound up being undefined.
I'm really just confused on how to use variables, and if you have any idea as to what format I should make the file of data input for the HTML please share!
<script id = "vars" type = "text/javascript">
var seqId = "Chr23";
var search = "CCATGCGAATGCTGATATCGTAGCAAAAACACAGGGACGGTGCGAAAGAAGAGGGATTTTATTTTGTTTTCGCCTGGCAATTGAGTAATGGCCGGACTCCTTCACCTGACCAAGCAGTGCAGCATCCACCTACCCGCCCACTTGGGACGCGCGAAATGCTACACACTCGCTAAGGGACCGGGAACACACGTGCAGGCAAGAGTG";
</script>
As 'search' variable is a long string, you'd better use 'p' tag instead of 'button' tag.
try this:
var seqId = "Chr23";
var search = "CCATGCGAATGCTGATATCGTAGCAAAAACACAGGGACGGTGCGAAAGAAGAGGGATTTTATTTTGTTTTCGCCTGGCAATTGAGTAATGGCCGGACTCCTTCACCTGACCAAGCAGTGCAGCATCCACCTACCCGCCCACTTGGGACGCGCGAAATGCTACACACTCGCTAAGGGACCGGGAACACACGTGCAGGCAAGAGTG";
document.getElementById("p1").innerHTML=search;
<p id="p1">SearchContent</p>
`
Here's a rough example based on the
const seqId = "Chr23";
const search = "CCATGCGAATGCTGATATCGTAGCAAAAACACAGGGACGGTGCGAAAGAAGAGGGATTTTATTTTGTTTTCGCCTGGCAATTGAGTAATGGCCGGACTCCTTCACCTGACCAAGCAGTGCAGCATCCACCTACCCGCCCACTTGGGACGCGCGAAATGCTACACACTCGCTAAGGGACCGGGAACACACGTGCAGGCAAGAGTG";
document.onreadystatechange = function() {
if (document.readyState == "interactive") {
document.getElementById('myButton').innerHTML = search;
}
}
<button id="myButton">MyButtonTitle</button>
data in your question.

date send error in location.href in jsp

first i ran intro_do.jsp using form action in intro.jsp including value 'ID','password'. and where in intro_do.jsp, compare value in database using while&if like that.
case 2 :
pstmt = conn.prepareStatement(sql2); rs = pstmt.executeQuery(); while (rs.next()) {
if (stid.equals(rs.getString("Student ID"))) {
if (password.equals(rs.getString("password"))) {
String myname = rs.getString("name");
%>
<script>
alert('login success');
//location.href="student.jsp?param="+;
location.href = "student.jsp+param=" + <%=myname%>;
//location.href = "student.jsp";
</script>
<%
break;
}
}
}
%><script>
alert('fail');
location.href = "intro.jsp";
</script>
<%
break;
i dont know why this fail?!
it's not good practice to combine java code and script. use ajax or form submission to the servlet. OR set the value in any of the fields of form. retrieve it in js and do the operation.
Of corse, you obviously should specify which error you have found when executing your example. Anyway, I'd dare to guess that the error arises in the javascript scriptlet: You've mistaken the scripting scope of the myname variable. It should go like this:
location.href = "student.jsp?param=<%=myname%>";
... because the JSP variables are resolved in the first place in the server side, so the HTML page delivered to the browser will be like this:
location.href = "student.jsp?param=joe";
Another important detail in this line is that myname is assumed not to contain blank characters. Or else, you should escape it first:
location.href = "student.jsp?param=<%=URLEncoder.encode(myname,"UTF-8")%>";

How to set parameter and its value to HREF dynamic using javascript

I have a link like following
<a id="dynamicLink" href="http://www.w3schools.com?userName=test">Visit W3Schools</a>
I would like to change the value of userName from test to test1.
How to do that using javascript?
could someone help me on this?
I suggest using a library to work with URIs. It will provide some consistency. Here is an example using URI.js:
// Get our <a> element
var l = document.getElementById('dynamicLink');
// Use URI.js to work with the URI
// http://medialize.github.io/URI.js/
var uri = URI(l.href);
// Get the query string as an object
var qs = uri.query(true);
// Change our value
qs.userName = 'test1'
// Update the URI object
uri.query(qs);
// Set our new HREF on the <a> element
l.href = uri;
<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.15.2/URI.min.js"></script>
<a id="dynamicLink" href="http://www.w3schools.com?userName=test&someOtherKey=val">Visit W3Schools</a>
Try this:
document.getElementById("dynamicLink").href.replace("userName", "test1");
This should change the value of userName in href to test1

sending , retrieving data from designer of pages using query string of URL

I have a iframe in aspx page whose src property is set to html page url along with data is sent syntax is as follows :
<iframe src="testing.htm?info1='Hello'"></iframe>
and on html page in onload of Body tag i have called a function that will read from the query string and assign data to a text box. Code is as follows:
var info;
function _Form_Loader() {
try {
debugger;
Info = request.QueryString('info1'); // input is the textbox.
var Txt = $("#Input1");
Txt.Text = Info ;
} catch (e) {
}
}
What is wrong here i suppose query string is the problem .
thanks in advance.
You are assiging src to that textbox but where u are assigining for that
I think u need to pass Txt.Text = Info; or just try $("#Input1").val(Info);
Try this ...

JSON results into a variable and store in hidden input field

I wrote code below that is working perfectly for displaying the results of my sales tax calculation into a span tag. But, I am not understanding how to change the "total" value into a variable that I can work with.
<script type="text/javascript">
function doStateTax(){
var grandtotalX = $('#GRANDtotalprice').val();
var statetaxX = $('#ddl').val();
$.post('statetax.php',
{statetaxX:statetaxX, grandtotalX:grandtotalX},
function(data) {
data = $.parseJSON(data);
$('.products-placeholder').html(data.products);
$('.statetax-placeholder').html(data.statetax);
$('.total-placeholder').html(data.total);
// ...
});
return false;
};
</script>
Currently, $('.total-placeholder').html(data.total); is successfully placing the total number into here:
<span class="total-placeholder"></span>
but how would I make the (data.total) part become a variable? With help figuring this out, I can pass that variable into a hidden input field as a "value" and successfully give a proper total to Authorize.net
I tried this and id didn't work (see the testtotal part to see what I'm trying to accomplish)..
function(data) {
data = $.parseJSON(data);
$('.products-placeholder').html(data.products);
$('.statetax-placeholder').html(data.statetax);
$('.total-placeholder').html(data.total);
$testtotal = (data.total);
// ...
If you are using a hidden field inside a form, you could do:
//inside $.post -> success handler.
$('.total-placeholder').html(data.total);
$('input[name=yourHiddenFieldName]', yourForm).val(data.total);
This will now be submitted along with the usual submit. Or if you want to access the data elsewhere:
var dataValue = $('input[name=yourHiddenFieldName]', yourForm).val();
The "data" object you are calling can be used anywhere within the scope after you have a success call. Like this:
$.post('statetax.php',
{statetaxX:statetaxX, grandtotalX:grandtotalX},
function(data) {
data = $.parseJSON(data);
var total = data.total;
var tax = data.total * 0.19;
});
return false;
};
Whenever you get an object back always try to see with an alert() or console.log() what it is.
alert(data); // This would return <object> or <undefined> or <a_value> etc.
After that try to delve deeper (when not "undefined").
alert(data.total); // <a_value>?
If you want 'testotal' to be recognized outside the function scope, you need to define it outside the function, and then you can use it somewhere else:
var $testtotal;
function(data) {
data = $.parseJSON(data);
$('.products-placeholder').html(data.products);
$('.statetax-placeholder').html(data.statetax);
$('.total-placeholder').html(data.total);
$testtotal = (data.total);
EDIT:
The comments are becoming too long so i'll try and explain here:
variables defined in javascript cannot be accessed by PHP and vice versa, the only way PHP would know about your javascript variable is if you pass it that variable in an HTTP request (regular or ajax).
So if you want to pass the $testtotal variable to php you need to make an ajax request(or plain old HTTP request) and send the variable to the php script and then use $_GET/$_POST to retrieve it.
Hope that answers your question, if not then please edit your question so it'll be clearer.