JQuery- Input Value Isn't Changing? - javascript

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>

Related

In Chrome console, how can I print entered data?

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" />

passing value inputs from one to another with a text jquery

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>

Setting focus on input field on page load (so the user can start typing) in jQuery

I am trying to make it so that when the page loads, the user's mouse cursor is automatically in the input field, so he can start typing without having to move and click his mouse. However, it doesn't seem to work for me for some reason.
My HTML code:
<input type="text" placeholder="Search.." id="searchField">
<button type="submit" id="searchButton">Submit</button>
My JS/jQuery code:
$(document).ready(function() {
$("searchField").focus()
})
1.Need to add jQuery library
2.You forgot # in jQuery code.(As it need to be selector)
<input type="text" placeholder="Search.." id="searchField">
<button type="submit" id="searchButton">Submit</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(document).ready(function() {
$("#searchField").focus()
});
working snippet:-
$(document).ready(function() {
$("#searchField").focus()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="Search.." id="searchField">
<button type="submit" id="searchButton">Submit</button>
HTML already has that functionality, with the autofocus attribute. No need for JS.
Working snippet:
<input type="text" placeholder="Search.." id="searchField" autofocus>
<button type="submit" id="searchButton">Submit</button>

Getting input box to change url in HTML

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>

Remove all text values if search textbox is clicked

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: ''});
});
});

Categories

Resources