clear inputbox onclick image - javascript

this line renews the captcha image, it should clear the inputbox 'captcha' aswell.
<div id="refresh_button"><img src="refresh.gif"/></div>
<input type="text" maxlength="6" name="captcha" id="captcha" class="captcha_inputbox" />
So I have to modify the onClick, but I can't find this, not even with google.
Your help is much appreciated

You can clear out the textbox's value by using:
document.getElementById('captcha').value = '';
Alternatively, if you're using jQuery:
$('#captcha').val('');

it would be better to do this in script tags instead. For instance you can do something like this:
<script type='text/javascript'>
function refreshimg() {
// do the refreshing here
// since your input text has an id of 'captcha'
document.getElementById("captcha").value = "";
return false;
}
</script>
then in your HTML, you would do
<div id="refresh_button"><img src="refresh.gif"/></div>
<input type="text" maxlength="6" name="captcha" id="captcha" class="captcha_inputbox" />

Related

HTML/JavaScript - Value of Input doesn't update (Element.value = Null)

Hello I just started today so im pretty new.
I have to get a string, which a user can enter on the website into my JavaScript file. I found out that I should use document.getElementById("myID").value to get the value of an input field on the html site. Here is my problem: I can't use the brackets arround my input and button because a submit will force a reload of the site and my functions wont have any affect.
So I have to get the string on the fly into my JavaScript file.
This is all I have at the moment:
<div id="searchDiv">
<input type="text" id="searchInput" placeholder="Search for Gifs..." value="" />
<input type="button" id="searchButton" value="Search"></button>
</div>
And my JavaScript file:
var searchButton = document.getElementById("searchButton");
var searchInput = document.getElementById("searchInput").value;
searchButton.addEventListener("click",
function() {
function(parameter)
}
)...
So document.getElementById("searchInput").value; give back null even if the input field has been edited.
I hope you can help me.
It is because your are storing the searchInput value even before the button is clicked,so the value would be empty irrespective of anything that you enter as input
Try accessing on the click event of the button
check this snippet
var searchButton =document.getElementById("searchButton");
var searchInput=document.getElementById("searchInput");
window.onload=function(){
searchButton.addEventListener("click",
function() {
alert(searchInput.value);
}
)
}
<div id="searchDiv">
<input type="text" id="searchInput" placeholder="Search for Gifs..." value="" />
<input type="button" id="searchButton" value="Search">
</div>
Hope it helps
You should use
<button></button>
Instead of
<input></button>
What I did was
<div id="searchDiv">
<input type="text" id="searchInput" placeholder="Search for Gifs...">
<button id="searchButton">Search</button>
</div>
<script type="text/javascript">
document.getElementById("searchButton").onclick = function(){
alert(document.getElementById("searchInput").value);
}
</script>

How do I clear the previous text field value after submitting the form with out refreshing the entire page?

