Change Image from Form Input with Javascript and HTML - javascript

I want to make a Skin Viewing Website for the game Minecraft and I need to have a simple form that displays an image from Minotar.net and then displays the entered username with thier image / skin under the form
The form should add the username to the end of the url, for example:
Form text submitted: Notch
Changes: img src="https://minotar.net/skin/username" to img src="https://minotar.net/skin/Notch"
and displays the image below the form.
--
The code that I tried
<div class="page-header">
<h2>Enter a Minecraft Username to download skin:</h2>
</div>
<div class="input-group">
<input type="text" id="page" class="form-control">
<span class="input-group-btn">
<input type="submit" value="Download Skin!" onclick="goToPage();" class="btn btn-success">
<img id="page" src="http://minecraft-skin-viewer.com/skin.php?user=">
</span>
Javascript:
function goToPage() {
var page = document.getElementById('page').value;
img.src = "http://minecraft-skin-viewer.com/skin.php?user=" + page }
JSfiddle http://jsfiddle.net/4dqbP/14/
Thanks!

Wow, you're doing well for just starting JavaScript. I found a few errors in your code and corrected them in a JSFiddle at the end of my answer. Here are your mistakes, for future reference:
Unlike classes, ids MUST be unique. You had two ids both named "page." This is not valid HTML, and will cause errors.
You used img.src. This is allowed, but only if img is a variable. In the fiddle, I made img a variable, by using the getElementById method.
You should close your img tags and input tags. People will say "what do you mean, close those tags?" Well, just for consistency, and making XHTML easier to learn later, it's a good habit to make sure your input tag looks like this:
<input type="text" id="textbox1"/>
Not this:
<input type="text" id="textbox2">
(Notice the missing "/" at the end.)
Other than that, I just cleaned up some formatting. You're good to go!
JSFiddle Here

Related

Date input in form field is not submitted

I have some code that successfully inputs a variety of values into a form on a webpage and I can see that the data is put into the correct fields in the correct format. When I submit the form using the 'OK' button on the screen, or code, the process completes but the Date data carried through is the current date, despite the fact that I can see a different date displayed in the field. I can cut and paste data into the field from e.g., Notepad and it works fine.
So, in short, although I can see the correct Date date on screen it does not submit when supplied by the script.
Here is the html for relevant part of the form with what I think is relevant code flanking it:
<iframe id="mainPanel_iframe" name="mainPanel_iframe" class="mochaIframe" src="https://portal.starleaf.com/pbx/node-1.live.pr.starleaf.com/portal/#page=addUserConference&">
#document
<div> class="mainTableContainer">
<form action="#" method="get">
<div class="formRow">
<div class="fieldBlock calendarBlock">
<input type="date" id="editConference_startNative" class="native_date has_native">
<input type="text" id="editConference_start" class="sl_date has_native" placeholder="DD/MM/YYYY">
<input type="text" id="editConference_startTime" placeholder="Time" class="ui-timepicker-input" autocomplete="off">
<div id="start-date-picker"><div class="pika-single is-hidden is-bound" style="position: static; left: auto; top: auto;"></div></div>
<div id="start-time-picker"></div>
</div>
</div>
</form>
</div>
<div class="buttons">
<input type="button" id="editConference_ok" value="OK">
</div>
</iframe>
Here is the Javascript that I have been using. I have been testing it out using the Chrome F12 Console and working inside the iframe. It automates the filling out of the form and submits it. The line with StDate (id="editConference_start") does not work but the next line with StTime (id="editConference_startTime") does pull through after 'clicking'. Both are type="text".
\Loading the data into the fields
var StDate = "06/05/2020";
document.getElementById('editConference_start').value = StDate;
var StTime = "16:20";
document.getElementById('editConference_startTime').value = StTime;
\ Click 'OK'
document.getElementById("editConference_ok").click();
Things tried:
1) Using the code below to enter data via the id ="editConference_startNative" element. It does not seem to work but I am not sure if my code makes any sense or if this something worth pursing:
var StDate = document.querySelector('input[type="date"]');
StDate.value = '2020-05-05';
document.getElementById('editConference_startNative').value = StDate;
2) Creating a var with a date type for use with the Native version of the input
var StDate = new Date("05/05/2020");
document.getElementById('editConference_startNative').value = StDate;
I think the output is in the wrong form to be used but can't figure out how to shorten it in the right format. Perhaps this is not the right approach.
3) Removing the final click code then waiting for a few seconds and them adding the Click line into the Console and executing but this did not work. I presume it is not a question of a delay. I also tried this code before the click code for a delay but I am not sure if it is valid:
setTimeout(function(){}, 3000);
document.getElementById("editConference_ok").click();
Thanks in advance for any suggestions.

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();
}
});

