jquery/javascript content replace?how reusable - javascript

http://img163.imageshack.us/img163/6248/93306989.jpg
the images above show what i want,
i'm using Facebox to do the pop up content,so how can i make the pop up content dynamic?
<script type="text/javascript">
$(function() {
$('.openExample').click(function() {
$.facebox($('#exampleSource').val());
return false;
});
});
</script>
the code above work just fine,but how can edit to reusable???
<form>
<textarea id="exampleSource" class="expand">
<html>
<body>
<h1>Heading</h1>
<p>paragraph.</p>
</body>
</html>
</textarea>
<input type="Submit" value="Submit" class="openExample" />
<input type="reset" value="Reset" />
</form>

Create a function that accepts string or id of the element.
example:
function popWindow(elementID)
{
$('.openExample').click(function() {
$.facebox($(elementID).val());
return false;
});
}
call it like this popWindow('#exampleSource');

Related

How do i alert the textbox input to a user

If i had a button and an input field. How would i alert whatever is in the input field to the user, when the button is clicked.
Explain your code please.
Make it as simple as possible.
<input type="text" id="input" />
<button onclick="displayEnteredText()">Display</button>
<script>
function displayEnteredText() {
var inputText = document.getElementById("input"); // get the element with id "input" which is the textField
alert(inputText.value); // show the value of the input in alert message
}
</script>
One possible approach:
<!DOCTYPE html>
<html>
<head></head>
<body>
<input id="name" value="">
<input type="button" value="show me the name" onclick="alert(document.getElementById('name').value)">
</body>
</html>
Another possible approach:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var buttonElement = document.getElementById('button');
buttonElement.addEventListener('click', function() {
alert(document.getElementById('name').value);
});
}
</script>
</head>
<body>
<input id="name" value="">
<input id="button" type="button" value="show me the name">
</body>
</html>
With the second approach you can separate responsabilities, one person can create de html, and another person can focus in create javascript code.
Exists several ways to do this, but with two examples i think is enough in the current context
<body>
<input type="text" name="basicText" id="alertInput">
<button class="alertButton">Click me!</button>
</body>
<script type="text/javascript">
$(".alertButton").click(function(){
var value = $("#alertInput").val();
alert(value + " was entered");
});
</script>
In order to show what you typed in your alert, you need to reference the value inside the textbox. Since jquery is tagged in the post, I used it to get what's in the text box.
You can also try this one
HTML
<input type="button" id="btnclick" style="width:100px" value="Click Me" />
<input type="text" id="txtbox">
JS
$("#btnclick").click(function(){
var txtvalue = $("#txtbox").val();
alert("User enter " + txtvalue);
})
FIDDLE

Delay javascript demo function

how do I delay the text? I had been using setTimeout() but is doesn't work.
<form name="myForm">
<input type="submit" value="confirm" onclick="submitFunction()"/>
</form>
<script>
function submitFunction(){
document.getElementById("demo").innerHTML = "Hi How are you?";
}
</script>
<div id="demo"></div>
Simply don't use <input type="submit"/> in this case. It will cause a page reload and your intended behavior is never shown. Change the input type to button will not fire the post behavior so your message is shown below:
<form name="myForm">
<input type="button" value="confirm" onclick="submitFunction()"/>
</form>
<script>
function submitFunction(){
document.getElementById("demo").innerHTML = "Hi How are you?";
}
</script>
<div id="demo"></div>

HTML onKeyDown-Event calling function and button-click

