I am not using a reset button because I have other functions that aren't working either and I need to do it this way to meet program requirements. I am intentionally not using jQuery. Everything seems correct to me.
HTML:
<script src="js/breaker.js"></script> <!-- it seems to be linked right, but nothing is working -->
<form action="#" method="get" onsubmit="return false"> <!-- is there something wrong here? -->
<td><textarea id="text" cols="50" rows="10" style="width: 40em; height: 15em;"></textarea></td>
<input type="text" value="0" id="shift" style="width: 4em;"/>
<input type="button" value="Exit value = 3" onclick ="javascript: clearSetFocus();"/>
Javascript:
function clearSetFocus() { //functions seems right
document.getElementById("text").value = "";
}
Related
While this code does work, I want to be able to transfer the code to a different html page when the user clicks submit after filling out the form.
<HTML>
<HEAD>
<TITLE>Test Input</TITLE>
<STYLE>
body {
background-color: #2C2F33
}
.form {
font-family: Arial;
color: #FFFFFF
}
.
</STYLE>
<SCRIPT>
function testResults (form) {
var Name = form.Name.value;
var Bio = form.Bio.value;
document.write (Name);
document.write("<br>");
document.write (Bio);
}
</SCRIPT>
</HEAD>
<BODY>
<DIV CLASS="FORM">
<FORM NAME="myform" ACTION="" METHOD="GET" >What is your name? This can be your first name, or an alias your known by. <BR>
<INPUT TYPE="text" NAME="Name" VALUE="" STYLE="height: 50px; width: 400px;"><P>
<FORM NAME="myform" ACTION="" METHOD="GET">Who are you? What do you do? <BR>
<INPUT TYPE="text" NAME="Bio" VALUE="" STYLE="height: 200px; width: 400px;"><P>
<div class="">
<INPUT TYPE="button" NAME="button" Value="Submit" onClick="testResults(this.form)">
</div>
</FORM>
</DIV>
</BODY>
</HTML>
Can anyone please tell me how to achieve this? I've tried making another html page then writing the info, but it doesn't work.
Side note, yes there is some code that isn't filled out
The action property specifies which page it is sent to. Right now it is blank and won't send to another page, even if all the other mark-up was correct.
There are many ways to achieve what you are trying to do. This is only one aspect to consider initiallly.
I am trying to create multiple tag fields with jQuery.
The tag script that I am using is from http://codepen.io/k-ivan/pen/NxxGPv
It works perfectly fine, however, when adding more fields by appending, the script stops working.
Can anyone suggest a solution?
HTML:
<form role="form" method="POST" enctype="multipart/form-data" action="../test.php">
<label for="default">Default
<input type="text" id="default" class="tagged form-control" name="tag-1" data-removeBtn="true" placeholder="create tag">
</label>
<input type="button" value ="add More" id="add">
<input type="submit" value="submit">
</form>
jQuery for adding more fields (adding works perfectly fine):
<script >
$(document).ready(function(){
var Count =2;
$('#add').click(function(){
$('#add').before($('<div/>',{
class:'row',
})
.fadeIn('slow')
.append(' <input type="text" id="default" class="tagged form-control" name="tag'+Count+'" data-removeBtn="true" placeholder="create tag">')
)
Count++;
});
});
</script>
I would also like to ask how a PHP script can be added inside this append event?
I've got two forms in PHP that have different purposes to them. Right now they are only made visible if the admin is logged in. This code works fine for it
<?php
if (isset($_SESSION['username']))
{
echo '</nav>
<br><br> <div class="blogscript">
<form id="form1" action="sent.php" method="post"> New page<br>
<input type="text" placeholder="Title" method="POST" name="pagetitle" /><br><br>
<textarea id="message" name="message</textarea><br>
<input type="submit" value="Confirm" />
</form></div>';
}
if (isset($_SESSION['username']))
{
echo '</nav>
<br><br> <div class="collagescript">
<form id="form2" action="sent.php" method="post"> New collage<br>
<textarea id="collage" name="message"></textarea><br>
<input type="submit" value="Confirm" />
</form></div>';
}
?>
I don't want the default of the forms to be visible even for the admin, I only want to show them when buttons are clicked that say "Show form 1" and "Show form 2".
How would I need to approach that? I don't know whether to use Javascript or pure PHP for it, in the case of PHP, I don't how how to toggle the visibility. I'm more comfortable with javascript, but I don't even know to the extent you can combine php with javascript.
PS: By toggling visibility, I don't mean toggling the opacity.
The earlier answer links to how this can be accomplished with jQuery. To do the same thing without loading the jQuery library, this should get you started:
//On document ready
document.addEventListener('DOMContentLoaded', docReady, false);
function docReady(){
document.getElementById('f1').addEventListener('click', fnF1, false )
document.getElementById('f2').addEventListener('click', fnF2, false )
}
function fnF1(){
document.getElementsByClassName('blogscript')[0].style.display = 'block';
this.style.display = 'none';
}
function fnF2(){
document.getElementsByClassName('collagescript')[0].style.display = 'block';
this.style.display = 'none';
}
.blogscript{display:none;}
.collagescript{display:none;}
<div class="blogscript">
<form id="form1" action="sent.php" method="post">New page
<div>
<input type="text" placeholder="Title" method="POST" name="pagetitle" />
</div>
<div>
<textarea id="message" name="message"></textarea>
</div>
<input type="submit" value="Confirm" />
</form>
</div>
<div class="collagescript">
<form id="form2 " action="sent.php " method="post ">New collage
<div>
<textarea id="collage " name="message "></textarea>
</div>
<input type="submit " value="Confirm " />
</form>
</div>
<button id="f1">Show Form 1</button>
<button id="f2">Show Form 2</button>
Notes:
(1) To create a pure js slideUp/slideDown effect, see:
https://gist.github.com/ludder/4226288
(2) jQuery is much simpler and significantly less typing, but requires the jQuery library to be loaded. To load the jQuery library, just include a link to its CDN location either in the <head> tags or just before the </body> tag:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
This question has been asked hundreds of times. But in case you couldn't find the link:
Jquery Toggle Show/Hide Div
You will want to use javascript for this. The linked method is pretty easy. You could also go pure CSS, but Javascript is more compatible.
i have this code of a search bar engine.
<form id="frmSearch" class="search1" method="get" action="default.html" /> <input class="search" id="txtSearch" type="text" name="search_bar" size="31" maxlength="255" value=""
<style="left: 396px; top: 20000px; width: 293px; height: 60px;" />
<input class="search2" type="submit" name="submition" value="Search" style=" padding- bottom:20px; left: 300px; top: 0px; height: 50px" />
<input class="search2" type="hidden" name="sitesearch" value="default.html" />
<script type="text/javascript">
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.ro/search?q=' + document.getElementById('txtSearch').value;
return false;
}
</script>
I want to make the search button,when user clicks it. It should search through local text file.
After it started the search for the key word to make refresh steady for the same word for which started to search.
To bring me all the keyword found on the txt to my graphical interface as small frames....
thank's for your help
First, I advice you to read the Quick Tour in StackOverflow, to know how to use this Website.
Also, I think you correct your HTML :
<form id="frmSearch" class="search1" method="get" action="default.html">
<input class="search" id="txtSearch" type="text" name="search_bar" size="31" maxlength="255" />
<input class="search2" type="hidden" name="sitesearch" value="default.html/>
<input class="search2" type="submit" name="submition" placeholder="Search" style="padding-bottom:20px; left: 300px; top: 0px; height: 50px" />
</form>
<form> tag is not an autoclosing tag : you can read this official documentation for this tag.
For all the HTML Specification you can read this.
and your JavaScript:
<script type="text/javascript">
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.ro/search?q=' + document.getElementById('txtSearch').value;
}
</script>
Now, your HTML SYNTAX is correct, but is not according with what you want...
We want to see in your Javascript, you can't verify if the value of your element 'txtSearch' is empty...
If you want to create a search bar, and load a part of your page in relation with the search box (your input type text), I advice you to learn what is AJAX.
You do not need to use a <form> tag if you don't want to reload all your page for display the results (images or other...) in your page...
Also, I noticed that you add the 'JQuery' tag on this conversation... but, in your sample you don't use JQuery... you just use JavaScript!
If you want to use JQuery, this can help you to create your Ajax Request (you can read this for that).
I have the jstree search plugin working fine inside a HTML page. The data for the tree is loaded with ajax, and the search is permformed with ajax.
Everything works fine until I put it in another form.
If I put the same code inside a HTML form it doesn't work anymore because the search is not performed.
The search is not performed because the whole form is submitted when I click the search button of the plugin.
How do I catch the click on the search button and prevent the whole form to be submitted ?
The global form has its own submit button and it still works fine.
I tried the solution in this thread but it doesn't work :
http://groups.google.com/group/jstree/browse_thread/thread/7945aa59fca2d9c9
Also this does not work :
<form id="list" name="list" action="save.php" method="post">
<!-- jstree button and input text for search plugin -->
<div id="mmenu">
<input type="submit" id="search" value="Go" />
<input type="text" id="text" value="" />
</div>
<!-- the tree container -->
<div id="indexation" class="indexation"></div>
<input id="url" type="text" name="url" value="" size="30" title="www.example.org"/>
<input type="submit" name="sendform" value="Save" />
</form>
<script type="text/javascript">
// Code for the menu buttons
$(document).ready(function(){
$("#mmenu input").click(function () {
switch(this.id) {
case "add_default":
case "add_folder":
$("#indexation").jstree("create", null, "last", {
"attr" : {
"rel" : this.id.toString().replace("add_", "") }
});
break;
case "search":
$("#indexation").jstree("search", document.getElementById("text").value);
break;
case "text": break;
default:
$("#indexation").jstree(this.id);
break;
}
});
});
</script>
Any idea/tip would be greatly appreciated
Here is the jsfiddle :
http://jsfiddle.net/v9VRr/6/
thank you,
I found a solution, not really clever but at least it works. Just put the jstree html needed for search outside of the form elements :
<form id="list" name="list" action="save.php" method="post">
<!-- the tree container -->
<div id="indexation" class="indexation"></div>
<input id="url" type="text" name="url" value="" size="30" title="www.example.org"/>
<input type="submit" name="sendform" value="Save" />
<form>
<!-- jstree button and input text for search plugin -->
<div id="mmenu">
<input type="submit" id="search" value="Go" />
<input type="text" id="text" value="" />
</div>
Then position the div id="mmenu" where you need it via CSS.