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
Related
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 want to save the boolean values of my checkbox for a longer period. Also I need to store the values of each checkbox in an array to read them out later. I´ve tried some example code and tutorials about cookies but nothing seems to work.
With checklist_1s.html i access checklistRequest.js to store the values of each checkbox in my array. Later I´ll need to use this array for another js function in another window, but the moment I open this window, my array is gone.
I´m looking for an easy solution here, if possible.
Note: I know using the same name for every checkbox is an violation, but it seems to work so far and I couldn´t find any other way to get it to work for every checkbox (I´ll need like 200 later)
checklist_1s.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../style.css"></link>
<script src="checklistRequest.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="https://raw.github.com/andris9/jStorage/master/jstorage.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script>
<style>
</style>
</head>
<body class="main">
<div class="main_2">
<p>
<h1>Checklist</h1>
<form>
<input type="checkbox" name="remember" id="remember" onclick="checkboxFunction(value, 0)" value="F-Card geholt">F-Card geholt<br>
<input type="checkbox" name="remember" id="remember" onclick="checkboxFunction(value, 1)" value="Ersti Rally">Ersti Rally <br>
<input type="checkbox" name="remember" id="remember" onclick="checkboxFunction(value, 2)" value="TEST">TEST<br>
</form>
<input type="button" name="alert" value="Aktualisieren" onclick="alertFunction()">
<!-- Example Code-->
<script>
$("#checkAll").on("change", function(){
$(':checkbox').not(this).prop('checked', this.checked);
});
$(":checkbox").on("change", function(){
var checkboxValues = {};
$(":checkbox").each(function(){
checkboxValues[this.id] = this.checked;
});
$.cookie('checkboxValues', checkboxValues, { expires: 7, path: '/' })
});
function repopulateCheckboxes(){
var checkboxValues = $.cookie('checkboxValues');
if(checkboxValues){
Object.keys(checkboxValues).forEach(function(element){
var checked = checkboxValues[element];
$("#" + element).prop('checked', checked);
});
}
}
$.cookie.json = true;
repopulateCheckboxes();
</script>
</p>
</div>
</body>
</html>
checklistRequest.js
var checkbox = document.getElementsByName("remember");
var checkboxArray = [];
function checkboxFunction(value, index)
{
if(checkbox[index].checked == true)
{
checkboxArray[index] = value;
}
if (checkbox[index].checked == false && value == checkboxArray[index])
{
checkboxArray[index] = null;
}
}
function alertFunction()
{
for(var i=0; i<99; i++)
{
if (typeof checkboxArray[i] != 'undefined' && checkboxArray[i] != null)
{
alert(checkboxArray[i]);
}
}
alert("TEST");
}
Please see attached jsfiddle link, I need to collect data from multiple forms and combined the data as Single data array send it to server(spring mvc controller) to persist using ajax.post
Please let me know best way to do it, will my array be converted to Json by ajax call or I have to do some magic on it.
Thanks
http://jsfiddle.net/6jzwR/1/
<form id="form1" name="formone" class="myclass">
<input type="text" id="txt11" name="txt11" value="name1" />
<input type="text" id="txt12" name="txt12" value="name2" />
</form>
<form id="form1" name="formtwo" class="myclass">
<input type="text" id="txt21" name="txt21" value="name3" />
<input type="text" id="txt22" name="txt22" value="name4" />
</form>
<input type="button" id="button" value="Click Me" />
(function ($) {
$(document).ready(function () {
alert("serialize data :" + $('.myclass').length);
var mydata = null;
$('#button').on('click', function (e) {
$('.myclass').each(function () {
alert("serialize data :" + $(this).serialize());
if ((mydata === null) || (mydata === undefined)) {
mydata = $(this).serializeArray();
alert("My data is null");
} else {
mydata = $.merge(mydata, $(this).serializeArray());
alert("My data final data after merger " + test);
}
});
});
});
}(jQuery));
Try this:
var array = $('input[type="text"]').map(function() {
return $(this).val();
}).get();
alert(JSON.stringify(array));
Demo.
You can put all the forms' data in an array and join them with &
var formdata = []
$('.myclass').each(function(){
formdata.push($(this).serialize());
});
var data = formdata.join('&');
http://jsfiddle.net/6jzwR/3/
I would like to store the value of a input to JSON (on submit). If the User fill out the input again then submit I would like to add the new value to JSON keeping the previous one.
I use the following to add the input value to JSON but I'm not sure how to keep the previous value sent to JSON.
http://jsfiddle.net/ABE4T/
HTML:
<form method="post" name="myForm" id="myForm">
<input type="text" name="element" />
<input type="submit" value="Add" name="submit" />
</form>
<div id="display"></div>
Javascript:
$.fn.serializeObject = function()
{
var arrayData = this.serializeArray();
var objectData = {};
$.each(arrayData, function(){
if(objectData[this.name] != null){
if(!objectData[this.name].push){
objectData[this.name] = [objectData[this.name]];
}
objectData[this.name].push(this.value || '');
}
else{
objectData[this.name] = this.value || '';
}
});
return objectData;
};
$(document).ready(function(){
$("#myForm").submit(function(){
$('#display').text(JSON.stringify($("#myForm").serializeObject()));
return false;
});
});
Use .append() function instead of .text() function.
DEMO fiddle
You can maintain an array to hold all the values like this
$(document).ready(function(){
var values = [];
$("#myForm").submit(function(){
values.push($("#myForm").serializeObject());
$('#display').text(JSON.stringify(values));
return false;
});
});
Working Fiddle
You are overwriting the value in #display.
Change this line
$('#display').text(JSON.stringify($("#myForm").serializeObject()));
to
$('#display').text($('#display').text() + JSON.stringify($("#myForm").serializeObject()));
Fiddle