Develop Reference

Setting href on javascript ignores rails root path

I have a Rails 6 application that doesn't use a regular sql-ish database, I do searches on an LDAP directory, and because of that, I don't use regular models for users, for example.
In one of my pages, I ask the user to input a person ID and then click a "Search" button, and through javascript I grab the id and pass it into the "Search" button href. As you can see here:
example.html.erb
<form class="d-flex">
<input id="input" class="form-control me-2" placeholder="Person's ID"></input>
<a id="search" class="btn btn-outline-success">Search</a>
</form>
example.js
const inputPerson = document.getElementById('input')
const searchPerson = document.getElementById('search')
searchPerson.addEventListener('click', () => {
searchPerson.setAttribute("href", `/people/${inputPerson.value}`);
})
So here comes the problem:
In my machine, running rails s and testing it, it works fine, as it redirects to localhost:3000/people/12345example
But my website runs in an url that looks like this: shared-url.com/myappname
So I expected the href on production would look like shared-url.com/myappname/people/12345example but it's actually coming up as shared-url.com/people/12345example, and of course it fails as this url does not exist at all...
I have config.relative_url_root = '/myappname' in my config/environments/production.rb, is there any other config I should have set for it to work like that? I know I could just change the javascript href, but I believe there's something I'm doing wrong.
Thanks in advance!

Form Submit works with Button, but not with Enter key

I am new here, so maybe you need to give me some hints about how everything works in this community. I was already reading a lot here on Stackoverflow but finally signed up.
I am designing a small website for a museum near me which is a non-profit organization. They have a huge collection of ammunition and the information is currently available on paper.
I want a website where I can enter a number and the appropiate information is shown. Everything works so far in my test site. (since no internet available there, it should run locally on a android tablet later)
The only problem I have is that the form submit works with the button, but not with the enter key or "open" key on the androids numberpad.
I am also quite new to javascript-coding since I come from electronics and c-programming on microprocessors, so I may have made mistake.
i currently have the iframe in the main page, but i originally wanted it to open up in a modal. It did not work properly, so maybe I may try that later again.
Live demo here: museum.smallfilms.ch/drei
The code for the form is the following:
<!-- Jumbotron Header -->
<header class="jumbotron hero-spacer">
<h1>Katalog:</h1>
<p>Mit der Munitionsnummer können hier weitere Informationen zur jeweiligen Patrone angezeigt werden.</p>
<p>
<form onsubmit="searchpage()">
<input type="number" pattern="\d*"/min="1" max="9999" id="num" >
<button type="button" class="btn btn-danger" onclick="searchpage()" id="search">Suchen</button>
</form>
The Javascript code is the following:
function searchpage() {
var num = document.getElementById('num');
var targetFrame = document.getElementById('targetFrame');
if (num.value) {
var page = 'pages/' + (+num.value) + '.html';
targetFrame.setAttribute('src', page);
}
}
If you need more code I can deliver this. Just let me know that you need.
The site is now designed to show something for the numbers 1 and 2.
The whole site uses bootstrap and the sites displayed in the iframe use strapdown.js for easier editing. (We need to digitalize about 900 datasets in the end)
I think it is only a small mistake somewhere but after hours of coding and searching the internet i still did not get the source of the error.
Thanks in advance for any help and hint.
Dabbax
Edit: if it helps, i packed the whole page into a zip... museum.smallfilms.ch/drei/drei.zip

I think that the error comes from the line where you are calling the function searchPage(). I would recommend you to try the line below :
<input type="sumbit" class="btn btn-danger" onclick="searchpage()" id="search" value="Suchen">
In this case, when you press enter, the form will be submitted and call the searchPage function.

On your code for the form, try:
<button type="submit" class="btn btn-danger" onclick="searchpage()" id="search"> Suchen </button>
edit: Shaam's answer can be correct but if you say input then you just trying to make it a look like button with bootstrap, a more proper approach would be input type="button" but in your case you should say that this is a button that submit the form.
That's why you should use button and not input here.

