i'm trying to print user inputs to webpage comment section but don't know what do in place value ? It's like autofill comment section
<input id="fname" type="text" size="30" placeholder="Enter name" />
<input id="pageurl" placeholder="Paste here url" type="url" size="30" />
<button class="button1" onclick="eatFood();"> <b>Submit</b> </button>
<script type="text/javaScript">
function eatFood(){
var url =document.getElementById("pageurl").value;`
window.open(url ,"msgwindow")
document.getElementById(' ').value = " what_i_Do_here";
}</Script>
Hi "Sagg" Welcome to Stackoverflow
What i understood from your question you want auto filled valued from your input"Enter Name" So here is solution for that just you can achieve that , if this is not the case please define that what exactly you want Your question is too much ambiguous
<!DOCTYPE html>
<html>
<body>
<input id="fname" type="text" size="30" placeholder="Enter name" />
<br>
<button class="button1" onclick="eatFood();"> <b>Submit</b> </button>
<br><br>
<input id="fnameExample" type="text" size="30" placeholder="Examaple auto fill" />
<script>
function eatFood(){
var url =document.getElementById("fname").value;
document.getElementById('fnameExample').value = (url+' '+"auto filled On Submit");
}
</script>
</body>
</html>
Related
Im trying this for so long and i dont know how to fix it. The idea is simple, The user insert the requiered data in the HTML forms, then the inserted data is stored in an array and display all the data with a text. I think the problem is when i try to store the data from the form into the array.
This is what ive done so far
<html>
<header>
<meta charset="UTF-8">
<title>Second Homework</title>
</header>
<body>
<h1>Welcome!</h1>
<p>Please insert the data in the following form: </p>
<form>
<input type="text" id="name"><br>
<input type="text" id="lname"><br>
<input type="text" id="age"><br>
<input type="text" id="city"><br>
<input type="text" id="pet"><br>
<input type="text" id="pet_name"><br>
<button type="button" id="" onclick="data()">Enviar</button>
</form>
<script type="text/javascript">
function data(){
var info=[getElementById("name").innerHTML.value,getElementById("lname").innerHTML.value,
getElementById("age").innerHTML.value,getElementById("city").innerHTML.value,getElementById("pet").innerHTML.value,getElementById("pet_name").innerHTML.value]
document.write("Your name is: "+info[0])
document.write("Your lastname is: "+info[1])
document.write("You are "+info[2]+" years old")
document.write("You live in: "+info[3])
document.write("Do you have pets? "+info[4])
document.write("Your pets name is: "+info[5])
}
</script>
</body>
<footer>
</footer>
</html>
in HTML, form inputs elements must use a name attribute
do this way:
const myForm = document.forms['my-form']
myForm.onsubmit = e =>
{
e.preventDefault() // disable submit
let info = Array.from(new FormData(myForm).entries()).map(([k,v])=>v)
document.write("<br>Your name is: "+info[0])
document.write("<br>Your lastname is: "+info[1])
document.write("<br>You are "+info[2]+" years old")
document.write("<br>You live in: "+info[3])
document.write("<br>Do you have pets? "+info[4])
document.write("<br>Your pets name is: "+info[5])
/* ------------------------------- or
let msg = `
Your name is: ${myForm.name.value}
Your lastname is: ${myForm.lname.value}
You are ${myForm.age.value} years old
You live in ${myForm.city.value}
Do you have pets? ${myForm.pet.value}
Your pets name is: ${myForm.pet_name.value}`
console.log( msg )
------------------------------------- */
}
<h1>Welcome!</h1>
<p>Please insert the data in the following form: </p>
<form name="my-form">
<input type="text" name="name" placeholder="name" ><br>
<input type="text" name="lname" placeholder="last name"><br>
<input type="text" name="age" placeholder="age" ><br>
<input type="text" name="city" placeholder="city" ><br>
<input type="text" name="pet" placeholder="pet" ><br>
<input type="text" name="pet_name" placeholder="pet name" ><br>
<button type="submit">Enviar</button>
</form>
The output text display for a second and then gone forever...is there a way to make it stay?
<head>
<script type="text/javascript">
function input(){
var input_taker = document.getElementById('email').value;
document.getElementById('display').innerHTML = input_taker;
}
</script>
</head>
<form method="post" action="#">
<input type="text" name="email" placeholder="email#example.com" id="email" onchange="input()">
<input type="submit" name="save" value="save">
When you hit the save button it's probably trying to POST your form - you can remove the form element and your code will pretty much work - if all you want to do is display the text input's value elsewhere on the screen.
Here's an example:
function input() {
var input_taker = document.getElementById('email').value;
document.getElementById('display').innerHTML = input_taker;
}
<input type="text" name="email" placeholder="email#example.com" id="email" onchange="input()">
<input type="submit" name="save" value="save">
<br/>
<div id="display" onchange="input()">
I am trying these days to do a search form that sends to two different pages with two different buttons with a single text box. So far I am doing this:
<form action="http://www.youtube.com/results" method="get">
<input name="search_query" type="text" maxlength="128" />
<input type="submit" value="YouTube" />
</form>
<form action="https://torrentz.eu/search" method="get">
<input name="q" type="text" maxlength="128" />
<input type="submit" value="TorrentZ" />
</form>
of course the result is this:
I can work with that, but I want to make it "cuter" like this:
So far I have tried using a script but I did not get it so I scraped it, then I tried making an if/elseif but yet again, I was not sure what I was doing, I am not a good planner for what I see, a toggle button or a dropbox is not as fast, as I just need to press tab once or twice and enter to just search where I want.
As an extra note, I am just making my personal "new tab" for chrome, as the basic and the ones I find in extensions are pretty heavy for my mini laptop.
In HTML5 you can use formaction attribute.
<!DOCTYPE html>
<html>
<body>
<form>
<input name="search_query" type="text" maxlength="128" />
<input type="submit" formaction="http://www.youtube.com/results" value="YouTube" />
<input type="submit" formaction="https://torrentz.eu/search" value="TorrentZ" />
</form>
</body>
</html>
Since you tried and failed a script, let's look at ways we can achieve this.
Using form
Be extremely wary of what you do here. It is easy to send a get request using form but it always "flushes" out the query strings already present in the action URL, and submits the request by adding name-value pairs in its child nodes. Make sure to create your query as a child node.
<input type="text" id="box" name="searchbox" maxlength="128" placeholder="Type text to be searched here" autofocus />
<input type="button" value="Youtube" onclick="search_youtube()"/>
<input type="button" value="Torrentz" onclick="search_torrentz()"/>
<script>
function search_youtube(){
var add="https://www.youtube.com/results";
var box = document.getElementById("box");
box.name="search_query"
if(box.value)
{
var form = open().document.createElement("form");
form.action=add;
form.appendChild(box.cloneNode(false))
form.submit();
}
}
function search_torrentz(){
var add="https://www.torrentz.com/search";
var box = document.getElementById("box");
box.name="q"
if(box.value)
{
var form = open().document.createElement("form");
form.action=add;
form.appendChild(box.cloneNode(false))
form.submit();
}
}
</script>
Using HTML5 formaction attribute
<form action="https://www.youtube.com/results" method="GET">
<input type="text" id="box" name="search_query" maxlength="128" placeholder="Type text to be searched here" autofocus />
<input type="submit" value="Torrentz" formaction="https://www.torrentz.com/search" onclick="document.getElementById('box').name='q'" />
<input type="submit" name="submit" value="Youtube" />
</form>
I want to have it so I can fill out this kind of form (below) and then when I click "Send" it would send to a specific email that I have inputted. Meaning, I would be declaring the information that is filled out in the "Email" field as a variable and then somehow have the "mailto:" link send to that email address. I really hope that makes sense. I'm not entirely sure how to explain it.
It seems like it would be relatively simple, I'm just not having much luck (Javascript is not my strongest language).
<!DOCTYPE html>
<html>
<body>
<h2>Send e-mail to someone#example.com:</h2>
<form action="MAILTO:someone#example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
Or, even a way to make a contact form of sorts, but it goes to an email that you input somewhere in the form.
The mailto can't be used with a form directly.
However, you can do something like this :
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
</head>
<body>
<h2>Send e-mail to someone#example.com:</h2>
<form action="#" id="myForm">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="email#mail.com"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<button id="btnSend">Send mail</button>
<input type="reset" value="Reset">
</form>
<script>
$(function(){
$(myForm).submit(function(){
var mailto = "mailto:";
mailto += $("input[name=mail]").val();
mailto += "?subject=Your Email Subject (new comment)";
mailto += "&body=message from : " + $("input[name=name]").val() + " comment : " + $("input[name=comment]").val();
console.log(mailto);
window.open(mailto);
return false;
});
});
</script>
</body>
</html>
Basicly we agregate the field value and opend a new windows/tab with the mailto as url.
Note that it will open the mail client of the user (if he/she have one) and he/she will have to click send for the mail to go.
I'm trying to figure out how to copy a users text input in one form field to another. Specifically, when someone fills in their email address in the contact form, it will be duplicated in the mailing list form.
Both these forms are using ajax so there's no concerns about the input text being lost on submit.
This is the code I have:
<div id="contact_form">
<form name="contact" method="post" action="">
<input type="text" name="name" id="name" size="30" value="Name" class="text-input" />
<label class="error" for="name" id="name_error">Please enter your name.</label>
<br />
<input type="text" name="email" id="email" size="30" value="Email" class="text-input" />
<label class="error" for="email" id="email_error">I need your email.</label>
<br />
<textarea rows="10" cols="30" type="textarea" name="message" id="message" value="Message" class="text-input" ></textarea>
<label class="error" for="message" id="message_error">A message is required.</label>
<br />
<input type="submit" name="submit" class="button" id="submit" value="Send" />
</form>
</div>
<div id="details">
<p>some details here, not sure what yet</p>
</div>
<div id="mail_list">
<input type="text" id="mail" value="Your email" name="mail_list" /><input type="submit" name="submit" class="button" id="submit" value="Send" />
</div>
I found this in the Jquery documentation, but couldn't get it to work:
$("#email").optionCopyTo("#mail");
Thanks!
You said you want it in real time. I assume that means while the user is typing, the value should be replicated for each keystroke.
If that's right, try this:
var mail = document.getElementById("mail");
$("#email").keyup(function() {
mail.value = this.value;
});
Or if you want more jQuery:
var $mail = $("#mail");
$("#email").keyup(function() {
$mail.val( this.value );
});
This will update for each keyup event.
I'd probably add a redundant blur event in case there's an autocomplete in the field.
$("#email").blur(function() {
$mail.val( this.value );
});
Since all your fields have unique ids, this is quite straight forward:
$(function() { // <== Doc Ready
$("#email").change(function() { // When the email is changed
$('#mail').val(this.value); // copy it over to the mail
});
});
Try it out with this jsFiddle
.change()
.val()
Is $("#mail") another input box ? It doesn't appear in your HTML (Edit: well it does now, but didn't at first :)
$("#mail").val($("#email").val()) should do what you want.
use keyup and change both.
$("#boxx").on('keypress change', function(event) {
var data=$(this).val();
$("div").text(data);
});
here is the example
http://jsfiddle.net/6HmxM/785/
you can simply do this
$('#mail').text($('#email').val())