<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script>
function myf() {
alert("coming dude");
var numbersString = "1,2,3,4,5,6";
var data = numbersString.split(',');
var s = $("<select id=\"selectId\" name=\"selectName\" />");
for(var val in data) {
$("<option />", {value: val, text: data[val]}).appendTo(s);
}
s.appendTo("#msj_form");
}
</script>
</head>
<body >
<form id="msj_form" >
<button id="add" value="add" onclick="myf()">ADD</button>
</form>
</body>
</html>
While Clicking on ADD button the selbox is generating but its disappering immediatly..whats wrong in my code
While Clicking on ADD button the selbox is generating but its disappering immediatly..whats wrong in my code
Because after your function is called the form is submitted, so what you will need to do is prevent form submission.
Try this:
<html>
<head>
</head>
<body>
<form id="msj_form" >
<button id="add" value="add">ADD</button>
</form>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
function myf(e) {
e.preventDefault(); // <-- make sure to add this
alert("coming dude");
var numbersString = "1,2,3,4,5,6";
var data = numbersString.split(',');
var s = $("<select id=\"selectId\" name=\"selectName\" />");
for(var val in data) {
$("<option />", {value: val, text: data[val]}).appendTo(s);
}
s.appendTo("#msj_form");
}
$('#add').on('click',myf);
</script>
</body>
</html>
If you'd like to learn more about preventDefault(), see here - https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
The problem is that your form is getting submitted by default, so to prevent that just use preventDefault() method. Here's my solution. Hope it helps!
function myf() {
alert("coming dude");
var numbersString = "1,2,3,4,5,6";
var data = numbersString.split(',');
var s = $("<select id=\"selectId\" name=\"selectName\" />");
for(var val in data) {
$("<option />", {value: val, text: data[val]}).appendTo(s);
}
s.appendTo("#msj_form");
}
$(document).ready(function(){
$("#msj_form").submit(function(event){
event.preventDefault();
myf();
});
});
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<form id="msj_form" >
<button id="add" value="add" >ADD</button>
</form>
Related
I have items being stored in an array then the array stored in local memory.
i am printing out the items to the screen for the users to see with check boxes attached to each item.
I allow the user to clear all of the items in the localStorage like this,
$('#clear').click( function() {
window.localStorage.clear();
location.reload();
return false;
});
I want to allow the user to clear any one check boxed item they want. How can I implement a function to remove the selected check boxed item from the array.
$(document).ready(function () {
localArray = [];
loadKeyWords();
function loadKeyWords() {
$('#keyWords').html('');
localArray = JSON.parse(localStorage.getItem('keyWords'));
for(var i = 0; i < localArray.length; i++) {
$('#keyWords').prepend('<li><input id="check" name="check" type="checkbox">'+localArray[i]+'</li>');
}
}
$('#add').click( function() {
var Description = $('#description').val();
if($("#description").val() === '') {
$('#alert').html("<strong>Warning!</strong> You left the to-do empty");
$('#alert').fadeIn().delay(1000).fadeOut();
return false;
}
$('#form')[0].reset();
var keyWords = $('#keyWords').html();
localArray.push(Description);
localStorage.setItem('keyWords', JSON.stringify(localArray));
loadKeyWords();
return false;
});
if(localStorage.getItem('keyWords')) {
$('#keyWords').JSON.parse(localStorage.getItem('keyWords'));
}
$('#clear').click( function() {
window.localStorage.clear();
location.reload();
return false;
});
$('#clearChecked').click( function() {
if ($(this).is(':unchecked')) {
localArray.push($(this).val());
}
else {
if ((index = localArray.indexOf($(this).val())) !== -1) {
localArray.splice(index, 1);
}
$('#form')[0].reset();
var keyWords = $('#keyWords').html();
localArray.push(Description);
localStorage.setItem('keyWords', JSON.stringify(localArray));
loadKeyWords();
window.location.reload();
return false;
}
});
}); // End of document ready function
My HTML
<!doctype html>
<html>
<head>
<title>Wuno Zensorship</title>
<script src="jquery-1.11.3.min.js"></script>
<script src="popup.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<img src="icon48.png">
<section>
<form id="form" action="#" method="POST">
<input id="description" name="description" type="text" />
<input id="add" type="submit" value="Add" />
<button id="clearChecked">Clear Checked Items</button>
<button id="clear">Clear All</button>
</form>
<div id="alert"></div>
<ul id="keyWords"></ul>
</body>
</html>
You should iterate over the ul looking for the li elements whosecheckbox are checked, then remove them from localArray. Try this:
$('#clearChecked').click( function() {
$('#keyWords > li > input:checked').each(function(){
var desc = $(this).parent().text();
var index = localArray.indexOf(desc);
localArray.splice(index, 1);
});
...
});
I have looked through a lot of the already asked questions and cannot find it. I need the previous appended message to be deleted once you hit the submit button again. So this will let you choose your character that you type into the input field and then it will append a message bellow telling you that you choose x character. After that you can resubmit another character which I want, but I do not want the previous append to be there.
I tried to do a search function in javascript and if it was not equal to -1 then delete the first p in the div, but that did not work=/
Thanks for your help in advance.
html:
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
<link rel='stylesheet' type='text/css' href='styles/main.css'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type='text/javascript' src='jquery/script.js'></script>
</head>
<body>
<form class="" action="index.html" method="post">
Chose your character (human, orc, elf) : <br><br><input id='text' type="text" name="mess" value="">
<button id='button1' type="button" name="button" onclick="chooseChar()">Submit</button>
</form>
<br>
<div id="box_holder"></div>
<br><br>
<button id='button2' type='button' name='button2' onclick="redirect()">Start Your Adventure</button>
</body>
</html>
JS:
$(document).ready(function() {
$('#button1').click(function(){
var send = $("input[name=mess]").val();
$('#box_holder').append('<p>'+ 'You have chosen your character to be: '+send+'</p>');
});
$('input').css("color","blue");
});
chooseChar = function () {
var text = document.getElementById('text').value;
var text = text.toLowerCase();
if(text == 'human') {
$(document).ready(function() {
$('#button1').click(function(){
var div = $("#box_holder p").val();
var searchTerm = "You";
var searchDiv = div.search(searchTerm);
if (searchDiv != -1) {
$('div p').first().remove();
}
});
});
window.alert("HUMAN YOU ARE! (You may change your character at anytime)");
return;
} else if (text == 'orc') {
window.alert("ORC YOU ARE! (You may change your character at anytime)");
return;
} else if (text == 'elf') {
window.alert("ELF YOU ARE !(You may change your character at anytime)");
return;
} else {
window.alert("Start over! Please choose one of the characters above!");
$(document).ready(function(){
$('div').remove();
});
return;
}
$(document).ready(function() {
});
};
redirect = function() {
var text = document.getElementById('text').value;
var url = text+".html";
window.location.href = url;
}
So your variable send gets sent and then it clears out the input field with either of those functions
$(document).ready(function() {
$('#button1').click(function(){
$('#box_holder').children('p').remove(); <===========
or Either of these should work
$('#box_holder').empty(); <===========================
var send = $("input[name=mess]").val();
$('#box_holder').append('<p>'+ 'You have chosen your character to be: '+send+'</p>');
});
$('input').css("color","blue");
});
Instead of using append, try using html as follows
$('#box_holder').html('<p>'+ 'You have chosen your character to be: '+send+'</p>');
Here is a Plunkr to explain it a little better
$(document).ready(function() {
$('#button1').click(function() {
var send = $("input[name=mess]").val();
$('#box_holder').html('<p>' + 'You have chosen your character to be: ' + send + '</p>');
});
$('input').css("color", "blue");
});
chooseChar = function() {
var text = document.getElementById('text').value;
text = text.toLowerCase();
if (text == 'human') {
$(document).ready(function() {
$('#button1').click(function() {
var div = $("#box_holder p").val();
var searchTerm = "You";
var searchDiv = div.search(searchTerm);
if (searchDiv != -1) {
$('div p').first().remove();
}
});
});
window.alert("HUMAN YOU ARE! (You may change your character at anytime)");
return;
} else if (text == 'orc') {
window.alert("ORC YOU ARE! (You may change your character at anytime)");
return;
} else if (text == 'elf') {
window.alert("ELF YOU ARE !(You may change your character at anytime)");
return;
} else {
window.alert("Start over! Please choose one of the characters above!");
$(document).ready(function() {
$('div').remove();
});
return;
}
$(document).ready(function() {
});
};
redirect = function() {
var text = document.getElementById('text').value;
var url = text + ".html";
window.location.href = url;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<form class="" action="index.html" method="post">
Chose your character (human, orc, elf) :
<br />
<br />
<input id="text" type="text" name="mess" value="" />
<button id="button1" type="button" name="button" onclick="chooseChar()">Submit</button>
</form>
<br />
<div id="box_holder"></div>
<br />
<br />
<button id="button2" type="button" name="button2" onclick="redirect()">Start Your Adventure</button>
</body>
</html>
You have to remember, the append() function appends the content on the selected component. The html() function replaces all content inside of it.
Hope it helps
I want to Pass the variable with click event in jquery
var get=3;
$('#edit').click(function(event){
alert('You are getting:' + get);
}
please help me
html
<input type='submit' name='action' id='edit' />
You forgot the closing paranthesis.
Your javascript code should look like:
var get=3;
$('#edit').click(function(event){
alert('You are getting:' + get);
});
You have to initialize click even once document is loaded. Also you have syntax error in your code.
Try this one:
$(document).ready(function() {
var get=3;
$('#edit').click(function(event){
alert('You are getting:' + get);
});
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var get=3;
$('#edit').click(function(event){
alert('You are getting:' + get);
});
});
</script>
</head>
<body>
<input type='submit' name='action' id='edit' />
</body>
</html>
HTML button
<button id='my_button' type='button' data-id='1' data-values='1' value='6' data-whatever='20'>My button</button>
Jquery
$('#my_button').bind('click', function() {
var value = $(this)val();
var whatever = $(this).data('whatever');
var id = $(this).data('id');
var values = $(this).data('values');
console.log(value);
console.log(whatever);
console.log(id);
console.log(values);
});
Open Firefox > Inspect Element > Console Tab.
Load the codes
Click the button
See response
Initiate everything after document is ready.
$(document).ready(function() {
var get = 3;
$('#edit').click(function(event){
alert('You are getting:' + get);
});
});
also don't use event handlers until you need it.
try:
$(document).ready(function() {
var get=3;
$('#edit').on('click', function(event){
alert('You are getting:' + get);
}
});
html:
<input type="button" id="edit" />
You can do it like this:
$(document).ready(function() {
var get = 3;
$("#edit" ).bind("click", { key: get }, function(event){
// event.data.key will have value of get
});
});
Can you try like this,
<script type="text/javascript">
function test(ev) {
var id = $(ev).attr('id');
alert(id);
}
</script>
<input id="btn" type="button" value="click" OnClick="test(this);" />
try this.
html:
<input type="button" id="edit"><br/>
jquery:
$(document).ready(function(){
var get = 3;
$("#edit").on('click',function(){
alert("Value is: " + get);
//parameter value
});
});
I did not forget to add name attributes as is a common problem and yet my serialized form is returning an empty string. What am I doing wrong?
HTML/javascript:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
$( document ).ready( function() {
$('#word_form').submit(function(e) {
e.preventDefault();
console.log($(this).serialize()); //returns an empty string
});
});
</script>
</head>
<body>
<div id="wrapper">
<form name="word_form" id="word_form" method="POST">
<input type="image" name="thumbsUp" id="thumb1" value="1" src="http://upload.wikimedia.org/wikipedia/commons/8/87/Symbol_thumbs_up.svg" style="width:50px;height:50px;">
<input type="image" name="thumbsDown" id="thumb2" value="2" src="http://upload.wikimedia.org/wikipedia/commons/8/84/Symbol_thumbs_down.svg" style="width:50px;height:50px;">
</form>
</div>
</body>
dont know if this is a better way, but you could write your own plugin for this, something like:
(function($) {
$.fn.serializeAll = function() {
var toReturn = [];
var els = $(this).find(':input').get();
console.log("Elements:" + els);
$.each(els, function() {
if (this.name && !this.disabled && (this.checked || /select|textarea/i.test(this.nodeName) || /text|hidden|password/i.test(this.type) || this.src)) {
var val = $(this).val();
toReturn.push( encodeURIComponent(this.name) + "=" + encodeURIComponent( val ) );
}
});
return toReturn.join("&").replace(/%20/g, "+");
}
})(jQuery);
//and use it
var serialized = $('#word_form').serializeAll();
console.log(serialized);
Demo jsFiddle
I'm in the process of creating a small currency conversion script using the money.js library and have run into a problem with the .append(); part. Here is what I have so far:
<script type="text/javascript">
$(document).ready(function () {
function pfxCurrencyConverter() {
//get the users options from the form and store in variables
var pfxFromCurrency = $('#pfx-from-currency').val();
var pfxToCurrency = $('#pfx-to-currency').val();
//set base options
fx.base = pfxFromCurrency
fx.settings = {
from: pfxFromCurrency
};
// get the amount input by the user
var inputAmount = $('#pfx-input-amount').val();
// Load exchange rates data via the cross-domain/AJAX proxy:
$.getJSON('http://openexchangerates.org/latest.json', function (data) {
// Check money.js has finished loading
if (typeof fx !== "undefined" && fx.rates) {
fx.rates = data.rates;
fx.base = data.base;
} else {
// If not, apply to fxSetup global:
var fxSetup = {
rates: data.rates,
base: data.base
}
}
var convertedValue = fx.convert(inputAmount, {to: pfxToCurrency});
$("#currencies").append("<li>New Value" + convertedValue + "</li>");
});
} //end pfxCurrencyConverter
$(document).ready(function () {
pfxCurrencyConverter();
});
</script>
</head>
<!-- output form for user to populate -->
<!-- Output the front end form, include external stylesheet and define customisable css -->
</head>
<!-- output form for user to populate -->
<body>
<form method="get" onsubmit="return pfxCurrencyConverter();">
Amount: <input type='text' id='pfx-input-amount' /><br />
From: <select id='pfx-from-currency'>
<option>Please Choose</option>
<option>GBP</option>
</select><br />
To: <select id='pfx-to-currency'>
<option>Please Choose</option>
<option>USD</option>
</select><br />
<input type='submit' value='Convert' />
</form>
<ul id="currencies"></ul>
</body>
</html>
I have also this in the html right after the submit button, it works fine with just a string but stops working once I add + convertedValue
<script>document.write("New Value" + convertedValue);</script>
Any help is greatly apprecited
The problem was that the .append() was being called before the value was returned from getJson(). Placing the .append() inside the .getJson() solved the problem. This works:
<!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></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://josscrowcroft.github.com/money.js/money.js"></script>
<script type="text/javascript">
function ConvertMoney(to, from, amt) {
// Load exchange rates data via the cross-domain/AJAX proxy:
$.getJSON('http://openexchangerates.org/latest.json',
function (data) {
// Check money.js has finished loading:
if (typeof fx !== "undefined" && fx.rates) {
fx.rates = data.rates;
fx.base = data.base;
} else {
// If not, apply to fxSetup global:
var fxSetup = {
rates: data.rates,
base: data.base
};
}
var result = "<li>" + fx.convert(amt, { from: from, to: to }) + "</li>";
$("#result").append(result);
});
}
$("#convert").live("click", function () {
var from = $("#pfx-from-currency").val();
var to = $("#pfx-to-currency").val();
var amt = $("#pfx-input-amount").val();
ConvertMoney(to, from, amt);
});
$(document).keypress(function(e) {
if(e.keyCode == 13) {
var from = $("#pfx-from-currency").val();
var to = $("#pfx-to-currency").val();
var amt = $("#pfx-input-amount").val();
ConvertMoney(to, from, amt);
}
});
</script>
</head>
<body>
Amount:
<input type='text' id='pfx-input-amount' /><br />
From:
<select id='pfx-from-currency'>
<option>Please Choose</option>
<option>GBP</option>
</select><br />
To:
<select id='pfx-to-currency'>
<option>Please Choose</option>
<option>USD</option>
</select><br />
<input type='button' id="convert" value='Convert' />
<ul id="result">
</ul>
</body>
</html>
Looks like you have an object terminated by a semicolon
var convertedValue = fx.convert(inputAmount, {to: pfxToCurrency; });
that is not valid, try changing it to
var convertedValue = fx.convert(inputAmount, {to: pfxToCurrency });
Also I would expect
var pfxToCurrency = document.getElementById('pfx-to-currency').value
and not just
var pfxToCurrency = document.getElementById('pfx-to-currency')
Looks like you have an extra <script> tag:
<script type="text/javascript">
$(document).ready(function(){
<script type="text/javascript">
please make sure that properly Closing your Document ready function ( ** closing )
$(document).ready(function () {
........
..........
});
} //end pfxCurrencyConverter
**});**
$(document).ready(function(){
pfxCurrencyConverter();
});