Ok this is wheat I have so far. IF someone could help me out. I had to change the color of the background when you click on a button. And I also have to Use document.getElementById('yourelementid') to both find the value of the textarea and to change the basic text created in the div. But I don't know how to do that i have been researching online. I think i am getting a little confused about where to put things at in here thanks.
Here is what I have so far....
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http:www.w3.org/1999/xhtml">
<head>
<title>DOM</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<script language="JavaScript">
<!-- Begin
function newbg(thecolor)
{
document.bgColor=thecolor;
}
// End -->
</script>
<body>
<h3>DOM Assignment Examples</h3>
<div>
<form>
<h4>Change background color to:</h4>
<input type="radio" value="White" onclick="newbg('white');">white<br/>
<input type="radio" value="Blue" onclick="newbg('blue');">Blue<br />
<input type="radio" value="Beige" onclick="newbg('Beige');">Beige<br />
<input type="radio" value="Yellow" onclick="newbg('yellow');">Yellow<br />
</form>
</div>
<br />
<br />
<br />
<h4>add text to this box change the text below:</h4>
<TEXTAREA NAME="" ROWS="10" COLS="40" onBlur="blurHandlerRouting">
You will change this text
</TEXTAREA> <br />
<INPUT TYPE="button" NAME="button" Value="Click" onClick="testResults(this.form)">
</body>
</html>
The contents of a <textarea> can be manipulated using .html() in jQuery or .innerHTML in vanilla JavaScript.
Your HTML should contain the id="" attribute:
<textarea id="mytextarea">Text to be changed</textarea>
And the JavaScript:
document.getElementById('mytextarea').innerHTML = "New Text";
To change the background and the textarea you would try this:
function = testResults(){
document.getElementById("yourTextBoxId").style="background:red;"; //Change the background color to red.
document.getElementById("yourTextAreaId").value="your another text for the textarea"
}
Related
There is a form with 2 inputs and a button that resets the inputs. When the button is clicked, how can I make first input unchanged (i.e it should not reset the value). How can I achieve it?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Add-More example - fileuploader - Innostudio.de</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"></script>
</head>
<body>
<div class="file-loading" style="margin: 50px;">
<form>
<input id="no_reset" type="text">
<input id="input-fa" type="text">
<button type="reset" onclick="removeReset()">
<i class="fas fa-sync"></i>submit
</button>
</form>
</div>
<script>
function removeReset() {
//it doesn't work
document.getElementById("no_reset").value = "dont reset";
}
</script>
</body>
</html>
If you have a lot of input, you can reset all fields except ones with a custom attribute.
Take a look at a sample vanilla js implementation :
function customReset()
{
var fieldsToReset = document.querySelectorAll("input:not([data-noreset='true'])")
for(var i=0;i<fieldsToReset.length;i++){
fieldsToReset[i].value = null;
}
}
<form id="myForm">
<input id="txt1" name="txt1" /> : should reset<br/>
<input id="txt2" name="txt2" /> : should reset<br/>
<input id="txt3" name="txt3" /> : should reset<br/>
<input id="txt4" name="txt4" data-noreset="true" /> : <strong>won't reset</strong><br/>
<button type="button" onclick="customReset()">
Reset
</button>
</form>
Pay attention to the type="button" attribute. This is required to neither reset the form nor submit it.
I am trying to highlight an input field in my form when a particular radio buttons is selected. While I have accomplished this, I do not understand why my particular solution works.
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<meta charset="UTF-8">
<script type="text/javascript" src="script.js"></script>
<title>Testing jQuery on Forms</title>
</head>
<body>
<div id="form">
<h3>The form</h3>
<form name="main_form">
<fieldset style="width: 300px;">
<legend>General Information</legend>
<p>Do you have a name?</p>
<input style="float: left" name="name_or" id="name_or_yes" type="radio" value="yes">
<legend for="name_or_yes">Yes</legend>
<input style="float: left" name="name_or" id="name_or_no" type="radio" value="no" checked="checked">
<legend for="name_or_no">No</legend>
<br/>
Name: <input type="text" name="name" id="#name_field">
</fieldset>
</form>
<button id="submit_form">Submit</button>
</div>
<div id="results"></div>
</body>
</html>
Here is the JS:
$(document).ready(function() {
$('#name_or_yes').click(function() {
$('input[name=name]').focus();
});
$('#submit_form').click(function() {
var toAdd = $("input[name=name]").val();
$('#results').append("<p>"+toAdd+"</p>");
});
});
I don't understand why focus() does not work on the name input field when I use it's id (#name_field'). It only works when i use the input[name=name] method. This is doubly confusing because the following works perfectly well:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$("#txtfocus").focus();
});
</script>
</head>
<body>
<input type="text" id="txtfocus2"><br/>
This text box is set focused: <input type="text" id="txtfocus">
</body>
</html>
Any help or advice is appreciated!
Look at the id here:
<input type="text" name="name" id="#name_field">
Try it like this:
<input type="text" name="name" id="name_field">
The # is the id selector, but should not appear in the HTML.
Thank you both!
These are the kind of mistakes which happen when you spend too much time looking at the same piece of code!
I would like to upvote you however, I do not have sufficient reputation points to do so. :(
input's ID should be "name_field" instead of "#name_field":
<input type="text" name="name" id="name_field">
i got got confused when i run the static js and html below
i want to dynamicly add option by clicking button, but when i put it under the form , it will do acition post, unless i put it out of form ,it works. what's the reason? i didn't set type as "submit" for the add button, does any button clicked in form will cause form action?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>作业管理</title>
</head>
<body>
<form enctype="multipart/form-data" method="POST" >
<div id="postform">
本次作业标题
<input type="text" name="title" />
<br>
<div class="postoption">
添加项目
<input type="text" name="option[]" />
音频文件
<input type="file" name="radio[]" />
答案
<input type="text" name="answer[]" />
</div>
</div>
<button id="add">添加输入项</button>
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
window.onload = function(){
var add = document.getElementById("add");
add.onclick = function(){
addOption();
}
}
function addOption(){
var postForm = document.getElementById("postform");
var postoptions = document.getElementsByClassName("postoption");
var op = postoptions[0];
var optionClone = op.cloneNode(true);
postForm.appendChild(optionClone);
};
</script>
</body>
</html>
The <button> element is a submit button by default. You can change this with the type="button" attribute, which makes it do nothing by default, or calling preventDefault on the event. But I'd go with the attribute since then your intention is semantically clear without actually running the script.
Can anyone please help me through this....
I have two input fields in my form . One of which is hidden and I want to show it using a button. Now when i tried to show it using onClick() function its not responding...
can anyone give me code snippet to do so....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function show()
{
document.getElementById('passwd').style.display="block" ;
}
</script>
</head>
<body>
<form action="demo.html" >
<input type="text" name="user" />
<br />
<input type="text" id="passwd" name="password" style="display:none;" />
<input type="button" onClick="show()" name="show" value="show" />
<br />
<input type="submit" value="OK" />
</form>
</body>
</html>
plz help
This is because of your <input> declaration:
<input type="button" onClick="show()" name="show" value="show" />
When you call show() JavaScript will attempt to resolve the symbol show first; because you're calling show() from inlined code, the resolution takes place in document, which attempts to resolve the symbol based on the name or id attribute of your input box.
Solutions
Rename the button:
<input type="button" onClick="show()" name="showbutton" value="show" />
Rename the function:
function showPasswordInputBox()
{
// your code here
}
<input type="button" onClick="showPasswordInputBox()" name="show" value="show" />
Don't use in-line code:
function show()
{
// whatever
}
var showButton = document.getElementsByName('show')[0];
showButton.addEventListener('click', show, false);
See also
Don't give event handler the same name as a field!
Javascript Function and Form Name conflict
There is a problem with naming convention of show() function in javascript. Because just change the name to show1(). it'll work
function show1()
{
alert("ok");
}
<input type="button" name="show" value="show" onclick="show1()" />
you can use jquery and write following code: $("#passwd").show()
or you can use addClass('here_css_class') and css code .here_css_class{
display: block
}
try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function show()
{
document.getElementById('passwd').style.display="block" ;
}
</script>
</head>
<body>
<form action="demo.html" >
<input type="text" name="user" />
<br />
<input type="text" id="passwd" name="password" style="display:none;" />
**<button onClick="show()" >Show</button>**
<br />
<input type="submit" value="OK" />
</form>
</body>
</html>
You need to use this:
onClick="javascript:show();"
or simply
onClick="show();"
Basically, just add the semi-colon :)
I got an image with which links to another page using <img ...> .
How can I make it make a post like if it was a button <input type="submit"...>?
More generic approatch using JQuery library closest() and submit() buttons.
Here you do not have to specify whitch form you want to submit, submits the form it is in.
Submit Link
<input type="image" name="your_image_name" src="your_image_url.png" />
This will send the your_image_name.x and your_image_name.y values as it submits the form, which are the x and y coordinates of the position the user clicked the image.
It looks like you're trying to use an image to submit a form... in that case use
<input type="image" src="...">
If you really want to use an anchor then you have to use javascript:
...
input type=image will do it for you.
Untested / could be better:
<form action="page-you're-submitting-to.html" method="POST">
<img src="whatever.jpg" />
</form>
<html>
<?php
echo $_POST['c']." | ".$_POST['d']." | ".$_POST['e'];
?>
<form action="test.php" method="POST">
<input type="hidden" name="c" value="toto98">
<input type="hidden" name="d" value="toto97">
<input type="hidden" name="e" value="toto aaaaaaaaaaaaaaaaaaaa">
Click
</form>
</html>
So easy.
So easy.
What might be a handy addition to this is the possibility to change the post-url from the extra button so you can post to different urls with different buttons. This can be achieved by setting the form 'action' property. Here's the code for that when using jQuery:
$('#[href button name]').click(function(e) {
e.preventDefault();
$('#[form name]').attr('action', 'alternateurl.php');
$('#[form name]').submit();
});
The action-attribute has some issues with older jQuery versions, but on the latest you'll be good to go.
Something like this page ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BSO Communication</title>
<style type="text/css">
.submit {
border : 0;
background : url(ok.gif) left top no-repeat;
height : 24px;
width : 24px;
cursor : pointer;
text-indent : -9999px;
}
html:first-child .submit {
padding-left : 1000px;
}
</style>
<!--[if IE]>
<style type="text/css">
.submit {
text-indent : 0;
color : expression(this.value = '');
}
</style>
<![endif]-->
</head>
<body>
<h1>Display input submit as image with CSS</h1>
<p>Take a look at the related article (in french).</p>
<form action="" method="get">
<fieldset>
<legend>Some form</legend>
<p class="field">
<label for="input">Some value</label>
<input type="text" id="input" name="value" />
<input type="submit" class="submit" />
</p>
</fieldset>
</form>
<hr />
<p>This page is part of the BSO Communication blog.</p>
</body>
</html>
Dont forget the "BUTTON" element wich can handle some more HTML inside...
We replace the submit button with this all the time on forms:
<form method="post" action="whatever.asp">
<input type=...n
<input type="image" name="Submit" src="/graphics/continue.gif" align="middle" border="0" alt="Continue">
</form>
Clicking the image submits the form. Hope that helps!