I am doing a web application using javascript and html that has a form containing a text field, button. When I enter a number in that text field and submit by clicking on that button, text areas are generated dynamically. Once my form is submitted some text areas are created but if I am not satisfied with existing text areas then again I enter some value with out refreshing page. But the text field value entered previously prevails showing the new text areas below the existing text areas on the page.
So, how do I clear the value with out refreshing the page.
<div>
<html>
<input type="text" name = "numquest" id ="numquest" value="" size="5" style="" disabled>
<input type="button" value="submit" onclick="getFields();">
</div>
</html>
<javascript>
var num_q=document.getElementById('numquest').value;
//code for dynamic creation
</javascript>
try this:
Using jQuery:
You can reset the entire form with:
$("#myform")[0].reset();
Or just the specific field with:
$('#form-id').children('input').val('')
Using JavaScript Without jQuery
<input type="button" value="Submit" id="btnsubmit" onclick="submitForm()">
function submitForm() {
// Get the first form with the name
// Hopefully there is only one, but there are more, select the correct index
var frm = document.getElementsByName('contact-form')[0];
frm.submit(); // Submit
frm.reset(); // Reset
return false; // Prevent page refresh
}
You can set the value of the element to blank
document.getElementById('elementId').value='';
Assign empty value:
document.getElementById('numquest').value=null;
or, if want to clear all form fields. Just call form reset method as:
document.forms['form_name'].reset()
you can just do as you get that elements value
document.getElementById('numquest').value='';
<form>
<input type="text" placeholder="user-name" /><br>
<input type=submit value="submit" id="submit" /> <br>
</form>
<script>
$(window).load(function() {
$('form').children('input:not(#submit)').val('')
}
</script>
You can use this script where every you want.
It will clear all the fields.
let inputs = document.querySelectorAll("input");
inputs.forEach((input) => (input.value = ""));
HTML
<form id="some_form">
<!-- some form elements -->
</form>
and jquery
$("#some_form").reset();
I believe it's better to use
$('#form-id').find('input').val('');
instead of
$('#form-id').children('input').val('');
incase you have checkboxes in your form use this to rest it:
$('#form-id').find('input:checkbox').removeAttr('checked');
.val() or .value is IMHO the best solution because it's useful with Ajax. And .reset() only works after page reload and APIs using Ajax never refresh pages unless it's triggered by a different script.
I had that issue and I solved by doing this:
.done(function() {
$(this).find("input").val("");
$("#feedback").trigger("reset");
});
I added this code after my script as I used jQuery. Try same)
<script type="text/JavaScript">
$(document).ready(function() {
$("#feedback").submit(function(event) {
event.preventDefault();
$.ajax({
url: "feedback_lib.php",
type: "post",
data: $("#feedback").serialize()
}).done(function() {
$(this).find("input").val("");
$("#feedback").trigger("reset");
});
});
});
</script>
<form id="feedback" action="" name="feedback" method="post">
<input id="name" name="name" placeholder="name" />
<br />
<input id="surname" name="surname" placeholder="surname" />
<br />
<input id="enquiry" name="enquiry" placeholder="enquiry" />
<br />
<input id="organisation" name="organisation" placeholder="organisation" />
<br />
<input id="email" name="email" placeholder="email" />
<br />
<textarea id="message" name="message" rows="7" cols="40" placeholder="сообщение"></textarea>
<br />
<button id="send" name="send">send</button>
</form>
You can assign to the onsubmit property:
document.querySelector('form').onsubmit = e => {
e.target.submit();
e.target.reset();
return false;
};
https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onsubmit

Show a javascript variable on html textbox

All I have to do is to show a number in a textbox and a button which add 10 every time I press it, here's my code (it doesn't work).
<head>
<script type="text/javascript">
var n=parseInt(ocument.forms["formNum"]["numero"].value);
document.getElementById("numero").value=n;
function sumar() {
n=document.forms["formNum"]["numero"].value+10;
document.forms["formNum"]["numero"].value=n;
}
function inicializar() {
n=document.forms["formNum"]["numero"].value=0;
}
</script>
</head>
<body>
<form name="formNum">
<p>
<input type="text" size="10" name="numero" id="numero" />
</p>
<p>
<input type="button" name="sumar" value="Sumar" onclick="sumar()" />
<input type="button" name="inicializar" value="Iniciar a 0" onclick="inicializar()" />
</p>
</form>
</body>
<body>
<script type="text/javascript">
function sumar(){
document.getElementById("numero").value = parseInt(document.getElementById("numero").value)+10;
}
function inicializar(){
document.getElementById("numero").value=0;
}
</script>
<form name="formNum">
<p>
<input type="text" size="10" name="numero" id="numero" value="0" />
</p>
<p>
<input type="button" value="Sumar" onclick="sumar()" />
<input type="button" value="Iniciar a 0" onclick="inicializar()" />
</p>
</form>
</body>
Five suggestions.
It is always better to give unique ids to your html elements.
Never name your HTML elements and javascript functions the same.
If you want to access the html element from javascript, if you know the id, use getElementById.
Use Firebug or Developer tools from the browser, to debug.
If you want to access your elements with the hierarchy, use elements in the form like this document.forms["formNum"].elements["numero"].value. Check this example
Demo: http://jsfiddle.net/DPJCR/
This code should work:
<input type="text" id="mytext">
<script type="text/javascript">
var elem = document.getElementById("mytext");
elem.value = "My default value";
</script>
See: Set the value of an input field
Maybe you are getting an exception from the parseInt that prevents the value from changing.
If it is an option to use jQuery, try this:
function sumar(){
$("#numero").attr("value", parseInt($("#numero").attr("value"), 10)+10);
}
Try this this will help you
var count=10;
$('#btnSumar').click(function(){
if($('#numero').val()=='')
{
$('#numero').val(count);
}else
$('#numero').val(eval($('#numero').val())+count);
});
$('#btnInc').click(function(){
$('#numero').val('');});
Fiddle here

Grey-out (disable) HTML textarea when checkbox is ticked

