<form id="form1">
Title: <input type="text" id="title1" size="25"/><br/><br/><br/>
Description <input type="text" id="desc1" size="55"/><br/><br/><br/>
<input type="submit" value="Submit" onclick="doit();"/>
</form>
<script type="text/javascript">
function doit(){
var title = document.getElementById("title1").value;
var description = document.getElementById("desc1").value;
document.write("<h3>Title: " + title + "</h3>");
document.write("<h3>Description: " + description + "</h3>");
}
</script>
I need help with getElementById. My script takes the values the user typed in textboxes and when the user clicks submit the values are written to the page using document.write, however the code doesn't work as it expected.
<script type="text/javascript">
function doit() {
document.write("Do it function");
var title = document.getElementById("title1").value;
var description = document.getElementById("desc1").value;
document.write("<h3>Title: " + title + "</h3>");
document.write("<h3>Description: " + description + "</h3>");
}
</script>
The execution doesn't even reach the first line of the function. In the button I have:
<input type="submit value="submit" onclick="doit();"/>
If:
<input type="submit value="submit" onclick="doit();"/>
is indeed what you have, you're missing a quote (as should be evident by the syntax coloring, reason enough to make sure you use an editor that provides such coloring).
It should instead be:
<input type="submit" value="submit" onclick="doit();"/>
You should also be aware that document.write(), if the document has already been closed, will automatically open and clear the document, so your first write may make the controls with those IDs disappear, depending on the structure of your HTML.
Kindly change your html like this
<input type="submit" value="submit" onclick="doit();"/>
Related
Hey so I am new to using JS and HTML and still practicing the language, I am trying to print out the user name of both players but without using alert. I want to print the player's names and later going to change it up using CSS but having trouble with the simplest way of printing user inputs I have this so far and was wondering why it is not working, any help will be appreciated.
function welcome(){
var first = document.getElementById("FirstName").value;
var last = document.getElementById("LastName").value;
var Print_name = "Welcome " + first +" "+ last;
console.log(Print_name);
}
<!DOCTYPE html>
<html>
<head>
<title>Print Names</title>
</head>
<body>
<form method="get">
<label for="Player1Name">Player 1 Name:</label>
<input type="text" id="Player1Name" name="player1Name" placeholder="Name"><br>
<label for="Player2Name">Player 2 Name:</label>
<input type="text" id="Player2Name" name="player2Name" placeholder="Name"><br>
<input type="submit" value="Submit" class="btn">
</form>
<script>
/*javascript code here*/
</script>
</body>
</html>
You should find an HTML element (with id="Player1Name") and (with id="Player2Name").
Try it code in HTML
<input type="submit" value="Submit" class="btn" onclick="welcome()">
Try it code in JavaScript
function welcome(){
var first = document.getElementById("Player1Name").value;
var last = document.getElementById("Player2Name").value;
var Print_name = "Welcome " + first +" "+ last;
alert(Print_name);
}
your document.getElementById is referencing the wrong Id.
So if you text field is defined as
<input type="text" **id="Player1Name"** name="player1Name" placeholder="Name">
Then what you should be doing is document.getElementById("Player1Name").value
The same goes with the Player2Name field.
Hello I am here with a quick question on sending user input to a div section of an html document. I asked this question earlier and it seemed to be too broad so I'm going to try to be more specific this time.
I am attempting to send a user input to the div onclick of the send button but every time the code is simply changing the text rather than printing the next text under it. I'm curious what I'm doing wrong with this. Thanks for reading and here's my code.
<div id="out"</div>
<input type="text" name="textIn" id="txtin">
<input type="button" value="Hit me" onclick="hello()"></input>
<script>
function hello() {
document.getElementById("out").innerHTML =
document.getElementById('txtin').value + "<br />"
}
</script>
https://jsfiddle.net/su0o83hj/1/
If you want to append to the existing text, use += instead of = in the function:
function hello() {
document.getElementById("out").innerHTML +=
document.getElementById('txtin').value + "<br />"
}
You have some syntax errors, fix it and it will works
<div id="out"></div>
<input type="text" name="textIn" id="txtin" />
<input type="button" value="Hit me" onclick="hello()" />
<script>
function hello() {
document.getElementById("out").innerHTML +=
document.getElementById('txtin').value + "<br />"
}
</script>
You can use Element.insertAdjacentHTML() passing the first parameter beforeend:
var out = document.getElementById('out'),
txtin = document.getElementById('txtin');
function hello() {
out.insertAdjacentHTML('beforeend', txtin.value + '<br>');
}
<div id="out"></div>
<input type="text" name="textIn" id="txtin">
<input type="button" value="Hit me" onclick="hello()">
So I am relatively new to JavaScript but I have experience with programming. I have this code which allows the user to define how many addresses they would like to enter so then I can query google maps and find the geographic center. The problem with this is that it looks very unprofessional in the sense that they have to enter the number of fields on one page and then they are prompted with that many boxes on the next page. Is there any way to make only one form(with all the parameters I require for one entry) and then after they click submit, I append it to an array and then when they decide they have enough addresses they hit the final submit so then I can process the data using a PHP call? Any help would be great, but I am new to this so I might need more spelt out explanations, sorry. Thanks again!
TL;DR: I want to create a single entry field which when submit is clicked, the page does not refresh or redirect to a new page and appends the data entry to an array. From there the user can enter a new input and this input would also be appended to the array until the user has decided no more inputs are necessary at which point they would click the final submit allowing me to process the data.
Here is the code I have so far:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var c = 0;
$("#button1").click(function(){
c = $("#inputs").val();
$("#mydiv").html("");
for(i=0;i<c;i++){
$("#mydiv").append('<input type="text" id="data'+i+'" name="data'+i+'" /><br/>');
}
});
$("#button2").click(function(){
$.post("getdata.php",$("#form1").serialize(),function(data){
});
});
});
</script>
</head>
<body>
<form id="form1">
Type the number of inputs:
<input type="text" id="inputs" name="inputs" />
<input type="button" id="button1" value="Create" />
<div id="mydiv"></div>
<input type="button" id ="button2" value="Send" />
</form>
</body>
</html>
getdata.php
<?php
for( $i=0; $i<$_POST["inputs"] ; $i++){
echo $_POST["data".$i]."\n";
}
?>
Here is code:
EDIT: I rewrite the code, so you can also delete each address
$(document).ready(function(){
$("#add-address").click(function(e){
e.preventDefault();
var numberOfAddresses = $("#form1").find("input[name^='data[address]']").length;
var label = '<label for="data[address][' + numberOfAddresses + ']">Address ' + (numberOfAddresses + 1) + '</label> ';
var input = '<input type="text" name="data[address][' + numberOfAddresses + ']" id="data[address][' + numberOfAddresses + ']" />';
var removeButton = '<button class="remove-address">Remove</button>';
var html = "<div class='address'>" + label + input + removeButton + "</div>";
$("#form1").find("#add-address").before(html);
});
});
$(document).on("click", ".remove-address",function(e){
e.preventDefault();
$(this).parents(".address").remove();
//update labels
$("#form1").find("label[for^='data[address]']").each(function(){
$(this).html("Address " + ($(this).parents('.address').index() + 1));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post">
<div class="address">
<label for="data[address][0]">Address 1</label>
<input type="text" name="data[address][0]" id="data[address][0]" />
</div>
<button id="add-address">Add address</button>
<br />
<input type="submit" value="Submit" />
</form>
After form submit you can loop through addresses like this:
foreach ($_POST['data']['address'] as $address){
...your code
}
Hope this help! :)
Normally how I do this kind of stuff is to provide a user ability to add many input fields at client level and send them all in one array when submitting the form. That is more professional I believe. Try this JSFiddle to see what I mean.
<input type="text" name="address[]" />
if you want to POST dynamic value in a form you can do it like this:
<input type="text" name="adress[]" />
so in your case you could add new fields with javascript or jquery with the same name name="adress[]".
and in your PHP you get an array:
$adresses= $_POST['adress'];
foreach ($adresses as $adress) {
echo $adress;
}
FIDDLE DEMO
To process an array of inputs you can use the following convention:
HTML: simply add square brackets to the name attribute
<input type="text" id="data'+i+'" name="data[]" />
PHP: Post returns an array
for( $i=0; $i<$_POST["data"] ; $i++){
echo $_POST["data"][$i]."\n";
}
JAVASCRIPT: $("#form1").serialize() will retrieve all the inputs data as name=value pairs even the inputs that are added dynamically. There's no need to keep an array you can just process all of them at the end.
You don't need to create an array, $_POST is actually doing it all for you already.
So I suggest you do the following: using javascript (or jQuery), keep the button clicks, but make sure the form submission is prevented (using preventDefault on the form) [EDIT: You actually won't need this, as if the buttons are just buttons, no submit inputs, the form will not submit anyway], and just make sure you append another element every time they click a plus button or something; make sure you increment the name attributes of each input element that gets created.
When the user then creates submit, use submit the form via js, then on your getdata.php you can simply loop through all the values and use them that way you want. You will even be able to know the exact number by calculating the number of times a new input element has been added to the form.
I'll try to write up something for you in a minute, but if I was clear enough, you should be able to do that too.
EDITED: So here is what I've come up with; give it a try and see if this is something for you.
This is how the form would look like:
<form id="form1" name="myform" method="post" action="getdata.php">
Enter address 1: <input type="text" name="address-1" /> <input type="button" value="More" onclick="createNew()" />
<div id="mydiv"></div>
<input type="submit" value="Send" />
</form>
And this would be the js code:
var i = 2;
function createNew() {
$("#mydiv").append('Enter address ' + i +': <input type="text" name="address-' + i +'" /> <input type="button" value="More" onclick="createNew()" /><br />');
i++;
}
...and then getdata.php:
foreach ($_POST as $key => $value) {
echo 'The value for '.$key.' is: '.$value.'<br />';
}
here is a fiddle demo
I am studying web design for first year in university. We have just started and I am trying to do different things with my basic knowledge of html. My question is how can it show the text entered in a form after clicking a button? I tried something but it's not working.
This is my wrong code:
<body>
<script>
function name(name1)
{ alert ("Your name is" + name1)
}
</script>
Enter a name:
<form> <input type="text" name="name1"/></form> </br>
<button onclick="name(name1)">Click!</button>
</body>
You can to use querySelector, to get the element based using attribute selector.
<script>
function yourMethod(name1) {
var inputName = document.querySelector('input[name=' + name1 + ']').value;
console.log("Your name is: " + inputName)
}
</script>
Enter a name:
<input type="text" name="name1" />
<button onclick="yourMethod('name1')">Click!</button>
Try this
<body>
<script>
function name1(name)
{
alert("Your name is " + name);
}
</script>
Enter a name:
<form> <input type="text" name="name" id="name"/></form> </br>
<button onclick="name1(document.getElementById('name').value)">Click!</button>
</body>
try this
<body>
<script>
function name()
{
var value = document.getElementById('name1').value;
alert("Your name is" + value);
}
</script>
Enter a name:
<form>
<input type="text" id="name1" name="name1" />
</form>
</br>
<button onclick="name();">Click!</button>
</body>
make onclick="name()"
then function name(){ alert( document.querySelector("input[name='name1']").value ) }
what it does is when the button gets clicked, the function name is called. This will alert the text by finding the element with the querySelector. The query selector returns an element, if found. You can access every elements attribute with element.attributeName.
In this case you want to use querySelecor because querySelectorAll will return a nodelist. Where querySelector will return only an element
I am trying to make a simple code generator using inputs added by the user.
It will go something like this:
"predefined code" + UserInput1 + "predefined code" + "UserInput2"
I assume I will need to assign variables to the UserInput which will change depending on what it writes in the text box.
I will need also a function that will show the output as I press the button in a text area
But I lack the skills to compose it since I'm a very started in JavaScript.
Thank you in advance for your help!
Try below code
DEMO
<input type="text" id="a">
<input type="text" id="b">
<div id="result"></div>
<input type="button" value="See Code" onclick="magicCode();">
function magicCode() {
document.getElementById("result").innerHTML = "Hello " + document.getElementById("a").value + " Welcome " + document.getElementById("b").value;
}