I'm trying to get the elements from textboxes nameBox and foodBox to be displayed in the paragraph id=message after the submit button is clicked, with the message:
“Hello <name in namebox>! We want to let you know that <food in foodbox> has 50% discount in our restaurant!”
But i can't figure out how to do that. I'm pretty sure i'm doing something (if not all) wrong but since i'm new at this i can't figure it out what.
<body>
<br>
<br>
<div>
<p id="message"></p>
</div>
Enter your name:
<input type="text" id="nameBox" value=""><br>
Enter your favorite food
<input type="text" id='foodBox' value=""><br>
<button id="submitButton">Submit</button>
<script>
var parent=document.getElementById("message");
var child=document.getElementById("nameBox");
parent.removeChild(child);
</script>
</body>
That's because parent is not the parent of child. To make it so, edit your code to put the two input elements inside the <p> tag:
<p id="message">
Enter your name:
<input type="text" id="nameBox" value=""><br>
Enter your favorite food
<input type="text" id='foodBox' value=""><br>
</p>
Here you go :
<html>
<head>
<script>
function showText(){
var name=document.getElementById("nameBox").value;
var food=document.getElementById("foodBox").value;
document.getElementById("msg").innerHTML="Hello " + name + " ! We want to let you know that has 50% discount in our restaurant! for " + food;
}
</script>
</head>
<body>
<br>
<br>
<div id="msg">
</div>
Enter your name:
<input type="text" id="nameBox" value=""/><br>
Enter your favorite food
<input type="text" id="foodBox" value=""/><br>
<input type="button" id="submitButton" onclick="showText()" value="Submit" />
</body>
</html>
You can make your alignments as you wish, try to use firebug (https://getfirebug.com/) in case of finding UI related issues. It is pretty easy to figure out what is wrong in the UI
Check your HTML. Maybe it should look like this?
<div id="message">
Enter your name:
<input type="text" id="nameBox" value=""><br>
Enter your favorite food
<input type="text" id='foodBox' value=""><br>
<button id="submitButton">Submit</button>
</div>
You can call function on clicking submit button and then change the message.
<input type="button" id="submit" value="Submit" onclick="somefunction()"/>
Here is the javascript:
function somefunction() {
var fieldNameElement = document.getElementById('message');
fieldNameElement.innerHTML = “Hello ! We want to let you know that has 50% discount in our restaurant!” ;
}
While changing the innerHTML you can add appropriate formatting tags as well.
Also you should add inputs in a table, and add border's and required formatting if required:
<table>
<tr>
<td>
Enter your name:
</td>
<td>
<input type="text" id="nameBox" value=""><br>
</td>
</tr>
<tr>
<td>
Enter your favorite food
</td>
<td>
<input type="text" id='foodBox' value=""><br>
</td>
</tr>
</table>
You can also think about using a Javascript library which provides lot of methods to make your life easy, would suggest JQUERY
Cheers !!
Related
I'm studying Javascript.
Todays's mission is print entered data on Chrome console.
I made some code that can type and submit button.
But I don't know how to print entered data on console.
I think 'console.log','getElementById' would be answer.
But I can't make code with those clues..
Anyone can help me please?
Thanks in advance.
<body>
<input type="text" name="mname" placeholder="Enter movie name" size="40">
<input id="active" type="submit" value="Search">
<script>
var m = document.getElementById('mname');
console.log(m);
</script>
</body>
<body>
<input type="text" id="mname" placeholder="Enter movie name" size="40">
<input id="active" type="submit" onClick="consoleData()" value="Search">
</body>
<script>
function consoleData () {
var m = document.getElementById('mname');
console.log(m.value);
}
</script>
You can try the basic HTML tutorials for this, please follow below which is one of them.
function print() {
var m = document.getElementById('mname').value;
console.log(m);
}
<body>
<input type="text" id="mname" placeholder="Enter movie name" size="40">
<input onclick="print()" type="submit" value="Search">
</body>
I believe this source may be useful to improve your knowledge https://www.w3schools.com/js/
You should add an event trigger for the console.log().
Like this:
<body>
<input type="text" name="mname" id="mname" placeholder="Enter movie name" size="40">
<input id="active" type="submit" value="Search" onclick="log()">
<script>
function log(){
var m = document.getElementById('mname');
console.log(m.value);
}
</script>
</body>
I think 'console.log','getElementById' would be answer.
Yes, you can use these two methods to achieve your task. Here is a snippet with some points to consider:
Change name attribute to id attribute on input as getElementById requires it
Use .value to get the input's text
Add onclick attribute to link input to the log function
function log() {
var m = document.getElementById('mname').value;
console.log(m);
}
<input type="text" id="mname" placeholder="Enter movie name" size="40" value="Superman" />
<input id="active" onclick="log()" type="submit" value="Search" />
<!DOCTYPE html>
<head lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
</head>
<body>
<section><b><b>
<form action="" target="_blank">
Bill No: <input type="text" name="bill no" size="">
<input type="submit" class="button" value="Add">
<input type="submit" class="button" value="Complete all entries">
<br><br>
Bill Details: <input type="text" name="bill no" size="50">
<br><br>
Amount: <input type="text" name="amount" pattern="[0-9]+" title="please enter amount"size="53">
<br><br>
<textarea rows="5" cols="50"></textarea>
<br><br>
<label for="To Pay">To Pay:</label>
<select name="mydropdown" id="To Pay">
<option value="Director">Director</option>
<option value="Cheif">Cheif</option>
<option value="RPC">RPC</option></select>
Cheque No: <input type="text" name="Cheque No">
<br><br>
Amount: <input type="text" name="amount" pattern="[0-9]+" title="please enter amount"size="15">
Date: <input type="date" placeholder="dd-mm-yyyy" name="Dated">
<input type="submit" class="button" value="Ok">
</form>
</article>
</section>
</body>
</html>
i want to crate a form in which i have two buttons on the top when i click on add button then it will be work as bill ,details bill no and amount = textbox(textarea) then these all entry are shown in the textarea and add another entry that all are show as a tablewhen when i complete my all entries i click on complete all entries and than total amount off all entries are show on the bottom of textarea and this total amount automatically show in the bottom amount field. please suggest how can i do this task
As you know the usage of jquery, so I use jquery to get the element:
$(document).ready(function(){
var total=0;
var temp="";
var tempResult=$("#tempResult");
$("#btn1").click(function(){
var billNo=$("#billNo").val();
var billDetails=$("#billDetails").val();
var amnt=$("#amnt").val();
tempResult.val(tempResult.val()+ billNo + "-" +billDetails+ "-" +amnt+"\n");
total+=parseFloat(amnt);
});
$("#btn2").click(function(){
tempResult.val(tempResult.val()+ total);
$("#totalAmount").val(total);
});
});
And I change :
<input type="text" name="amount" pattern="[0-9]+" title="please enter amount"size="15">
to
<input type="text" name="amount" id="totalAmount" pattern="[0-9]+" title="please enter amount"size="15">
That all.
First, you need to give an id for every element for example:
<input type="text" id="billNo" size="">
<textarea id="tempResult" rows="5" cols="50"></textarea>
And then add function to capture the button click event.
Change the following HTML:
<input type="submit" class="button" value="Add">
To:
<input type="submit" class="button" value="Add" onclick="addEntry()">
after that add a function:
function addEntry()
{
}
In this function,using the following coding to get the value of the element:
var billNo=document.getElementById("billNo").value;
Finally, using the following coding to write what you want to add to textarea:
var tempResult=document.getElementById("tempResult");
tempResult.value=billNo
For append value to textarea:
tempResult.value+=*what you want to add to textarea*
To parse input value as an integer, you need to use parseInt function, for decimal no. you may use parseFloat function.
Now, you have all the ingredient to complete your function.
For the total amount, ha ha, let you try first.
I would like to insert a number (example 1111) and after submitting get the output (command) like "access userid 1111 instance mbb"
The problem which i have is that the number should be into the text and also how to set the text properly.
See picture below:
This is what i have right now but not working as wished:
HTML:
<label for="number">number:</label>
<input type="text" name="number" id="number" />
<input type="submit" value="Submit">
<label for="output">output</label>
<input type="text" size="33px" name="output" id="output" />
JQuery:
$('#number').change(function() {
$('#output').val($(this).val());
});
Thank you so much for your support
Hope it helps.
$('#submit').click(function(){
var source = $('#source').val();
$('#target').val('Your val: ' + source + '. Enjoy :)');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="source">
<button type="submit" id="submit">Go</button>
<p>
<input type="text" id="target">
</p>
I have set of input boxes to add names and designaions.and iwant to print those in a <p> tag when user click print button. how to proceed.
<div class="form-group">
<label for="inputRegNo" >Name & Designation<span style="color:#c0392b;padding-left:5px;">*</span></label>
<div class="form-group">
<input required type="text" name="fname[]" class="fname" onkeyUp="document.getElementById('refa5').innerHTML = this.value" placeholder="Name" />
<input required type="text" name="lname[]" placeholder="Designation" />
</div>
</div>
<div class="form-group">
<label for="inputRegNo" ></label>
<div class="form-group">
<input type="text" name="fname[]" placeholder="Name" class="fname" onkeyUp="document.getElementById('refa5').innerHTML = this.value" />
<input type="text" name="lname[]" placeholder="Designation" />
</div>
</div>
print
<div>
<label>Name & Designation</label>
<p id="refa5"> - </p>
</div>
its looks you are new in javascript.. it's simple give the name to all the input field like
<input type="text/checkbox" name="txtName">
and in javascript you can access this field value by
<script type="text/javascript">
var name = document.getElementsByName("txtName");
</script>
if you wish to print the element on button click simply specify their click event on javascript like
function onClick() {
alert("helo from click function");
}
and then on button ..
<input type="button" onclick="onClick()">
w3schools is a great resource for this. Here is some example code on how to do this :
<button onclick="myFunction()">Click me</button>
<input id="inputID"></input>
<p id="demo"></p>
<script>
function myFunction() {
var inputID = document.getElementById("inputID").value;
document.getElementById("demo").innerHTML = inputID;
}
</script>
What the code above does is it takes the value of an input, then it sets the innerHTML of a <p> element to it. You can obviously do this with other things like <h1> elements as well.
Hi so I have an input box with a button that when click goes to a url. I want it so whatever the user types it goes to the url + the added words in the input box. So lets say its default google.com/search/?q= then when the user types "cat" itll be google.com/search/?q=cat
<input type= "button" onclick="location.href=\
'http://www.google.com/search/?q=';"\
value="Search Google Images"/><br><br>
<br><br> Search item:<input type="text" id="dropdownID"><br><br>
Append the value of the input field with document.getElementById('dropdownID').value:
<input type="button" onclick="location.href='http://www.google.com/search/?q='+document.getElementById('dropdownID').value" value="Open Testrail Test Plan for Modiciation" />
<br>
<br>
<br>
<br>Search item:
<input type="text" id="dropdownID">
<br>
<br>
<input type= "button" onclick="loadUrl()" value="Search Google Images"/>
<br><br><br><br> Search item:<input type="text" id="dropdownID"><br><br>
<script>
function loadUrl() {
location.href = 'http://www.google.com/search/?q=' + document.getElementById('dropdownID').value;
}
</script>
I would use jquery for that:
https://jsfiddle.net/dqz1pvux/13/
<input id="search" type="submit" value="Search Google Images">
<input id="keyword" type="text" value="" placeholder="Type text here">
<script>
$(document).ready(function(){
$("#search").click(function(){
window.open("https://www.google.de/search?q="+document.getElementById('keyword').value+"&biw=1678&bih=790&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjNzbLf6OfQAhVD6RQKHZp5BRsQ_AUIBigB&dpr=1.09")
});
});
</script>