Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have been set the task of making a online register system for a school to know who has arrived as well as a page to add students to a mysql database.
I need to use javascript to make a text area be displayed as well as having text areas un changeable until the edit button beside them has been clicked, once the button has been clicked I need the values to change to say done which when clicked will make them unchangeable again. Here is the jsfiddle:
JSFiddle
Code:
<div id="addstudents">
<form>
Students Full Name:<input type="text" name="fullname"><input type="button" value="edit"><br>
Students Form: <select name="form">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select><input type="button" value="edit"><br>
Students Tutor Name: <input type="text" name="lastname"><input type="button" value="edit"><br>
Students Tutor Name: <input type="text" name="TutorName"><br>
Disability: <select name="disability">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select><br>
<p>All the fields need to be locked until the edit button beside them is clicked. When the value of the disability is changed i need to text area to apear. All of this need to be done in java script.</p>
</form>
</div>
<div id="menu">
this will be the menu area
</div>
1 Give the input an id, like this:
<input id="blah" readonly="true">
You will need the id later. And make it readonly.
2 Hook the button up to code like this:
<input type="button" onclick="makeEditable()">
3 Write some code:
function makeEditable() {
var text = document.getElementById("blah") //Id in step 1
text.readonly = "false" //make it editable - see link
}
There you go!
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I am trying to pass my search term from my site into the string of another site's URL link. This will allow the search to find books on my site and if it can't be found there the user would click a button that would take the string from the search field and pass it to the URL of MnLink.org. I know my sites code is as follows.
Search For:
I can't figure out what I am missing because I am new to HTML and a novice in JavaScript. I thought I could put the value or id in as a var in a script but I could not get that to work. below is what I have started but got stuck on, any help would be great.
https://mnlink.on.worldcat.org/search?='"style="padding-left:10px;background:#ffffff; border: solid black;">Continue Search
You could simply use a form with method="get" and action="https://mnlink.on.worldcat.org/search".
EXAMPLE:
<form method="get" action="https://mnlink.on.worldcat.org/search">
<div>
<input type="text" name="queryString" value="" />
<button type="submit">
Submit
</button>
</div>
</form>
Working DEMO
EDIT
If you have to use an onClick event i suggest you to use Jquery: on click() you have to redirect your page with window.location.href = 'https://mnlink.on.worldcat.org/search?queryString=' but you must add the value at the end of that String with $("#INPUT_ID").val(). See the demo.
HTML:
<input title="Search For:" autofocus="false" accesskey="s" maxlength="256" tabindex="9" autocomplete="off" size="100" value="cats" id="q" name="q" type="text">
<button id="submit">
Search
</button>
JS:
$(document).ready(function(){
$("#submit").click(function() {
window.location.href = 'https://mnlink.on.worldcat.org/search?queryString=' + $("#q").val();
});
});
Working DEMO.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Im trying to make a simple quiz like so:
I would like to use a custom alert box, not the usual JavaScript one. So just a div that appears with my message inside.
Apologies if I do not have more to work with than the screenshots - I've looked at many other questions and bits of scripts, but I'm really interested in something simple that can push me in the right direction.
Thanks!
You could try with JQuery. Then you could show or hide the divs simply by using $("#mydiv").show() or $("#mydiv").hide().
.correct{max-width:100px;opacity:0}
input:checked.right ~div.correct{position:relative;background-color:yellow;top:-20px;left:70px;opacity:1;}
<div >
Which country is commonly called the U.S.A ?<br>
England<input type="radio" name="one" value="UK" /><br>
America<input type="radio" name="one" value="US" class="right"/><br>
<div class="correct">Correct</div></div>
<div >
Which country is commonly called the U.S.A ?<br>
England<input type="radio" name="two" value="UK" /><br>
America<input type="radio" name="two" value="US" class="right"/><br>
<div class="correct">Correct</div></div>
<div >
Which country is commonly called the U.S.A ?<br>
England<input type="radio" name="three" value="UK" /><br>
America<input type="radio" name="three" value="US" class="right"/><br>
<div class="correct">Correct</div></div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a form that has the following fields:
<div>
<input name="department" type="radio" value="1" required >
<label for="Orchestra">Orchestra</label>
</div>
<div>
<input name="department" type="radio" value="2">
<label for="Band">Band</label>
</div>
What I would like to be able to do is to display different checkboxes and comment text fields ONLY if the radio button for "Band" is checked. If this is unchecked then, the checkboxes should go away. I found several examples online, but for some reason I can't get them to work. The problem must be that I do not know Javascript or JQuery :( Any help would be appreciated.
I have tried different things that I have seen on stackOverflow and other websites, but I am so clueless about Javascript that I can't get it to work.
I've created a commented fiddle to help you accomplish what you ask, but also clue you in on what's actually going on. I recommend really diving into JavaScript/JQuery with the many resources available online, but for now, I hope my comments will help get you started.
The main takeaway here, is we use JavaScript to "listen" to whether or not the input in question is selected, not selected—based on that value, we can dictate what our view will look like—in this case, hiding or showing element(s).
JS
$(function () {
// Create selectors for relevant DOM elements
var $Department = $('input[name="department"]');
var $BandSelected = $('#BandSelected');
// Create a function that you pass
// the value of the input element in question.
// Return TRUE/FALSE based on equality to 2,
// the `value` associated with the 'Band' input
function isBandsSelected(val) {
return val == 2;
}
// Attach an event listener on `click' of inputs
$Department.click(function () {
// Assign a variable to the function that determines if the input
// we click on is 'Band' (has a value of 2)
var showBand = isBandsSelected($(this).val());
// If `showBand` returns TRUE, show our `BandSelected` div
if (showBand) {
$BandSelected.show();
// If `showBand` returns FALSE, show our `BandSelected` div
} else {
$BandSelected.hide();
}
});
});
Markup
<div>
<input name="department" type="radio" value="1" required>
<label for="Orchestra">Orchestra</label>
</div>
<div>
<input name="department" type="radio" value="2">
<label for="Band">Band</label>
</div>
<div id="BandSelected" class="hidden">
Band is selected
</div>
Demo Fiddle: http://jsfiddle.net/4x1ybqyv/
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Can someone explain to me line by line what is happening in this script ? :
<script type="text/javascript">
function Gsitesearch(curobj){
var domainroot=curobj.domainroot[curobj.domainroot.selectedIndex].value
curobj.q.value="site:"+domainroot+" "+curobj.sitesearch.value
}
</script>
Thanks !
It's from here:
http://www.javascriptkit.com/script/script2/google_site_search2.shtml
The snippet, along with a <form> that submits to http://www.google.com/search, allows you to submit a search to google that limits results to those coming from the domain domainroot.
Full example:
<script type="text/javascript">
// Google Internal Site Search script II- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use
function Gsitesearch(curobj){
var domainroot=curobj.domainroot[curobj.domainroot.selectedIndex].value
curobj.q.value="site:"+domainroot+" "+curobj.qfront.value
}
</script>
<form action="http://www.google.com/search" method="get" onSubmit="Gsitesearch(this)">
<p>
<input name="q" type="hidden" />
<input name="qfront" type="text" style="width: 180px" /> <input type="submit" value="Search" /><br />
Search:
<select name="domainroot">
<option value="www.javascriptkit.com" selected="1">JavaScript Kit</option>
<option value="www.dynamicdrive.com">Dynamic Drive</option>
<option value="www.freewarejava.com">FreewareJava.com</option>
</select>
</p>
</form>
<p style="font: normal 11px Arial">This free script provided by<br />
JavaScript Kit</p>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm just wondering if anyone can point me in the right direction on how to create a dynamic list on a webpage based on user entry without refreshing the page each time.
For instance, a user would:
type a word into a textbox
click a button
the word would show up somewhere else on the page
the word would be erased from the textbox
Any new word typed would automatically be written underneath any previously entered words.
<div id="target"><div>
<input type="text" id="newInput" />
<input type="button" id="saveInput" />
<script>
// when button is pressed:
$('#saveInput').on('click', function(){
// check if something is there
if( $('#newInput').val().length !==0){
$('#target').append('<div>'+ $('#newInput').val()+'</div>'); //append to a target
$('#newInput').val(''); // empty input
$('#newInput').focus() // for bonuspoint, place cursor back in input
}
});
</script>
If you want each new entry as first listitem, use prepend() instead of append()
Here's an working example:
Html:
<input type="text" id="txtWord"/>
<input type="button" id="btnAddWord" value="Add new word" />
<ul id="words">
</ul>
Script:
$(document).ready(function(){
$('#btnAddWord').bind('click', function(){
if( $('#txtWord').val() !== ""){
$('#words').append('<li>'+ $('#txtWord').val()+'</li>');
$('#txtWord').val('');
}
});
});
Example
http://jsfiddle.net/AfNgH/