We Keep Coding

How could I insert a function that allows the user to determine the URL depending on what they entered into a search box

I'm currently building something for work and I have 2 text field boxes where the user can input some text and then a "View Report" Button
What I wish to have is when the button is clicked the user is redirected to a url that looks a bit like this
http://example.com/reports/example/reports/TEXTFIELD1/reports/example/TEXTFIELD2/reports.aspx
So that the URL stays the same with the exception of the two bits that the user enters to determine the url
I have had something similar before where I had an onclick java function that took users to http://example.com/TEXTFIELD1 but I'm not sure whether this is transferable to my current issue as I have multiple parts of the url I wish to edit and are buried in a long url
All help appreciated and I hope I have explained this clearly enough if not please let me know and i will try and provide more context

You can use Template literals to create your link or simply use "+".
document.location.href = `http://example.com/reports/example/reports/${TEXTFIELD1}/reports/example/${TEXTFIELD2}/reports.aspx`
or
document.location.href = "http://example.com/reports/example/reports/" + TEXTFIELD1 + "/reports/example/" + TEXTFIELD2 + "/reports.aspx"
where TEXTFIELD1 and TEXTFIELD2 are values from your text fields.

Looking at your pen I saw some problems, which caused your code to fail.
I'll give my best to explain why.
var fieldOne = document.getElementById(‘field-one’).innerHTML
var fieldTwo = document.getElementById(‘field-Two’).innerHTML
let button = document.getElementById('button');
button.addEventListener('click', () => {
window.location.href = ‘www.website.com/reports/‘ + fieldOne + ‘/reports/‘ + fieldTwo + ‘/reports.aspx’
});
So first of all you can not use those ‘ quotation marks in JS. Use one of these ' " `.
The 2nd problem you're facing is that you're getting the field values wrong in 2 ways. To get the value of an input field, you have to use .value instead of .innerHTML.
The other problem is that you're getting the value of the input field when the document is ready -> so they are always empty.
Additionally you wrote field-Two, which should be field-two (JS is case-sensitive)
Apart from these mistakes, your code should work. So let me rewrite it:
let button = document.getElementById('button');
button.addEventListener('click', () => {
var fieldOne = document.getElementById('field-one').value
var fieldTwo = document.getElementById('field-two').value
var url = `www.website.com/reports/${fieldOne}/reports/${fieldTwo}/reports.aspx`;
// or
var url = 'www.website.com/reports/'+ fieldOne +'/reports/'+ fieldTwo +'/reports.aspx';
window.location.href = url;
});
As you can see, I save the URL in a variable. That's not necessary, but I prefer to do it for the simplicity of the code. There are also 2 different ways of declaring it. Both work, it's your choice what you prefer (note the different quotation marks wheter you use template literals or not)

Making a variable I can manipulate further

I'm relatively new to jQuery and need to perform some transformations on the following working code:
jQuery('#vari_1').click(function() {
var selected = [];
jQuery('#cartsnitch')
.addClass('new')
.html(jQuery('#vari_1')
.find('input[type="radio"]:checked')
.val())
.fadeIn('5000');
})
The code returns the value of a radio button clicked in a tab id of #vari_1.
The problem is I then need to replace hyphens of the radio button value with spaces (duck-egg-blue to duck egg blue) and prepend an h2 heading. Chaining these appears to break my code.
I instead tried the below to make it into a variable so I can work with that on a new line, but couldn't get it to work. Can someone point me in the right direction please?
jQuery('#vari_1').click(function() {
var selected = [];
var cart1 = jQuery('#cartsnitch')
.addClass('new')
.html(jQuery('#vari_1')
.find('input[type="radio"]:checked')
.val())
.fadeIn('5000');
var cart2 = ('<h2>My heading</h2>') + cart1;
return cart2;
})
It's driving me nuts! Thanks in advance.