How would I go about changing the contents of a div after the user searches?

So I have this form:
<form method="post" action="index.php" id="searchform">
<input type="text" name="search" placeholder="Search...">
<input type="image" src="img/img1.png" alt="submit" onmouseover="hover(this);" onmouseout="unhover(this);" /></a>
</form>
When the user searches for something I want to change this div:
<div class = "mainText">
<h2>Today's Events: </h2>
</div>
To say this:
<div class = "mainText">
<h2>Results: </h2>
</div>
How can I do this?
EDIT: Is it possible to run this code from within a php if statement?
jquery .text() seems a better fit, so you can just change the text of the tag.
$(".mainText h2").text("Results:");
More on this here:
http://www.w3schools.com/jquery/html_text.asp
The action in your form is the destination of where your form ends up.
If you are looking to control the dom elements you need something like javascript or jquery to control the front end of your application.
You could use jquery to simply listen for when your user has clicked the button or submitted the form and parse the results (in this case, just switching html text). *Remove the the action destination otherwise the page will redirect to index.php
$('form').submit(function(){
$('.mainText').html('<h2>Results: </h2>');
return false;
});
Common usage is to put an ajax call in the submit function to retrieve some data from outside the page source. Hopefully that puts you on track :)

Click button that fills input & submits

First off, let me say I'm very much new to Javascript, and relatively clueless when it comes to the backend of the application I recently had developed. I'm working on the front-end design/minor functionality. So, if you could please keep that in mind with your answers, that'd be much appreciated!
I have an input field where a user can enter an address, and click submit to bring up a property results page.
<input type='text' class='main-search-address' id="main-search-address" placeholder="Enter Street Address">in Seattle, WA
<input value="Search" type="submit" class="submit" id='main-search'>
On the results page, there is a section where nearby addresses are displayed, via AJAX/js like so:
<span id="nearby_address">this gets replaced with an address</span>
For example
<span>1103 YAKIMA AVE S</span>
I'm looking for some javascript that will allow me to click the address in the span tag, have it paste into the input above, and automatically 'submit'-- all with one click.
Any help?
Thanks!
Change your search button code to:
<input value="Search" type="submit" name="submitSearch" class="submit" id='main-search'>
And your span code to:
<span id="nearby_address" onclick="FillSub()">
And then use this javascript code.
<script type="text/javascript">
function FillSub(){
var elem = document.getElementById("nearby_address").innerHTML;
var elem2 = document.getElementById("main-search-address");
elem2.value = elem;
document.NAME-OF-YOUR-FORM.submitSearch.click();
}
</script>
You should do a bit research before you ask a question next time. I was just curious how would I solve this myself, so I did. Edit the last value of the script, because you didn't post the name of your <form>.

onClick not working

My button with id "jump-button" is not working at all. Whenever it is clicked nothing will happen. (I have added a alert(); to the onclick attribute so I know when the button is working.
The other two buttons (next and prev) are working absolutely fine.
<body>
<div id="fact">Fact #1: In 2002, the most popular boat name in the U.S. was Liberty</div>
<input id="next" type="image" src="images/next-button.png" name="next" value="Next" onClick="num++;document.getElementById('fact').innerHTML=getFact(num);"/>
<input id="prev" type="image" src="images/prev-button.png" name="previous" value="Prev" onClick="num--;document.getElementById('fact').innerHTML=getFact(num);"/>
<p id="jump-text">Jump To Fact #</p>
<input id="textarea" type="text" name="factNumber" />
<input id="jump-button" type="image" src="images/jump-button.png" name="jump" value="Jump" onClick="alert();num = document.getElementById('textarea').value;document.getElementById('fact').innerHTML='getFact(num);"/>
</body>
External JS File (it has been inported in the HTML header)
facts = [element1, element2, ... wayy too many elements to have them all here];
var num = 1;
function getFact (num){
return 'Fact #' + num + ' ' + facts[num-1];
}
As you can see, this is a very simple app being built (something that just runs through various interesting facts). I am fairly new to javascript, so please excuse me if I made a very blatant error.
My CSS file is very nice and simple too, I doubt it it causing the trouble, but if it is required I will shot it upon request.
Lastly, the rest of the html <head> is also very simple (only consists of some meta data, title, css and javascript imports).
If anyone needs more information to help me get the "jump" button working, please ask.
You have a stray ' in your inline onClick attribute.
// ---------------------------------------------------v
onClick="...document.getElementById('fact').innerHTML='getFact(num);"

Categories

Resources