I have a form with a textbox and then another form with three textboxes.
The text I enter in the first textbox (id="logoName") should be visible in the other three (ids v1 - v3) when i click the button. I tried the following, but when I click the button, the text in the first box disappers instead of showing in the others as well... what did I do wrong? Thanks a lot for your help!!!
JS
var logoName = document.getElementById("logoName");
var v1 = document.getElementById("v1");
var v2 = document.getElementById("v2");
var v3 = document.getElementById("v3");
var button = document.getElementById("button");
function sync() {
v1.value = logoName.value;
v2.value = logoName.value;
v3.value = logoName.value;
}
button.onclick = sync();
CSS
p {
font-size: 2em;
float: left;
margin-right: 2em;
}
.clear {
clear: both;
}
.overview {
margin-top: 2em;
}
input[type="text"] {
font-size: 2em;
width: 200px;
}
HTML
<form>
<label>Logo-Name</label>
<input id="logoName" type="text"/>
<button id="button">synchronise</button>
</form>
<form class="overview">
<input id="v1" type="text" /> <input id="v2" type="text" /> <input id="v3" type="text" />
</form>
You are experiencing 2 basic errors there:
1- you are not preventing the default action of the submit button and
2- you are not assigning properly the sync function to the button
Like this:
button.onclick = function() {sync();return false;}
you have some options:
you can set type="button" to your button so it doesn't submit your form, because this reload the full page and you are starting from 0, that is way the text disappears.
you can put your button out of the form tag.
and you are passing the result of sync() to the button.onclick, not the function. So, you can try
button.onclick = sync
happy codding
First, your JS code is calling the function as it is loaded:
button.onclick = sync();
should be
button.onclick = sync;
(you assign the function code to the event, not the function execution)
Second, when using the button tag inside the form, it seems to be automatically interpreted as a "submit" button. When clicking it, your form is "posted" to nowhere, so the value disappears. Try replacing the button tag with an input tag with type button.
Fiddle for you
http://jsfiddle.net/tn91aou1/3/
Related
I've been trying to figure out how I can change the background color of a form element when it is clicked on.
Heres the code:
<form id="form">
<input type="text" placeholder="text"/>
<input type="password" placeholder="more text" />
</form>
<script>
</script>
I'm trying to make it so the form element where it says "text" turns green when clicked, and the form element where it says "more text" turns red when clicked.
I've tried this, which didn't work:
<script>
let form = document.queryselector('input type="text"');
form.addEventListener('click', () => {
form.style.backgroundColor = 'green'
});
</script>
I'm very new to coding, so any help is very much appreciated! Thanks!
you should write ('input[type="text"]');
<script>
let form = document.querySelector('input[type="text"]');
form.addEventListener("click", () => {
form.style.backgroundColor = "green";
});
</script>
If you just want the input background to change color while it's focused. You can achieve this by using CSS selectors. No need for JS
input[type=text]:focus {
background-color: red;
}
Or if you want the form background to change
form:focus-within {
background-color:red;
}
The issue is with this line:
let form = document.queryselector('input type="text"');
First of all - the querySelector() method is camel cased - note the capital S. Secondly, your selector is not quite correct - you're looking for: input[type="text"]:
let form = document.querySelector('input[type="text"]');
form.addEventListener('click', () => {
form.style.backgroundColor = 'green'
});
<form id="form">
<input type="text" placeholder="text"/>
<input type="password" placeholder="more text" />
</form>
Notice though that this doesn't change the background colour back once you focus out - you might be better off adding event listeners for the focusout, focusin and maybe blur events - but better still, you can use CSS:
form input[type="text"]:focus {
background-color: green;
}
I would recommend add and Id or a css class into your input tag then you can use querySelector --> https://www.w3schools.com/jsref/met_document_queryselector.asp
Here is my objective :
I want to have a button on my html page that when it is clicked, makes and svg clickable, and when that svg is clicked, the page displays the message "clicked".
I have an html file where I create a button and a div that holds an svg file :
HTML File
*....*
<div>
<p>This will be replaced <br/>
<span id="id_to_be_replaced" style="color: red; font-weight: bold;"> Replaced normally </span>.</p>
</div>
*....*
<br />
<input name="button5" type="button" id="myButton5" onClick="button5_makeClickable('svgfile');" value="4. Svg clickable" />
<br />
*....*
<div>
<object id="svgfile" data = "exemple.svg" type="image/svg+xml"> </object>
</div>
What I want is that when I press my button5 it is supposed to make the svg file clickable, the function that I call are in another javascript file :
JS File
*....*
function setName(name) {
var elementHtmltoFill = window.document.getElementById("id_to_be_replaced");
elementHtmltoFill.innerHTML = name;
}
*....*
function button5_makeClickable(id) {
var drawing = document.getElementById('svgfile');
drawing.addEventListener('click', setName("clicked"));
}
*....*
However what happens is that "clicked" is displayed as soon as I click on the button (and not the svg).
I don't understand why since I add the event listener to drawing (therefore the svg)?
Thank you for your help !
PS : I am trying to understand the use of the function addEventListener, so I would prefer if your help uses it please.
You must make sure you listener for the svgfile object is outside the onclick function for your button otherwise you can only ever click on the svgfile object whenever you are simultaneously clicking on the button.
By doing setName("clicked") you instantly call the setName function instead of passing a reference to the function. You can solve this passing a function as the event handler argument in which you call setName("clicked").
function button5_makeClickable(id) {
var drawing = document.getElementById('svgfile');
drawing.addEventListener('click', function() {
setName("clicked")
});
}
But, your code currently is constantly adding event listeners to the <object> element. The element only needs 1 click event listener.
Use a flag. This a boolean (true / false) which acts like a switch to do or to not do something based on its value. Add a event listener to the <object> element and check in the event handler if the flag is true. If it is, change the text inside your span, if it isn't, don't do anything.
The example below shows how this could work.
Also, prevent using inline event listeners in your HTML. Using addEventListener is the way you should be learning how to attach event handlers.
var myButton5 = document.getElementById('myButton5');
var drawing = document.getElementById('svgfile');
var svgIsClickable = false;
function setName(name) {
var elementHtmltoFill = window.document.getElementById("id_to_be_replaced");
console.log(elementHtmltoFill)
elementHtmltoFill.innerHTML = name;
}
function button5_makeClickable(event) {
svgIsClickable = true;
}
myButton5.addEventListener('click', button5_makeClickable);
drawing.addEventListener('click', function() {
if (svgIsClickable === true) {
setName("clicked");
}
});
object {
display: block;
width: 50px;
height: 50px;
background: gray;
}
<div>
<p>This will be replaced <br/>
<span id="id_to_be_replaced" style="color: red; font-weight: bold;"> Replaced normally </span>.</p>
</div>
<br />
<input name="button5" type="button" id="myButton5" onClick="button5_makeClickable" value="4. Svg clickable" />
<br />
<div>
<object id="svgfile" data="exemple.svg" type="image/svg+xml"> </object>
</div>
I have a login.php page. The page contains php and html. When the login button gets clicked it will either log me in and Forward me to the welcome page or output "your Password or username is invalid". I want to change the height of an element. Sadly this doesen't work because php is reloading the page(witch makes sense). I heard i can make it work with Ajax.
Does somebody know how to do that?
Button:
<input id="button" type="submit" value="Log In" onclick="ausgabe();">
Javascript:
function hardgainer(){
var gainheight = document.getElementById('gain')
gainheight.style.height ="220px";
document.getElementById('gain').innerHTML = gainheight;
}
function ausgabe(){
document.getElementById('button') =
hardgainer();
}
You are submitting the form and therefore the page reloads. You should change the type to type="button" and then you can make something like this:
function hardgainer(){
var gainheight = document.getElementById('gain')
gainheight.style.height = "220px";
}
document.getElementById("gbutton").addEventListener("click", function() {
hardgainer()
})
#gain {
background: red;
width: 200px;
}
<input id="gbutton" type="button" value="Log In">
<div id="gain"></div>
i need to display image when form is processing
And this following code works problem is when i press submit image is displayed but if there are some error in form filed the form will not process but images is displayed
How do i make images display when user press submit button the image should appear only when form is processing
CODE
<input onclick="showImg()" class="btn btn-success" type="submit" name="submit" value="Search"/>
<img alt="" src="ajax-loader.gif" id="progress_img" style="visibility:hidden;">
<script language="javascript" type="text/javascript">
function showImg()
{
if (document.getElementById) {
(document.getElementById("progress_img")).style.visibility = "visible";
}
}
</script>
Well I have created a small demo. Check it out.
var progressImg = document.getElementById('progress_img');
var myForm = document.getElementById('myForm');
myForm.onsubmit = onFormSubmit;
function onFormSubmit() {
var error = false;
// Check for errors
if (error) {
// Show error messages
} else {
// Display the image
progressImg.style.display = 'block';
// Do your AJAX call
// and hide the image when AJAX is completed
}
// This is to prevent the form from submitting
return false;
}
#progress_img {
width: 20px;
height: 20px;
display: none;
background: #aaa;
}
<form id="myForm" action="#">
<input class="btn btn-success" type="submit" name="submit" value="Search" />
<img id="progress_img" src="ajax-loader.gif" alt="">
</form>
If anything is not clear for you, feel free to ask me.
I don't think I fully undestood what you are trying to do, but you could validate all the things you need using javascript.
The best way to achieve what you are willing is to change the button type to "button", not "submit" and then on the "onClick" "showImg()" function, replace it for the validations, then show the image, and then use the javascript submit function. I know it's easy with
document.getElementById("myForm").submit();
I have an html form that has a field that needs to become hidden and replaced with another when a button is clicked. I can't get rid of this field altogether because its value still must be submitted. Here is some sample code for reference:
<select id="Id.0" onChange="changeTextBox();">
<input type="button" id="addButton" value="Add" onclick="addQual();"/>
Basically what needs to happen is when the addButton is clicked, Id.0 must disappear (but remain a member of the form) and be replaced by an identical field with id="Id.1" then upon clicking again id="Id.2" and so on.
Is there a way, using JavaScript or jQuery, to hide and replace this field upon clicking this button? Thanks!
This with jQuery might help.
elmCount = 0;
function addQual()
{
$("#Id." + elmCount).css('visibility', 'hidden');
$("#Id." + elmCount).css('height', '0px');
elmCount += 1;
}
Thanks to comments.
<div id="divAny">
<select id="Id.0" onChange="changeTextBox();">
</div>
<input type="button" id="addButton" value="Add" onclick="addQual();"/>
var index = 0;
function addQual(){
$("#divAny").hide();
$("#Id."+index).attr("id" , "Id."+ (++index));
}
As an alternative to #MahanGM's answer, I would minimise the use of jQuery here and do only the following in your addQual function:
addQual = function() {
$('select').toggleClass('hidden');
}
You then need a css class hidden to hide the required element. As others have said, you must not use display: none if you don't want to lose the value of the input.
.hidden {
visibility: hidden;
height: 0;
}
And you start out in your markup with both selects present, only the one you initially want hidden has the appropriate class:
<select id="Id.0">
<select id="Id.1" class="hidden">
<input type="button" id="addButton" value="Add" onclick="addQual();"/>
A basic example with spans: http://jsfiddle.net/5Dayf/1/
Cleanest solution in my eyes: see here jsFiddle
HTML, nothing special:
<select class="replaceableSelect" id="Id.0">
<option name="one" value="one">One</option>
</select>
<button id="addButton">Add</button>
Javascript using jQuery:
$(document).ready(function () {
var changeTextBox = function () {
/** Your code goes here */
};
// add the onchange event to all selects (for the current one and future ones)
$(document).on("click", "select.replaceableSelect", changeTextBox);
var currentId = 0,
currentSelect = $("#Id\\.0");
$("#addButton").on("click", function (e) {
// hide the old select
currentSelect.addClass("invisible");
// create the new select with increased id and add onchange event
currentSelect = $('<select class="replaceableSelect" id="Id.' + (++currentId) + '"><option name="two" value="two">Two</option></select>').insertAfter(currentSelect).bind("change", changeTextBox);
});
});
CSS:
.invisible{
visibility: hidden;
height: 0;
width: 0;
margin: 0;
padding: 0;
border: none;
}
Hint: To process the results of your form, please make sure, every select gets a unique name.