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" />
Related
I know it's a silly question of this type, but im new to JS and im learning coding step by step. I'm curious how would i set up sessions for input values in javascript if i have this type of coding?
<input type="text" id="name" >
<input type="text" id="lastname">
<input type="submit" value="submit" id="btn">
Again i want to apologize for this question , and thank you for the help that you can offer me about this .
Now this code had help me out.What i wanted to do is to store the values of the input fields into sessions and be able to display them into the browser likethis:
<body>
<input type="text" id="name" ><br><br>
<input type="text" id="lastname"><br><br>
<input type="submit" id="btn" value="set sessions"><br><br>
<p id="para"></p>
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){
var name=document.getElementById("name").value;
var lastname=document.getElementById("lastname").value;
sessionStorage.setItem("name",name);
sessionStorage.setItem("lastname",lastname);
document.getElementById("para").innerHTML=sessionStorage.getItem("name")+"
"+sessionStorage.getItem("lastname");
}
</script>
</body>
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 don't understand why the value isn't changing for this input from the website. I've tried this jquery code:
$('input[type=text].u').val('http://website/');
But it isn't changing or working:
https://jsfiddle.net/cq4e02yj/
Also I've tried to trigger click the button but that isn't working either.
-Thanks
Here's a first working solution. You are missing the quotes around type="text". Hope it helps.
$(document).ready(function() {
$("#myButton").click(function(){
$('input[type="text"]').val('http://website/');
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<center><input name="u" id="input" size="60" class="textbox" value="http:/s/" type="text"><input value="Change My IP Address" id = "myButton" class="button" type="submit"></center>
Here's a second solution without clicking on button.
$('input[type="text"]').val('http://website/');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<center><input name="u" id="input" size="60" class="textbox" value="http:/s/" type="text"><input value="Change My IP Address" id = "myButton" class="button" type="submit"></center>
The input does not have a class of 'u'. .u is a class selector. If you put that on the class then your fiddle works.
If you want to keep the selector the same...
$('input[type=text].u').val('http://website/');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center><input name="u" id="input" size="60" class="textbox u" value="http:/s/" type="text"><input value="Change My IP Address" class="button" type="submit"></center>
can anyone help me ...how to remove all values from my name(textboxes) if the search textbox is clicked? my current code wont work help me guys please.
html code:
<input class="search_textbox" autocomplete="off" type="text" name="search" id="query" onChange="removeText()" />
<input class="search_form_input" placeholder=" 1.)" name="name1" id="name1" readonly type="text" />
<input class="search_form_input" placeholder=" 2.)" name="name2" id="name2" readonly type="text" />
script code:
<script type="text/javascript">
function removeText(){
$(".search_form_input").val('');
}
</script>
This should work.
$(document).ready(function(){
$('.search_textbox').on('click', function(){
$('.search_form_input').val('');
});
});
After reading your comment I realized you're probably talking about removing the placeholder values. Try this.
$(document).ready(function(){
$('.search_textbox').on('click', function(){
$('.search_form_input').attr({placeholder: ''});
});
});
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 !!