I'm trying to create a search option.
If someone is using my search field, they can press the "Search-Button" or just press the enter key to start the function.
My problem is that if they press the enter key within the text box it starts my function and after the function it calls the button click.
I've used Google but couldn't solve it, even tried to disable the button while myFunc() is called.
<!DOCTYPE html>
<html>
<body>
<form>Search
<br>
<input type="text" id="searchField" onKeyDown="if(event.keyCode==13) myFunc()">
<br>
<button type="button" id="myButton" onClick="myFunc()">Search</button>
</form>
</body>
</html>
Looks like you want to stop the event propagation in this case.
I've changed your code to the following:
<!DOCTYPE html>
<html>
<body>
<form>
Search<br>
<input type="text" id="searchField" onKeyDown="if(event.keyCode==13){console.log('Hello World from Input'); return false;}">
<br>
<button type="button" id="myButton" onClick="console.log('Hello World from Button')">Search</button>
</form>
</body>
</html>
Pressing enter while the input element has the focus gives me only Hello World from Input at the console.
I think this is what you are asking for: https://jsfiddle.net/7vf9pz8u/1/
HTML
<form>Search
<br>
<input type="text" id="searchField" onKeyDown="pressEnter()">
<br>
<button type="button" id="myButton" onClick="myFunc()">Search</button>
</form>
JavaScript
function pressEnter() {
if (event.keyCode == 13) {
alert("working");
}
}
Handle the onKeyDown separately in a function (onEnter) and use event.preventDefault(); block the default action.
See the below code.
window.onEnter = function () {
if (event.keyCode == 13) {
event.preventDefault();
return false;
}
}
<form>
Search<br>
<input type="text" id="searchField" onKeyDown="onEnter()">
<br>
<button type="button" id="myButton" onClick="myFunc()">Search</button>
</form>
http://jsfiddle.net/kishoresahas/cvyzLdy8/
I think you should prevent form submitting by event.preventDefault() in onkeydown function.
I have tested your code in chrome and firefox browser and it is working perfectly as you wish, I make some update in your code to show that it is actually working fine. Follows:
<!DOCTYPE html>
<html>
<body>
<script>
function myFunc(){
alert("Typed text.: "+document.getElementById("searchField").value)
}
</script>
<form>
Search<br>
<input type="text" id="searchField" onKeyDown="if(event.keyCode==13) myFunc()">
<br>
<button type="button" id="myButton" onClick="myFunc()">Search</button>
</form>
</body>
</html>

JQuery - How to implement Cancel Button

<html>
<body>
<form class="totalpayment">
<input class="paid" type="text" name="numberOne" />
<input class="due" type="text" name="numberTwo" />
<button>Add</button>
</form>
<p class="total"></p>
<script src="jquery.min.js"></script>
<script>
// Sum the value when submitting the form
$(".totalpayment").submit(function(e){
e.preventDefault();
var paid = parseInt($('.paid').val());
var due = parseInt($('.due').val());
$(".total").html(paid + due);
});
</script>
</body>
</html>
I have a form that adds two numbers together. My issue is, it only has one button, the add button. Let's say I wanted to add the handler for a cancel button which will clear the two boxes, how would I implement this?
Just add one more button to reset the form. Read more about Reset button
There is no need to add any handler for resetting the form.
<button type="reset" value="Cancel">Cancel</button>
Sample code:
<html>
<body>
<form class="totalpayment">
<input class="paid" type="text" name="numberOne" />
<input class="due" type="text" name="numberTwo" />
<button>Add</button>
<button type="reset" value="Cancel">Cancel</button>
</form>
<p class="total"></p>
<script src="jquery.min.js"></script>
<script>
// Sum the value when submitting the form
$(".totalpayment").submit(function(e){
e.preventDefault();
var paid = parseInt($('.paid').val());
var due = parseInt($('.due').val());
$(".total").html(paid + due);
});
</script>
</body>
</html>

How to add text into a div using a html form?

Adding the insertion of input type text into the div title on the same screen. Attempted broken function to they turn the input into a variable and use it to fill in the div.
<body>
<div class="form">
Form <br><br>
<form name="input" action="javascript:alert(titleValue);">
Title: <input type="text" name="title" class="titleInsert">
<input type="submit" value="Submit">
</form>
</div>
<div class="offer_display">
<div class="title" id= title></div>
</div>
</body>
<script>
var titleValue="";
$('#titleInsert').on("change", function () {
titleValue=$(this).val();
$("#title h3").text("titleValue");
});
</script>
</html>
Another problem with you code is, that you have to use "input" event and not "change".
See working code on fiddle: http://jsfiddle.net/z037qv3n/
<body>
Form <br><br>
<form name="input" action="javascript:alert(titleValue);">
Title: <input type="text" name="title" id="titleInsert">
<input type="submit" value="Submit">
</form>
<div class="title" id="title"></div>
</body>
<script>
var titleValue="";
$('#titleInsert').on("input", function () {
titleValue=$(this).val();
$("#title").text(titleValue);
});
</script>
</html>
Change your code for $('div.title').html(titleValue);
Live Demo : JSFIDDLE
You have to include jQuery library in your head section like this
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
There are lot of mistakes in your code please see below:
First mistake you should put your jQuery inside ready function.
Second mistake there is no such id #titleInsert it is a class so you have to do .titleInsert
Third mistake there is no tag h3 in #title
Fourth mistake you should use .keyup event instead .change event
Replace your jQuery code with following :
<script type="text/javascript">
$(document).ready(function(){
var titleValue="";
$('.titleInsert').on("keyup", function () {
titleValue=$(this).val();
$("#title").text("titleValue");
});
});
</script>

Categories

Resources