It sure can seem daunting Utkanos, I'm yet to get a straight answer to a question after being a member for a good few years. All I seem to attract is ambiguity and politician style question dodging!
Anyway due to lack of a hint other than Ashkay's syntax error spot (not in my code sorry), I fixed it as such:
jQuery('#vari_1').click(function() {
var selected = [];
jQuery('#cartsnitch').addClass('new')
.html(jQuery('#vari_1')
.find('input[type="radio"]:checked')
.val().replace("-"," "))
.prepend('<div class="mystyle"><small>My Label:</small><br />')
.append('</div>')
.fadeIn('5000');
})
val().replace() prepend() and append() were all I was after.
Thanks for the reassurance anyway!

Can't use document.getElementById().innerHTML to rewrite the original html

I am tring to add some content after the original content, but the new content will cover the original content everytime...What wrong in this case? (Sorry for my terrible english...)
var originaltext = document.getElementById("id").innerHTML;
document.getElementById("id").innerHTML = originaltext + "newtext";
One more thing,I tried to use alert to show the "originalltext", but it have nothing to show.
alert(originaltext);

your code looks ok to me. I made a jsfiddle for you just to see that it works http://jsfiddle.net/3mqsLweo/
var myElement = document.getElementById('test');
var originalText = myElement.innerHTML.toString();
myElement.innerHTML = originalText+" new text";
check that you only have one element with the id "cartzone"

A simple and fast way to do this is to concatenate the old value with the new.
document.getElementById('myid').innerHTML += " my new text here"

this problem usually occurs when the rest of your code is poorly written and contains errors or when the same ID is used several times.
I had the same problems in the past.
you have tow options:
check the rest of your code (validate)
use jQuery - I don't know how, but it works every time.

Dice jQuery - random # + replace the text on die

My very first question. I have a feeling this is something simple, but it's been driving me crazy because I can't find the issue. I've tested the math function with an alert, so I can see that is working but the actual jQuery below doesn't seem to be running to swap the text. Please help!
var dice = 1;
function math(sides){
return Math.floor((Math.random()*sides)+1).toString();
}
$(document).ready(function(){
$("button").click(function(){
var dice = math(6);
alert("Dice now at " + dice);
$("#number").text("dice");
});
});

dice is a variable, so remove quotes
Try this
$("#number").text(dice); // This will replace the current text with new
If #number is text box
$("#number").val(dice); // This will replace the current value with new

how to capture the mouseover element?

i am developing an autocomplete feature.but i am facing one problem there...
when i click on the suggestion box one of the results will not enter into the suggest html box...
function handleOnMouseOver(oTr)
{
deselectAll();
oTr.className ="highlightrow";
position = oTr.id.substring(2, oTr.id.length);
updateKeywordValue(position);
}
can you plz tell the solution
thanks
function updateKeywordValue(oTr)
{
var oKeyword = document.getElementById("keyword");
var strKeyword="";
var crtLink = document.getElementById("a" +oTr.id.substring(2,oTr.id.length)).toString();
crtLink = crtLink.replace("-", "_");
crtLink = crtLink.substring(0, crtLink.length);
oKeyword.value=unescape(crtLink.substring(googleurl.length, crtLink.length));
strKeyword=oKeyword.value.toString();
if (oTr.id.substring(2,oTr.id.length)==0)
{
oKeyword.value=strKeyword.substring(3,strKeyword.length);
}
selectedKeyword=oKeyword.value;
}

you should get rid of the second parameter in the substring() method. Since you just want the remainder of the string, I'm guessing, that is the default if you don't set a second value.
position = oTr.id.substring(2);
My guess is that you are getting the value of the keyword from the id, and pushing that into the input box, right? If that's the case, we'll need to see more of your code. Specifically, I'd like to see the updateKeywordValue function and I'd also like to know if the text that they are hovering over is the text you are trying to send the input box. If so, you could probably simplify the whole thing and go with something like:
function handleOnMouseOver(oTr)
{
deselectAll();
oTr.className ="highlightrow";
keywordbox.value = oTr.innerHTML;
}
But this is based on the assumption that the only data inside the hovered row is the text, and no other html. And I had to make up a name for your input box.
But if this way off, this is because we need more information to see the real problem.