I'm trying to keep the list of values from drop-down selections when the browser back-button is click after the form has been submitted. I tried using Ben Alman's bbq jquery, but failed to get things working. Here's what I've been trying. Please help.
Many thanks in advance.
HTML
<form action="something.py" id="formName">
<table id = "tabName">
<tr>
<th>Name</th><th>Number</th>
</tr>
<tr>
<td>
<select id="myname" name="myname">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</td>
<td>
<select id="mynumber" name="mynumber">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
</table>
<input type="submit" value="submit" />
</form>
JQuery:
var selected_value = [];
$('#mynumber').change(function() {
var name = $('#myname').val();
var number = $('#mynumber').val();
$("#tabName tr:last").before("<tr><td>" + name + "</td><td>" + number + "</td></tr>");
selected_value.push(name);
});
$('#formName').submit(function() {
$.bbq.pushState({
values: selected_value
});
//return false;
});
$(window).bind("hashchange", function(e) {
var values = $.bbq.getState("url");
if (selected_value === values) {
$(this).addClass("current");
} else {
$(this).removeClass("current");
}
});
My solution (without cookies or localStorage) based on location.hash:
function addRow(name, number){
$("#tabName tr:last").before("<tr><td>" + name + "</td><td>" + number + "</td></tr>");
}
$(function(){
if(location.hash){
var rows = location.hash.substr(1).split(';');
for(var i = 0; i < rows.length; i++){
var row = rows[i].split(',');
if(row.length == 2){
addRow(row[0], row[1]);
}
}
}
$('#mynumber').change(function() {
var name = $('#myname').val();
var number = $('#mynumber').val();
location.hash = location.hash + (location.hash ? ';' : '') + name + ',' + number;
addRow(name, number);
});
});
I think it does what you have asked for - if not, please give me some feedback in comments.
$('#formName').submit(function() {
$.bbq.pushState({
values: selected_value
});
//return false;
});
should be
$('#formName').submit(function() {
$.bbq.pushState({
values: selected_value
});
//return false;
});
and
var values = $.bbq.getState("url");
should be
var values = $.bbq.getState("values");
Related
I use my getHTML() function in a different function which parses through data, and I display the data as an HTML string. When the user is done filling the form, I want to send that information along with the username and examid. The username and examid are also coming from the backend at the position data[0].username and data[1].examid How can I make these two attributes into global variables, so that I can use them in my send function?
function getHTML(data){
var htmlString = "";
for(var i=0; i < data.length; i++){
htmlString += "<p>"
+ data[i].questionid + "." + "\n"
+ "Question: " + data[i].question
+ "\n" + "<input type='text' value1='"
+data[i].username+ " value2='" +data[i].examid+ "'>";
htmlString += '</p>';
}
response.insertAdjacentHTML('beforeend', htmlString);
}
function send(){
var inputText = document.querySelectorAll("input[type='text']");
var data = [];
for(var index = 0; index < inputText.length; index++){
input = inputText[index].value;
data.push({'text' : input});
}
data.push({'username' : username, 'examid' : examid});
}
Define your variable out of any function so they would be global
var username;
var examid;
function(){...}
function(){...}
window.username = data[i].username; and window.examid = data[i].examid.
Though you may be trying to store more than one in which case you want an array.
You are looking to use the window element if you want it in the global scope.
Try following code might help you
(function() {
var x = document.getElementById("Node").value;
document.getElementById("Node").onchange = function() {
myNode()
};
document.getElementById("mySelect1").onchange = function() {
myNotes()
};
document.getElementById("mySelect2").onclick = function() {
summary()
};
function myNode() {
x = document.getElementById("Node").value;
}
function summary() {
var a = document.getElementById("mySelect1").value;
var b = document.getElementById("mySelect2").value;
document.getElementById("5").value = a + " - " + b + " - " + x;
}
function myNotes() {
var a = document.getElementById("mySelect1").value;
var b = document.getElementById("mySelect2").value;
document.getElementById("4").value = a + " + " + b + " + " + x;
}
}
)();
Notes : <input type="text" id="4" /><br> Summary : <input type="text" id="5" /><br>
<select id="Node">
<option value="w">w
<option value="x">x
<option value="y">y
<option value="z">z
</select>
<select id="mySelect2">
<option value="a">a
<option value="b">b
<option value="c">c
<option value="d">d
</select>
<select id="mySelect1">
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
</select>
So I'm very new to the world of jQuery and while writing a simple code a faced a problem that I couldn't figure out the solution for.
First of all, there's a function that updates the position of the form on the dropdown according to its index.
And then there's another function that will change the position of the form on the page when a new position is selected on the dropdown list:
$(document).ready(initialRank);
function initialRank() {
var itemIndex = $(".template-detail-field").length;
$('.field-rank').each(function () {
$(this).empty();
var pos = $(".field-rank").index($(this))+1;
for (var i = 1; i <= itemIndex; i++) {
if (i == pos) $(this).append('<option value="'+ i +'" selected>' + i + '</option>');
else $(this).append('<option value="' + i + '">' + i + '</option>');
}
});
}
$(document).on("change", ".field-rank", function () {
$(".template-detail-field").each(function () {
var sel = $(this).find(".field-rank").val();
var pre = $(".template-detail-field").eq(sel - 1);
$(this).insertBefore(pre);
});
initialRank();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="template-detail-field">
<p> Testing stuff 1 </p>
<select class="field-rank">
<option value="1" selected>1</option>
</select>
</div>
<div class="template-detail-field">
<p> Testing stuff 2 </p>
<select class="field-rank">
<option value="2" selected>2</option>
</select>
</div>
<div class="template-detail-field">
<p> Testing stuff 4 </p>
<select class="field-rank">
<option value="4" selected>4</option>
As you can see, after changing position I call the function initialRank() so that it updates the positions displayed for each form accordingly. The problem is after I do this, the dropdown list won't accept any input, and by that I mean when I choose a new position on the list the form doesn't change its position nor does the new chosen position is selected.
But when I rewrite the initialRank() code inside the change() function everything works fine:
$(document).ready(initialRank);
function initialRank() {
var itemIndex = $(".template-detail-field").length;
$('.field-rank').each(function () {
$(this).empty();
var pos = $(".field-rank").index($(this))+1;
for (var i = 1; i <= itemIndex; i++) {
if (i == pos) $(this).append('<option value="'+ i +'" selected>' + i + '</option>');
else $(this).append('<option value="' + i + '">' + i + '</option>');
} });
}
$(document).on("change", ".field-rank", function () {
$(".template-detail-field").each(function () {
var sel = $(this).find(".field-rank").val();
var pre = $(".template-detail-field").eq(sel - 1);
$(this).insertBefore(pre);
});
var itemIndex = $(".template-detail-field").length;
$('.field-rank').each(function () {
$(this).empty();
var pos = $(".field-rank").index($(this)) + 1;
for (var i = 1; i <= itemIndex; i++) {
if (i == pos) $(this).append('<option value="' + i + '" selected>' + i + '</option>');
else $(this).append('<option value="' + i + '">' + i + '</option>');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="template-detail-field">
<p> Testing stuff 1 </p>
<select class="field-rank">
<option value="1" selected>1</option>
</select>
</div>
<div class="template-detail-field">
<p> Testing stuff 2 </p>
<select class="field-rank">
<option value="2" selected>2</option>
</select>
</div>
<div class="template-detail-field">
<p> Testing stuff 4 </p>
<select class="field-rank">
<option value="4" selected>4</option>
Can someone please explain to me what I was doing wrong.
Thank you.
I have multiple forms with one, two, three html select. I just want simple code if form select selected value equals to zero then console.log "please select order". Following is the script which I am working on.
$('form').submit(function(event){
event.preventDefault();
var dataitem = $(this).attr('data-item');
if (dataitem == 1) {
console.log(dataitem);
var $myform = $(this),
flavour1 = $myform.find( "select[name='flavour1']" ).val(),
drink = $myform.find( "select[name='drink']" ).val();
console.log("Flavour :" + flavour1 + ", Drink :" + drink);
} else if (dataitem == 2) {
console.log(dataitem);
var $myform = $(this),
flavour1 = $myform.find( "select[name='flavour1']" ).val(),
flavour2 = $myform.find( "select[name='flavour2']" ).val(),
drink = $myform.find( "select[name='drink']" ).val();
console.log("Flavour1 :" + flavour1 + ", Flavour2 :" + flavour2 + ", Drink :" + drink);
} else {
console.log(dataitem);
var $myform = $(this),
flavour1 = $myform.find( "select[name='flavour1']" ).val(),
flavour2 = $myform.find( "select[name='flavour2']" ).val(),
flavour3 = $myform.find( "select[name='flavour3']" ).val(),
drink = $myform.find( "select[name='drink']" ).val();
console.log("Flavour1 :" + flavour1 + ", Flavour2 :" + flavour2 + ", Flavour3 :" + flavour3 + ", Drink :" + drink);
}
});
please advice as i am stuck at this point of selection. If each select value == 0.
Thanks
Usualy if you have multiple components similar you can use:
$myform.find("select")
This will give you all "select" elements in your form. And then you can find the value one by one using:
$myform.find("select").each(function(index, value){
var valSelec = $(this).val();
///Make your if
})
I create a function: validateSelect() that search on all selects of form and verify if the option selected was empty, if true they return false.
Example:
$("form").submit(function(e) {
e.preventDefault();
if (validateSelect()) {
console.log('All are filled valid');
} else {
console.log('Invalid');
}
});
function validateSelect() {
var fleg = true;
$.each($('select option:selected'), function(key, val) {
if (val.value.length < 1) {
fleg = false;
}
});
return fleg;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form>
<select name="number">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="letter">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<input type="submit">
</form>
I have 4 dropdowns, 2 for the "From" destination and 2 for the "To" destination.
What I want to do is to update the #from div and the #to div based on the dropdown values.
For example on the "From" destination, if 1 and 5 is selected then the #from must show 1 -> 5
That means that while selecting the 1, it will show 1 -> until the user selects from the 2nd dropdown and it completes the sequence.
from
<select id="from_country">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="from_city">
<option value="1">4</option>
<option value="2">5</option>
<option value="3">6</option>
</select>
<br>
<br />
to
<select id="to_country">
<option value="1">7</option>
<option value="2">8</option>
<option value="3">9</option>
</select>
<select id="to_city">
<option value="1">10</option>
<option value="2">11</option>
<option value="3">12</option>
</select>
<div id="from"></div>
<div id="to"></div>
$('#from_country').change(function () {
var country = $('option:selected', this).val();
var city = $('#from_city').val();
$('#from').text(country + "->" + city);
})
$('#from_city').change(function () {
var city = $('option:selected', this).val();
var country = $('#from_country').val();
$('#from').text(country + "->" + city);
})
$('#to_country').change(function () {
var country = $('option:selected', this).val();
var city = $('#to_city').val();
console.log(country + "->" + city)
$('#to').text(country + "->" + city);
})
$('#to_city').change(function () {
var city = $('option:selected', this).val();
var country = $('#to_country').val();
$('#to').text(country + "->" + city);
})
Try this
demo
Here is a simple solution: http://jsbin.com/huvilegeso/edit?html,js,output. I only did it for the From section. The To section is very similar.
var from = [null, '->'];
$('#from_country').on('change', function() {
from[0] = $(this).val();
renderFrom(from);
});
$('#from_city').on('change', function() {
from[2] = $(this).val();
renderFrom(from);
});
function renderFrom(from) {
$('#from').html(from.join(' '));
}
You can do something like this.
$('#from_country').change(function () {
$('#from').text( $('#from_country :selected').text() + '->' +
$('#from_city :selected').text());
});
$('#from_city').change(function () {
$('#from').text( $('#from_country :selected').text() + '->' +
$('#from_city :selected').text());
});
$('#to_country').change(function () {
$('#to').text( $('#to_country :selected').text() + '->' +
$('#to_city :selected').text());
});
$('#to_city').change(function () {
$('#to').text( $('#to_country :selected').text() + '->' +
$('#to_city :selected').text());
});
The following code removes dropdown list values based on text entered in a textbox.
FIDDLE DEMO
JQUERY
var ddl = ('#ddl'),
txt = ('#txt');
$(txt).change(function() {
var x = $(txt).val(),
li = $(ddl).html();
if (x.length != 0) {
$(ddl).html(li);
$(ddl + ' :not([value="' + x + '"])').remove();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="txt" type="text" placeholder="Enter a number...">
<select id="ddl">
<option value="0" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
QUESTION
How to restore dropdownlist values back to initial state when a new value is entered into the textbox?
I have been attempting to use:
$(ddl).selectmenu("refresh");
but this stops the script from working as expected.
Like so
...
$(ddl).html(li);
$(ddl + ' :not([value="' + x + '"])').hide();
} else {
$(ddl + ' :not([value="' + x + '"])').show();
}
...
Instead of removing the item completely, you simply hide. When you empty the input field, re-show all the items.
You could try something like this:
var ddl = ('#ddl'),
txt = ('#txt');
$(txt).change(function () {
var x = $(txt).val(),
li = $(ddl).html();
$(ddl + ' option').show();
if (x.length != 0) {
$(ddl).html(li);
$(ddl + ' option:not([value="' + x + '"])').hide();
$(ddl + ' option[value="' + x + '"]').prop('selected',true);
}
});