focus method on text box not actually sets the focus - javascript

I have a strange behaviour here with focus method.
I Just want to understand why it is happening like this.
Case 1:
With the below code when I come out of last element i.e driveD hyperlink ,focus is not getting set to first text box even though I applied .focus() to first text box.
function lastFocusOut() {
alert('focus out ,setting focus to first text box');
document.getElementById('nameId').focus();
}
input,a,button{
display:block;
margin:10px;
}
<form>
<input id="nameId" type="text" name="name"> drive
<input id="nameId1" type="text" name="name">
<input type="submit" value="test" />
<input type="text" name="name"> driveE </form> driveD </body>
Case 2:
When I add a buttton after the last hyperlink It sets the focus back to first text box.
function lastFocusOut() {
alert('focus out ,setting focus to first text box');
document.getElementById('nameId').focus();
}
input,a,button{
display:block;
margin:10px;
}
<form>
<input id="nameId" type="text" name="name"> drive
<input id="nameId1" type="text" name="name">
<input type="submit" value="test" />
<input type="text" name="name"> driveE </form>
driveD </body>
<button type ="submit" >Submit</button>
I want to understand two things here.
1)Why the focus is not getting set to first text box in case 1.
2)What really makes the difference just by adding the button at the end ,which is making the code work as expected.

Related

Input go down after I changed his value

I never seen this problem before, hope some can help.
When I change input value attribution from S to G using jquery the input go down.
Edit: I found the problem, I just needed to add to the main div of the inputs this css:
display:inline-flex;
$('body').on("click", "#submit", function() {
$('#input1').attr('value', 'G');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="inputs" id="input1" type="button" value='S' maxlength="1" />
<input class="inputs" id="input2" type="button" value='T' maxlength="1" />
<input type="submit" id="submit" maxlength="1" value="change"/>
This code is almost the same to my code (instead of my inputs css)
the result in my code: (image)
you can see in the image how to inputs that I changed their value go down, and the empty inputs stay in place.

Show/hide div and scroll to it

When the user click on the form I am trying to show and hide a form and also trying to scroll down to see the form, the code that I have works after the first click. If i click for the first time it "shows the form but doesn't scroll down" after the first click it work fine. can someone explain me what am i doing wrong.
$('#showForm').click(function()
{
$('.formL').toggle("slow");
$('.formL').get(0).scrollIntoView()
});
HTML:
<div class="formL" style="display: none">
<form action="">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
</div>
The problem is that in that function you try to scroll to the form while it's still not visible. To fix this, call scrollIntoView() in the callback of toggle() function. See the example here: https://jsfiddle.net/ux0qt5nn/
The issue is that on your first click, the element isn't there yet. Put the scroll function into a callback and you'll be good to go.
$('#showForm').click(function(){
$('.formL').toggle("slow", function() {
$('.formL').get(0).scrollIntoView();
});
});
$('#showForm').click(function(){
$('.formL').toggle("slow", function() {
$('.formL').get(0).scrollIntoView()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="buttonForm" id="showForm"><span>Click here to see form</span></button>
<br><br><br><br><br><br><br><br><!--Extra lines to show scroll-->
<div class="formL" style="display: none">
<form action="">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
</div>
As explained in other answers, you are trying to scroll an element into view before it's visible and before it's reached its actual height. You can use the following approach to scroll to the amount necessary to display the form and still let the user see the animation. See comments in the code.
$('#showForm').click(function() {
var formL = $('.formL').show(), // show the form wrapper in order to get its height
formLHeight = formL.height(),
formLForm = formL.find('form').hide(); // hide the form itself instead
formL.height(formLHeight);
formLForm.toggle("slow", function() {
// optionally, reset the height
formL.height('auto');
});
// this line is only needed so that the code snippet will not scroll the
// outer browser window, but only the iframe content. If you're not in an iframe,
// you can just use the original scrollIntoView() approach instead
document.documentElement.scrollTop = formL[0].offsetTop;
// formL.get(0).scrollIntoView();
});
#spacer {
background: red;
color: #fff;
height: 80vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="showForm">show form</button>
<div id="spacer">some long content</div>
<div class="formL" style="display: none">
<form action="">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
</div>

HTML form action search, one text box, 2 buttons, 2 possible results

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>

required field with two submnit button in same form

I set a required field for all the fields in form and having two submit button.
and want the required data on only for one submitonly. In another submit i dont want required with form fields how to prevent the requied field in another submit button.
<form action="data.php">
name<input type="text" name="name" required>
std<input type="text" name="name" required>
class<input type="text" name="name" required>
<input type="submit" name="submit" value="submit">
<input type="reset" name="reset" value="clear">
<input type="save" name="save" value="save">
</form>
in this given code the required field shoud alert only when i click on submit .and do not alert on click of save is it posible any way
You may consider catching submit events and doing different checks according to what button is pressed. Also please note that the required attribute will always make your input truly required. Here I used a custom attribute, that has no special property, but I would then use it to identify in my custom code what fields are required.
Here is how it would look like in Javascript using jQuery:
<form id="your_form" action="data.php">
name<input type="text" name="name" is_required>
std<input type="text" name="name">
class<input type="text" name="name" is_required>
<br />
<input type="submit" name="submit2" value="submit">
</form>
<input type="submit" name="submit" value="submit with check">
var ok;
$('[name=submit]').on('click', function(e) {
ok = true;
$('[is_required]').each(function() {
if (!$(this).val()) ok = false;
});
if (!ok) {
alert("Please fill in all the required fields");
} else
$("#your_form").submit();
});
You may see this code in action here: http://jsfiddle.net/z9dkjdtz/
Use the formnovalidate attribute in a button to specify that normal HTML5 form validation (such as checking that all required fields have value) be suppressed:
<input type="submit" name="save" value="save" formnovalidate>
Note: type="save" is invalid and gets ignored, so the the element would create a text input box (since type="text" is the default).

How Do I pass a value in a input box, to another input box

I am trying to pass values between boxes.
So, When a User types inside of the first text box:
<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="submit" name="design1" id="butval" value="Choose Design"></input>
Then they click the 'choose design' button, and what they typed in, gets passed to another
input text box on the same page.
this is the second input box i want to pass it to.
<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">
Any help would be much appreciated
thank you
Live Demo
Instead of a submit type input use a button type input.
HTML
<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="button" name="design1" id="butval" value="Choose Design"></input>
<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">
JS
window.onload = function(){
document.getElementById('butval').onclick = function(){
document.getElementById('billing_last_name').value = document.getElementById('valbox').value;
}
};
First add a clicklistener for the submit button and inside that callback pass the text through the elements
document.getElementById("butval").addEventListener("click", function(event){
var text = document.getElementById("valbox").value;
document.getElementById("billing_last_name").value = text;
event.preventDefault();
return false;
});
this is by far easiest in jquery given
<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="submit" name="design1" id="butval" value="Choose Design"></input>
<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">
use a simple
$("#butval").click(function(event){
$("#billing_last_name").html("<p>"+$("#valbox").html()+"</p>");
event.preventDefault();
});
but better change type="submit" to type="button" then you can remove the essentially unnecessary line event.preventDefault();

Categories