This could be your html:
<form id="searchForm" action="some_url">
<input type="number" pattern="\d*"/min="1" max="9999" id="num" >
<input type="button" value="Suchen" class="btn btn-danger entr" onclick="searchpage()" id="search">
</form>
Now add an event listener to the class entr and submit the form if the key is Enter. So the event listener in jquery like
$('.entr').keypress(function(event) {
if (event.which == 13) { // this is the enter key code
document.getElementById('searchForm').submit();
}
});

Html onclick on Link+document.getEelementById("email").value?

To be honest, I am very new to Html/javascript. I am trying to create a website from (http://www.wix.com) and it'll contain only a text box and a button.
Wix.com is just a site builder and not supporting the whole website html editing. So I've to use html/javascript to set input textbox and a button.
The main point I would like to know is How to set config on button to go a link(http://www.example.com/)+inputtext(myroom) ... | example:
http://www.example.com/myroom
.....
I set my textbox id to "email" and trying with many code. But still not working.
Please kindly suggest for me . Thank you in advance.
<button onclick="window.location.href='http://www.example.com/'+document.getEelementById("email").value;">Continue</button>

Try this way..
<button id="btntest">Continue</button>
$(document).ready(function(){
$("#btntest").click(function(){
var emailVal = $("#email").val();
window.location.href="http://www.example.com/"+emailVal;
});
});

There's a typo in your javascript (getEelementById), and you use double quotes inside a double quoted string, that's why it does not work.
A simple correction would be :
<button onclick="window.location.href = 'http://www.example.com/' + document.getElementById('email').value;">Continue</button>

Let us know whether your input type is text or email with id="email"
if its type="text" you can go up with written down code
var email_val;
function load() {
email_val = document.getElementById('email').value;
window.location.href = 'http://www.example.com/'+email_val };
<input type="text" id="email">
<button onClick="load()" >Click Here</button>

Getting Minecraft Images

I am trying to make something, where, if you input your minecraft username, you get your profile icon.
I found this website Minotar, where you could get icons by the url. So, I tried making a JavaScript script out of it, and display it. But, the picture doesn't want to show up when I click "Go!".
What have I done wrong?
Here is my code.
<script>
function usernameget(){
var username = document.getElementById("username").value;
var url = "http://www.minotar.net/avatar/" + username + "/150";
document.getElementById("usernamepicture").setAttribute("src", url);
}
</script>
<form>
<img id="usernamepicture" src="">
<p>Your Minecraft Username</p>
<input type="text" id="username">
<button onclick="usernameget()">Go!</button>
</form>

Set you button type to button.
<button onclick="usernameget()" type="button">Go!</button>
This will stop it from submitting your form.
See this fiddle: http://jsfiddle.net/512p1L89/
However I think the better solution would be to remove the form tag unless you do require the user to later submit the form back to the server.

How to click on a button based on its inner text? VB.Net

I'm having an issue with a button i'm trying to click in a webbrowser and I can't seem to get it to work, after hours of googling I still can't get it to work.
Heres the HTML code:
<input class="btn btn_large btn_blue" type="submit" value="Login">
I just need to invoke a click on it or somehow simulate the pressing of the "Enter" key maybe?
Any help is greatly appreciated. :D

Try using GetElementsByTagName():
For i As Integer = 0 To wb.Document.GetElementsByTagName("input").Count - 1
Dim elem As HtmlElement = wb.Document.GetElementsByTagName("input")(i)
If elem.GetAttribute("type") = "submit" _
AndAlso elem.GetAttribute("value") = "Login" Then
elem.InvokeMember("click")
Exit For
End If
Next
With wb being the WebBrowser control. GetElementByTagName("input") method retrieves all the HTML elements that are input, and then you can check each one. You can compare the class or the value only if there is no need for more.
You can compare the string with .Equals() to get better results (ignoring case for example):
elem.GetAttribute("type").Equals("submit", StringComparison.InvariantCultureIgnoreCase)

First, I'd give it an ID so it's:
<input id="submit" class="btn btn_large btn_blue" type="submit" value="Login">
Then your JS is:
document.getElementById('submit').onclick = function () {
/* do stuff here */
};