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

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>

Related

How do i change the Action attribute in a form field? HTML

Im currently working on a web application, where i need to be able to take a picture in a browser using a mobile device.
I'am currently able to upload this picture to my storage on googlecloud, but i am having some troubles with the URL of said picture. The URL of the picture is defined in an action(HTML attribute). And im struggling to see how this action field can be dynamic.
It seems i cant put in the variable name for my URL in the action field.
Is there any other way to do this?
Im sorry in advance for my bad english.
<form id="BilleddeUpload" action="url" method="POST" enctype="multipart/form-data">
<input type="file" accept="/*" name="file">
<button>Submit</button>
</form>
<script>
function gogogoogle(){
var billedenavn = document.getElementById("BilledeUpload");
var url = "https://storage.googleapis.com/notgonnaputreallinkhere/"
+ prompt("Insert picture name here.");
billedenavn.action=url;
}
</script>
<p>Billede på google cloud </p>
<button onclick="gogogoogle()">
Hvad skal den hedde????
</button>
You already have defined a variable to hold a reference to the form billedenavn.
This line
var billedenavn = document.getElementById("BilledeUpload")
and a few lines later you wrote
document.getElementById("BilledeUpload").action = url;
which contains a typo in the form ID. But why not directly write:
billedenavn.action = url;
their is some syntax error.
put function [and it's body] into script tag,
and change form id from BilleddeUpload to BilledeUpload.

How can make a program so as to get Search Results in another Window

I am udemy learner of javascript and In one the recent classes I learnt how to format url string the using javacscript.
Now I want to make a program in which user enters the string (say - harry potter) in form text input field and then on clicking button it redirects to second page and display that string search in BING search engine.
I tried to write some code but I failed. Can anybody help me ??
Following are the files I made
pastebin.com/syCzrqEe
pastebin.com/AgvCgCif
<form>
<input type="text" id="myinput">
<input type="submit">
</form>
<script>
document.forms[0].onsubmit = function() {
var query = document.getElementById('myinput').value;
window.open('http://www.bing.com/search?q=' + encodeURIComponent(query));
return false;
}
</script>

assist with js function/alert erasing form input

I came across something weird that is making me realize I do not know JS stuff as well as i should. And so I thought I would ask a question about what is going on to see if that will help. I have a simple form with three "textarea" inputs and i have a "save" button. the save button triggers a js function that gathers the what is on the inputs and the does an alert showing them...
very simple application but what I was not expecting was that when you "close" the alert box; all the data entered on the form is erased...
here is my code:
<form>
<strong>Make</strong><br/>
<textarea id="make_notes" rows="4" cols="50">
</textarea><br/><br/>
<strong>Model</strong><br/>
<textarea id="model_notes" rows="4" cols="50">
</textarea><br/><br/>
<strong>Features</strong><br/>
<textarea id="features_notes" rows="4" cols="50">
</textarea>
<br/><br/>
<button onclick="side_form_js2()">Save2</button>
</form>
<script>
function side_form_js2() {
var element1 = document.getElementById("make_notes");
var make_notes_var = element1.value;
var element2 = document.getElementById("model_notes");
var model_notes_var = element2.value;
var element3 = document.getElementById("features_notes");
var features_notes_var = element3.value;
alert(make_notes_var + "I am an alert box!22222" + model_notes_var + features_notes_var);
}
</script>
So I am really uncertain what is making the form input be erased. It is almost like the page is being reloaded but I dont think that is the case. Can anyone shed any light on this? Thanks...
P.S. dont know if this makes any difference but just running this locally using Xampp on my PC...
the default is reload, change your code to this and it should work
<button onclick="return side_form_js2()">Save2</button>
and then in your function add return false after the alert like this:
alert(make_notes_var + "I am an alert box!22222" + model_notes_var + features_notes_var);
return false;
A button element with no type attribute specified represents the same thing as a button element with its type attribute set to "submit".
If you want to use a button in a form without it submitting use type="button".

Cannot retain the data of old Text-boxes on dynamic addition of others

Hello Guys i was trying dynamic addition of text box and other controls in Classic ASP through JavaScript but encountered some problem up there.
Though i was able to add new textboxes but was no able to retain their data.
Eg : If i have a button and on click i want to add textboxes to the html page on first click a textbox is added and i enter data in that textbox like STACKOVERFLOW but when again i hit button new textbox2 is also added but textbox1 data goes away.
I changed my ASP code for simple HTML so that it will be easy. Here is the code.
<!DOCTYPE html>
<html>
<body>
<div id ='div1' style="margin-bottom:6px;"></div>
<button onclick="myFunction()">Change link</button>
<script>
function myFunction() {
var p_strContents = '<input name="cust_name_0" id="cust_name_0" value="" type="text" size="0" class="FormTextField" maxlength="6" title="">';
document.getElementById('div1').innerHTML = document.getElementById('div1').innerHTML + p_strContents ;
//document.getElementById('div1').appendChild(p_strContents);
}
</script>
</body>
</html>
I tried using even appendchild but it will throw some error.
If you want to try it directly online use this link and just paste my code will be easy for u guys to check.
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_elmnt_innerhtml
I am using JavaScript.
Could you guys help me. Regards...
Please check with this:
function myFunction() {
var textBx = document.createElement('input');
textBx.setAttribute('type', 'textbox');
textBx.setAttribute('class', 'FormTextField');
textBx.setAttribute('maxlength', '6');
document.getElementById('div1').appendChild(textBx);
textBx = null;
}
Please check working code here

How to retrieve html form elements and display the values elsewhere on the page

I am inexperienced so sorry if this is a dumb question but I'm looking around and I haven't found an answer that works for me. I am using JavaScript and I have an html form with one text input. When someone enters a value for that input and submits the form I want to return to the same HTML page but with what they entered displayed elsewhere on the page. Here is my form:
<form name="chatInput" action="index.html" method="get">
chat:<input type="text" name="chat"/>
</form>
I saw something about having:
var chatText = document.forms[0].elements[0];
But when I try to use this I get [object HTMLInputElement]
Also I would only want to create that variable if the form has been entered once already but not initially. How would I check for this?
Thanks for any info.
var chatText = document.forms[0]['chat'].value;
http://jsfiddle.net/XLeAn/
If you don't want to re-update the html, I'd recommend not using the form tag.
Instead, I'd create a button with the onclick attribute.
<input type="button" value="Update" onclick="someFunction()">
Then in the JS portion, have something like this.
var someFunction = function(){
var chatText = document.getElementById("this-is-the-element-I-want").value;
}
Of course, make sure that the element you are trying to retrieve info from has an id.
<input type="text" name="chat" id="this-is-the-element-I-want">
EDIT: Code indents and clarity
Try this:
var chatText = document.forms[0].elements[0].value;

Categories

Resources