I'm trying to make a text input field where visitors can enter a value and then hit go or submit.
Based on the digit number they would be send to a new page.
For example if they enter 123 and hit submit it would send them to http://www.example.com/page/123
Could anybody please help me get this up and running?
Thank you
Here we go have fun. just copy the code and save it as html. you don't need php or such. it is way too simple to need a server side code.
<!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>
<title>Untitled Page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function(e) {
var inputvalue = $("#input").val();
window.location.replace(" http://www.example.com/page/"+inputvalue);
});
});
</script>
</head>
<body>
<input type="text" value="11" id="input">
<button type="button" id="button">Click Me!</button>
</body>
</html>
Related
Spent hours on this and don't understand that behavior. Any advice would be appreciated.
If you look below you load this code you will see the toolbar for sharing with add to any plugin that is what the page.js is including control for.
You can see I have commented out a foo bar at the bottom. That works just fine after load. I hit the button and the foo turns into a bar. When I load the entire div though I am trying to change the text ultimately by what I put in the insert form. An odd thing happens the entire add to any button dissapears. Any idea why? Is the page reloading and cannot grab the .js file or something bizarre like that?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="//static.addtoany.com/menu/page.js"></script>
<script>
function second(){
//document.getElementById('hello').innerHTML = 'bar';
document.getElementById('hello').innerHTML = '<div class=\"a2a_kit a2a_kit_size_32 a2a_default_style\"> <a class=\"a2a_dd\" href=\"https://www.addtoany.com/share\"></a></div>';
};
</script>
</head>
<body>
<form>
<input type="text" name="foo" id="foo"></input>
<input type="button" onClick="second();first();"></input>
</form>
<div id="hello"></div>
</body>
<script type="text/javascript">
document.getElementById('hello').innerHTML = '<div class=\"a2a_kit a2a_kit_size_32 a2a_default_style\"><a class=\"a2a_dd\" href=\"https://www.addtoany.com/share\"></a></div>';
//document.getElementById('hello').innerHTML = 'foo';
</script>
</html>
I have made javascript bookmarklet for firefox. Now i want to access it in javascript like other document/ DOM elements are accessed through their id or class. Please anybody tell me how i can access my javascript bookmarklet . Actually i want to make it blink /change it color by accessing it.
My bookmarklet code
<!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" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<title>Untitled Document</title>
<script>
</script>
</head>
<body>
<div id="toolbar" >
<a id='button' href='javascript:alert("my bookmarklet");'
>Lysted</a>
</div>
</body>
</html>
Now i want to access bookmarklet in "script tags/ javascript". Please please help anybody
I have a page below which is using jquery to append some html.
It simply append an input tag in the specified DIV
<!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 src="../../jquery-1.10.2.min.js" type="text/javascript" xml:space="preserve"></script>
<script type="text/javascript" xml:space="preserve">
var i = 0;
function test(){
var totalQuantity = '<input type="number" name="order' + i + '.totalQuantity" />';
$(".test").append(totalQuantity);
i++;
}
</script>
</head>
<body>
<div class="test"></div>
<input type="button" onclick="test()" value="Add" />
</body>
</html>
When I run this on server in tomcat using spring, on inspect element the javascript becomes something like:
var totalQuantity = '<input type="number" name="order'+i+ '.totalQuantity" />';
All the ( ' ) characters replaced by code (#&39).
what is the problem actually? Why it is not showing character ( ' ) but rather showing its html code?
Is this a problem with using spring because when I separately(not in a container or spring framework) open this html file, it works fine.
While this is a workaround, i think it's the proper way to insert javascript into html.
Move your javascript into an external file so that whatever is pre-processing your HTML won't touch your javascript.
In the script below (live example is located at http://jsbin.com/aliket/1/ with source code located at http://jsbin.com/aliket/1/edit), I created two dialogs, where one (#dialog2) is a child within the other (#dialog1). If I create #dialog2 before #dialog1, open #dialog1 and then open #dialog2, the TinyMCE plugin no longer works. By not working, I mean TinyMCE's text box is shaded out and any previously entered HTML is gone. Is this a problem with the order of the two dialogs, or TinyMCE? Why is it happening? I do know how to fix it,however: just create #dialog1 before #dialog2. Thanks
<!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=ISO-8859-1" />
<title>Testing</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
</head>
<body>
<button id="click1">Click 1</button>
<div id="dialog1" title="dialog1"><div id="tinymce"></div><button id="click2">Click 2</button></div>
<div id="dialog2" title="dialog2">Hello</div>
</body>
<script>
tinymce.init({selector: "#tinymce"});
$(function() {
$('#click2').click(function(){$("#dialog2").dialog("open");});
$("#dialog2").dialog({autoOpen:false,resizable:false,height:300,width:240,modal:true});
$("#click1").click(function(){$("#dialog1").dialog("open");});
$("#dialog1").dialog({autoOpen: false,modal: true});
});
</script>
</html>
I think the problem here is that you did not shut down your editor instance before you opened another one with the same id. Use the mceCommand mceRemoveControl to shut such an editor instance down.
On button click, I want to hide the div. How do i do it?
<!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>
</head>
<script language="javascript" type="text/javascript">
function button()
{
var a = document.getElementById('approve');
document.getElementById('p').innerHTML= 'Fred Flinstone';
}
</script>
<body>
<div id="hide">
<form>
<p id="p">heya</p>
<input type="button" id='approve' value="approve" onclick="button()"/>
<input type="button" id="reject" value="reject"/>
</form>
</div>
</body>
</html>
SORRY FOR ASKING AGAIN...BUT COULDN'T FIND A BETTER METHOD. THANKS
document.getElementById('hide').style.display = 'none';
This sets the CSS code display: none; on the div, which causes the browser's rendering engine to act like the element is not even on the page (e.g. it does not occupy any space). See the CSS standard for the official description.
You can just use Jquery to make things super easy:
$("#approve").click( function() {
$("div#hide").hide() //you can just use $("#hide") if you want
});
You can show the element whenever you want with $("div#hide").show(). This will save you from having to deal with browser inconsistencies and other crap so you can just focus on producing great readable code. :)
If you use jQuery:
$(document).ready(function() {
$('#approve').click(function() {
$('#hide').hide();
});
});