I don't really know much Javascript yet, I was hoping somebody could help me understand how to solve my problem:
My HTML form has a checkbox and then a textarea:
<form>
<input type="checkbox" name="detailsgiven" />
<textarea name="details"></textarea>
</form>
I want it so that the textarea gets disabled when the checkbox is ticked so that the user cannot click it and enter text.
I've had a look here and on google, I couldn't find any clear examples of how to do it.
I'm guessing this can be done in Javascript, but I'm feeling a bit out of my depth. Can somebody explain to me how to do this, preferably without using a third party library?
<form>
<input type="checkbox" name="detailsgiven" onchange="toggleDisabled(this.checked)"/>
<textarea name="details" id="tb1"></textarea>
</form>
<script>
function toggleDisabled(_checked) {
document.getElementById('tb1').disabled = _checked ? true : false;
}
</script>
This extremely easy to do with jQuery. Everyone uses jQuery, so should you ;-).
<form>
<input type="checkbox" name="detailsgiven" id="detailsgiven" />
<textarea name="details" id="details"></textarea>
</form>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#detailsgiven").change(function() {
if($(this).is(":checked")) {
$("#details").attr("disabled", "disabled");
}
else {
$("#details").removeAttr("disabled");
}
});
});
</script>
try this:
if ($('input:checkbox').is(':checked')) {
$('textarea').attr('disabled', 'disabled');
}
<form>
<input type="checkbox" name="detailsgiven" onclick="document.getElementById('t').setAttribute('disabled','disabled');" />
<textarea id="t" name="details"></textarea>
</form>
Notice how onclick event of checkbox is used to execute some javascript code.
if you give your html elements ids, you can access the elements in javascripts through getElementById method of javascript DOM (document object model).
And once you have the element, you can set/get it's attributes, do whole lot of things.
According to my understanding to your requirement. At first, textarea is disabled. When detailsgiven checkbox is checked, textarea is enabled and checkbox is disabled so that he cannot changed. Try like this.
<!DOCTYPE html>
<html>
<head>
<script>
function valueChanged()
{
var element1 = document.getElementById("detailsgiven");
var element2 = document.getElementById("details");
if(element1.checked)
{
element2.disabled=false;
element1.disabled="disabled";
}
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="detailsgiven" id="detailsgiven" onchange="valueChanged()"/>
<textarea name="details" id="details" disabled="true"></textarea>
</form>
</body>
</html>
All you have to do is when you mark the checkbox, just add the attribute disabled="disabled" in the textarea.
Checkout the jsfiddle I have added
http://jsfiddle.net/Q9Lg4/

Putting specific element into variable

how can i get a specific element of a text input into a variable via javascript, in other words take the example below
<form id="123">
<input type="text" id="supply_qty" />
<input type="submit" name="submit" id="123" />
</form>
How do i get the element within the text input into a variable when the submit button is clicked, the problem i have is that i have multiple instances of the code above, with lots of text inputs, so i only want to get the element specific to the submit button clicked. Hopefully you will get what i mean. The reason i need this done via JavaScript and not php etc... is that i later want to use ajax with it, but for the moment i just need the variable.
Thanks
The most easiest way is to give and id to the element and user getElementById() method to grab the element on variable. Just like what you are doing right now
Simple Example:
var button = document.getElementyById("123");
button.onclick = function() {
var text = document.getElementById('supply_qty'); //now you got your element in varaiblle
};
Using jQuery make a slight change to your markup. I am just going to add some classes.
<form>
<input type="text" class="textbox" />
<input type="submit" class="submit" name="submit" />
</form>
then
$(".submit").click(function() {
var txtbox = $(this).parent("form").children(".textbox")[0];
});
Or, it might be better to bind to the submit handler of the form, on that case, give a common class to the form.
<form class="tinyforms">
<input type="text" class="textbox" />
<input type="submit" class="submit" name="submit" />
</form>
Then
$('.tinyforms').submit(function() {
var txtbox = $(this).children(".textbox")[0];
});
If you accept using jQuery you can do this:
DOM
<form class="form" action="false">
<input type="text" value="some input" name="textInput" />
<input type="text" value="some text" name="textInput2" />
<input type="submit" class="sumbit" value="Send" />
<div id="results"></div>
</form>​​​​​​​​​​​​​​​​​​​
And JavaScript
$(".form").submit( function(){
var inputs = $(this).serializeArray();
$.each(inputs , function(i, input){
$("#results").append(input.value + "<br />");
});
return false;
} );​
EDIT: Updated code and Fiddle: http://jsfiddle.net/65Xtp/4/

Categories