lose focus() on input - javascript

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function fiction()
{
shohai.javat.focus();
}
</script>
</head>
<body>
<form name="shohai">
<input type="text" name="javat" placeholder="this is the text" >
<br>
<br>
<input type="text" name="kamel" placeholder="this is the text 2" onblur="fiction2()">
<br>
<br>
<button onclick="fiction()">Aceptar</button>
</form>
</body>
</html>
thank you for answer me.
im traying to focus the javat input, it works but instantly loose his position. Why?
i searched in the web whit bad luck.

Well, it seems to me that when you press the "Aceptar" button, the input does focus, but the form also submits, effectively reloading the page, and giving the impression that the focus is lost. This is because a <button> tag without any type attribute will default to submit. So, simply add a type="button" to the tag, so it is <button type="button">.
The full code with that change:
<form name="shohai">
<input type="text" name="javat" placeholder="this is the text" >
<br>
<br>
<input type="text" name="kamel" placeholder="this is the text 2" onblur="fiction2()">
<br>
<br>
<button type="button" onclick="fiction()">Aceptar</button>
</form>
And like other users said, it is not very clear what you want to do. Do you want "Aceptar" to... submit the form or just focus the input? You can't submit and focus at the same time (WELL, you can, but submitting a form reloads the whole page). And it'd also be a better idea to identify your elements via DOM methods, I didn't even know you could just do shohai.javat, to be honest.

Related

Add Text Input to Hyperlink

I'm trying to accomplish a feature where a user can type a piece of text into an input box, click submit and they'll be taken to a webpage which includes the text they submitted in the url.
For example, if the user entered the word 'apple' in the text and clicked submit, they would be taken to http://example.com/link.aspx?username=apple&jump=1 or if they entered the word 'orange', they would be taken to http://example.com/link.aspx?username=orange&jump=1.
I've tried the following code, but to no avail - it doesn't send the user anywhere on submit.
<form method="get">
<input type="text" value="11" id="input">
<button type="button" id="button">Click Me!</button>
</form>
<script>
$(document).ready(function(){
$('#button').click(function(e) {
var inputvalue = $("#input").val();
window.location.replace(" http://www.example.com/page/"+inputvalue);
});
});
</script>
Why you're trying to use JQuery when you can do it much easier with PHP
Form
<form action="form.php" method="get">
<input type="text" name="n" />
<input type="submit" />
</form>
PHP side - form.php
header("Location: http://yourdomain/page/".$_GET['n']);
your code works for me.
are you sure you added jquery before your script?
add this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Do not use jQuery for this. A simple form with get method will work fine.
<form name="sample" method="get">
<input name="username" type="text" value=""/>
<input name="submit" type="submit" value="submit"/>
</form>
This will automatically submit the form once user fills field and click submit button in the format you are looking for.

My iframe won't keep its src value after it has been changed with javascript

I am new to working with iframes, and HTML/JavaScript in general. I am trying to change the iframe src when the user clicks on the submit button. However, for some reason the src value keeps reverting to the original value after I change it. Please ignore the unusual id names. :)
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Card Getter</title>
<script>
function get(){
var name = document.getElementById("card").value;
document.getElementById("toast").src="http://gatherer.wizards.com/Pages/Search/Default.aspx?action=advanced&name=+["+name+"]";
alert(name);
};
function check(){
alert(document.getElementById("toast").src);
};
</script>
</head>
<body>
<iframe src="" id="toast"></iframe>
<form>
<p>Card Name:</p>
<br>
<input type="text" id="card">
<br>
<input type="submit" onclick="get()" value="Submit">
</form>
<form>
<input type="button" onclick="check()" value="check">
</form>
</body>
</html>
Thanks for the help.
This happens because your form is submitted when the button is pressed. Since you didn’t specific a form action, the current page is assumed—so this results in a reload which resets the iframe’s src.
As a quick fix, you can add return false; to your onclick handler:
<input type="submit" onclick="get(); return false;" value="Submit">
This will prevent the form from being submitted.

when i press enter key, checkbox displayed in <div> disappears

This is the code which I tried, it should work like this: Text written in text-box, should appear as check-box in div tag.
I used onchange() function. It worked fine when I moved out of text box, but when I pressed Enter key, check-box appears for few seconds and disappears. Nothing is displayed in div.
How to solve this problem? What really happens when I press Enter while writing in text-box?
<html>
<body>
<form id="form1" name="form1" method="post" action="">
<p>
<label for="textfield">Hello</label>
<input type="text" name="textfield" id="textfield" onChange="add_items(this.value)" />
</p>
<br>
<div id="item"></div>
</form>
<script>
k=""
function add_items(m)
{
k=k+"<input type=checkbox name=menu[] id=menu[] value="+m+">"+m+" ";
document.getElementById("item").innerHTML=k
}
</script>
</body>
</html>
You are submitting the form by pressing the Enter key.
Add onsubmit="return false;" to your form tag.
onsubmit="return false;" will solve your issue

when setting the value of an input field, it just appears for a brief moment.

I am sure I am missing some basic part here, but have a look at my very simple code:
<html>
<head>
<script>
function showscore(){
var score = document.createTextNode("test");
var placeholder = document.getElementById("field");
placeholder.value = score.nodeValue;
}
</script>
</head>
<body>
<form>
<input type="text" id="field"/>
<input type="submit" value="Show score" onclick="javascript:showscore()" />
</form>
</body>
</html>
When I run it, the result (for the moment, the word "test") appears inside the input field for a very brief moment and then goes away.
What extremely simple and easy thing I am missing? :-)
Thanks very much.
That's because the page is submitting the form. Just change type="submit" to type="button" or prevent the form from submitting.
It's because your button is an <input type="submit /> so after your Javascript is executed, the browser submits the form.
If you don't want the form to submit, you could use an <input type="button" /> instead.
Alternatively you could leave it as a submit and return false; after the showscore() call. That will prevent the form from submitting.

Why can't I use onsubmit to change innerHTML?

I need to use form fields in an English/Amino Acid Code translater. The code below is simplified to show the problem I'm having. I want to change some text with a javascript function.
If I use an input of type: button with onclick it works.
A submit button with onsubmit in a form changes the text for a split second, then it changes back. I need to use a form for my translation program so how can I make it work?
Extra Credit: Why does it change for a split second with onsubmit?
<html>
<head>
<script type="text/javascript">
function changeTo(text){
document.getElementById("p1").innerHTML=text;
}
</script>
</head>
<body>
<h1 style="text-align:center;">Change text in an element</h1>
<!--
<form onsubmit="changeTo('Hello World');">
<input type="submit" />
</form>
-->
<input type="button" onclick="changeTo('Hello World');" />
<p id="p1">text</p>
</body>
</html>
It's changing it back because the form is submitting. It posts to the same page, and if you are on a local machine it might be so quick you don't notice. Try:
<form onsubmit="changeTo('Hello World');return false;">
<input type="submit" />
</form>
Return false at the end there will stop the submission process.

Categories