I'm developing a website which must display particular forms for various products depending on the value that the user selects (in <select>) - so a number various forms are created dynamically in a loop by means of a javascript function (buildform() ). The code does not work, e.g. the forms are not created/appended to the wrappers. I narrowed down the problem where i think the problem relates to a different values for the jquery selectors/div-id's (#ecorpproductwrapper"+ecorp_eprodselectid).
When I use (just as a test) #ecorpproductwrapper" (without the variable ecorp_eprodselectid; see also in code below under ALTERNATIVE WORKS) the code works fine, e.g. the forms are built. I checked by means of the console that the ecorpproductwrapper"+ecorp_eprodselectid values are the same for the div-id's and jquery selectors, so I dont understand what goes wrong?
Pls see the simplified code below:
for(var i=0;i<5;i==){
var ecorp_eprodselectid; //will have various values
//function to build form depending on selected value in <select class= eprodtype"+ecorp_eprodselectid >
$(".eprodtype"+ecorp_eprodselectid).focus(function () {
var previous;
// Store the current value on focus and on change
previous = this.value; //old select value
}).change(function() {
var optionsform = buildform(this.value);
console.log('append form'+optionsform);
//NEXT 2 lines doe NOT WORK
$("#ecorpproductwrapper"+ecorp_eprodselectid).children().remove(); //remove previous form
$("#ecorpproductwrapper"+ecorp_eprodselectid).append(optionsform);
//ALTERNATIVE works: $('#ecorpproductwrapper').children().remove(); //remove previous tariif struct form
//ALTERNATIVE works: $('#ecorpproductwrapper').append(optionsform);
var str = "#ecorpproductwrapper"+ecorp_eprodselectid;
console.log('STRING ECORP PRODUCT APPEND: '+str);
console.log('change eprod val: '+this.value);
previous = this.value;
});//$("").focus(function () {
}//for i
//function to build form
var buildform = function(ecorp_eproductid) {
//some code here
//NEXT LINE does not work:
form += '<td> <div id="ecorpproductwrapper'+ ecorp_eprodselectid+'"> </div> </td> </tr>'; //cell with wrapper for ecorp product info
//ALTERNATIVE WORKS: form += '<td> <div id="ecorpproductwrapper"> </div> </td> </tr>'; //cell with wrapper for ecorp product info
//some code here; returns form
}//function buildform
I think you forgot to add ecorp_eprodselectid in your function.
var buildform = function(ecorp_eprodselectid ) {
Few things we assume concerning given text above:
You know this.value works
console.log shows optionsform have HTML that it should have. Not said in OP but if not, the function does not work. function seems to be missing already var buildform = function(someVar) as noted by buysDB
As I cannot see your code, I would try first clear everything 100% by chaning this:
$("#ecorpproductwrapper"+ecorp_eprodselectid).children().remove();
to:
$("#ecorpproductwrapper"+ecorp_eprodselectid).html("");
Then:
$("#ecorpproductwrapper"+ecorp_eprodselectid).html(optionsform);
No need for append if you have no intention to keep anything in DIV.
If you have text also in (#ecorpproductwrapper"+ecorp_eprodselectid) which is why you use children(), consider selecting the DIV that can be cleared.
If that still does not work, something is left out that needs consideration.
Related
This question already has answers here:
parse html string with jquery
(4 answers)
Closed 8 years ago.
This may be a strange question -- Right now I have a variable that is full of HTML, and I want to use jQuery (or JS) to search that varaible for inputs with checkboxes, and return the information.
So:
alert($(this).parent().parent().html())
var thisIsThat = $(this).parent().parent().html();
alert(thisIsThat)
var Awesome = $(thisIsThat).find('input:checked');
And then after I get that variable, after a successful ajax call, I want to change a specific attribute inside of it, like so:
$(Awesome).attr('value', 'false');
Right now, "Awesome" is returning nothing, which then doesn't allow me to change the attribute like I want to. I may be on the wrong direction as well -- any advice appreciated!
Use this
var thisIsThat = $(this).parent().parent();
alert(thisIsThat)
var Awesome = $(thisIsThat).find('input:checked');
In this case thisIsThat is a object and you can find anything using that object
This is an example showing the same basic idea running off of a string which finds the checkbox fine and unchecks it.
<div id="out"></div>
<script>
var htmlStr = '<div><input type="checkbox" checked="checked"/></div>';
var temp = $(htmlStr);
var cb = temp.find("input:checked");
cb.attr("checked",false);
jQuery("#out").append(cb);
</script>
jsfiddle
The problem I am betting is that you are checking the checkbox manually. It will not update the DOM attribute when you do that.
Here is a basic example to show you the problem.
<div id="one">
<input type="checkbox" />
</div>
<button>Tell</button>
<script>
function tellMe(){
var myDiv = jQuery("#one");
var html1 = myDiv.html();
console.log(html1);
}
jQuery("button").click(tellMe);
</script>
Take a look this fiddle of the code above.
Open up the console, and click on the button. You will see it unchecked. Check the checbox and click the button again, same html is outputted even though the checkbox is checked.
change
var Awesome = $(thisIsThat).find('input:checked');
to
var Awesome = $(thisIsThat).find('input[type=checked]');
now loop over it
Awesome.each(function(){
if($(this).is(':checked'))
{
$(this).attr('checked',false);
}
});
Does anyone know how to do replace multiple text by clicking a button with jQuery?
I've built a website that displays some text/data eg; "£100.00", but I what I need is to be able to 'replace' those monetary values with "£XXX.XX" with a 'Hide' button like you get on some banking websites. For example one web page has:
£100.00, £200.00, £130.00 etc etc..
...so when a user presses the Hide button, all of the numbers on the page turn to £XXX.XX. Ideally, the button should then display "Show" instead of "Hide" and switch back when toggled.
This is for a static dummy site, so no data base.
I suspect this is best handled with jQuery?
Thanks for your time,
D.
Case 1: Controlled Input
Assuming you can at least wrap all monetary values with something like this:
<span class="money-value">£200.00</span>
<span class="money-value">£300.50</span>
And that you can add button declared with:
<button id="secret-button">hide</button>
Then you could have some jQuery code doing this:
/**
* Simple search and replace version.
*/
$(function() {
$("#secret-button").click(function() {
$(".money-value").html($(".money-value").html().replace(/[0-9]/g,"X"));
});
});
or a more advanced one with:
/**
* Complet version.
*
* 1) on button click, if asking to hide:
* 1.1) iterate over all entries, save their text, and replace it with markers
* 1.2) toggle the button's text to "show"
* 2) on button click, if asking to show:
* 2.1) iterate over all entries, restore previous text
* 2.2) clear the hidden store
* 2.3) toggle the button's text to "hide"
*/
$(function() {
var hiddenStore = [];
$("#secret-button").click(function() {
if ($(this).html() == "hide") {
$(".money-value").each(function () {
var text = $(this).html();
hiddenStore.push(text);
$(this).html(text.replace(/[0-9]/g,"X"));
});
$(this).html("show");
} else {
$(".money-value").each(function (i) {
var text = hiddenStore[i];
$(this).html(text);
});
hiddenStore = [];
$(this).html("hide");
}
});
});
Complete solution is here: See here: http://jsfiddle.net/u79FV/
Notes:
this won't work for input field values
this assumes your text entries have been marked as shown above
Does what you want with the button's changing state.
Saves the values and puts them back.
Meant to work even if new fields are added dynamically.
Shankar Sangoli's answer uses a different way of saving the stored data, which you could as well consider (using the jQuery .data() method).
you may want to switch the button to an <input type="button" /> tag, in which case you'd use .val() instead of .html() to toggle its text.
Case 2: Uncontrolled Input
Assuming you don't have control over where the values may show up, then you need to do something a bit more complicated, which is to look in the whole page for something that would look like a currency format. I'd advise against it.
But, the jQuery Highlight plugin could be something to look at, as its code does something similar (in that it searches for pieces of code to modify), and you could then reuse some of solution 1 to make it fit your purpose.
That would be harder to design in a fool-proof fashion though.
You could use a regular expression:
var expression = /\d{1}/g;
var newString = myString.replace(expression,"X");
Then just dump newString into whatever control you need it to appear in.
Edit:
A jQuery idea for something like this would be to give all of the controls that have these numbers a common class identifier to make them easy to grab with the selector:
$(".numbers").each(function() {
$(this).text($(this).text().replace(/\d{1}/g, "X"));
}
... more readable ...
$(".numbers").each(function() {
var text = $(this).text();
var newText = text.replace(/\d{1}/g, "X");
$(this).text(newText);
}
If your markup is something like this you can try this.
<span>£1000.00</span><span class="showhide">Hide</span>
JS
$('.showhide').click(function(){
var $this = $(this);
var $prev = $this.prev();
if(!$prev.data('originalvalue')){
$prev.data('originalvalue', $prev.text());
}
if($this.text() == 'Hide'){
$this.prev().text($prev.data('originalvalue').replace(/\d{1}/g,"X"));
$this.text('Show');
}
else{
$prev.text($prev.data('originalvalue'));
$this.text('Hide');
}
});
In the above code I am basically storing the original value using jQuery data method within the span element itself which is used to display the actual value.
Once you click on Hide, get the previous span using prev() method and set its text with original value replacing all the numbers in it by X. Then change the link text from Hide to Show.
Next when you click on Show get the previous span using prev() method and set its text with the original value and change the link text from Show to Hide.
References: .prev(), .data()
$('#yourButton').click(function(){
var saveText = $('body').text();
$(this).data('oldText', saveText);
if ($(this).text() == "Hide"){
$('body').text($('body').text().replace(/\d{1}/, "X"));
$(this).text('Show');
}
else{
$('body').text($(this).data('oldText'));
$(this).text('Hide');
}
});
This is kind of a complicated problem actually. You will need to be able to save the state of the text when its in number form so you will be able to toggle back and forth. The above code is untested but hopefully it will give you an idea what you need to do.
function toggleMoney() {
$('.money').each(function() {
var $$ = $(this), t = $$.text();
$$.text($$.data('t') || t.replace(/\d/g, 'X')).data('t', t);
});
$('#toggleButton').text($('.money').text().match(/\d/) ? 'hide' : 'show');
}
http://jsfiddle.net/DF88B/2/
I have been trying to get two forms on the same page to work and the only issue i'm having is not getting the clone inputs to work, they seem to conflict with each other due to the div elements.
I have been using this tutorial as a guide:
http://www.9lessons.info/2009/06/submit-multiple-forms-jquery-ajax.html
Here is the code working with one form:
http://jsfiddle.net/yBdTA/
And this is what i want to achieve:
http://jsfiddle.net/c4Uce/
Notice when you click on the second 'Add More' link the first input clones rather than the second.
I know i could duplicate the jQuery function for the clone to match the second form:
$(function(){
var removeLink = ' <a class="remove" href="#" onclick="jQuery(this).parent().slideUp(function(){ jQuery(this).remove() }); return false">remove</a>';
jQuery('a.add').relCopy({ append: removeLink});
});
but i want this to be, how can i call it, dynamic? like the 9lessons guide, i can use PHP to create unique identifiers for the clone elements and want the jQuery to match the ID's,
Hope i made this clear.
Help appreciated.
U can try it , it work to multi form
http://jsfiddle.net/yBdTA/2/
(function($) {
function remove(){
$('.clone').each(function(i){
var input= $(this);
input.find('a.remove').click(function(){
input.remove();
});
});
}
$('form').each(function(i){
var form = $(this);
var removeLink = '<a class="remove" href="#">remove</a>';
var iputclone = form.find('p.clone').append(removeLink);
form.find('a.add').click(function(){
iputclone.clone().insertBefore(this);
remove();
});
});
})(jQuery);
Update :
iputclone.clone().insertBefore(this).find('.input').attr('value','');
//So easy, U can think a object when we start will is ifself, use it next, and next
So I am using javascript, jQuery, and HTML here. Basically I have a dynamic number of buttons that are being created, and will each call a function using unique variables. The variables are held in a json variable. Here is the code as it is:
var box = "<font size=\"2\">The following assassins are in your current location:<br/><table width = \"100%\">";
for (var i=0; i<info.length; i++) {
if(userid != info[i].playerid){
box += "<tr><td>"+info[i].name+" | rank: "+info[i].rank+"</td><td align=\"right\"><input id='attack' type='button' onclick='loadAttack(userid, info[i].playerid, info[i].name, info[i].rank, location)' value='Attack'/></td></tr>";
}
}
box += "</table></font>";
$("#assassinBox").html(box);
The box looks fine, with the proper names, ranks, and buttons. The problem is when a button is pushed, info is undefined. I think this is because the button doesn't get its own copy of it, and is out of the bounds of the array at the end of the loop. I am struggling to think of a solution, some way of passing the onclick function a unique variable?
Thanks!
box += "<tr><td>"+info[i].name+" | rank: "+info[i].rank+"</td><td align=\"right\"><input id='attack' type='button' onclick='loadAttack(userid, info["+i+"].playerid, info["+i+"].name, info["+i+"].rank, location)' value='Attack'/></td></tr>";
That should work. Although if I were you I would consider rewriting it to not use inline event handlers and maybe building the HTML with jQuery or the native DOMElement creation methods rather than concatenating strings of HTML. It makes it a lot more maintainable in the long run.
I'm writing a HTML form that's divided in fieldsets, and I need to get the form fields from a specific fiedset in a function.
Currently it's like this:
function conta(Fieldset){
var Inputs = Fieldset.getElementsByTagName("input");
var Selects = Fieldset.getElementsByTagName("select");
/* Doing the stuff I need to do in two iterations, one for each field type */
}
But who knows what the future may hold, and if the form gets some new field types (radios, checkboxes) this could become awful to mantain.
I know that form elements have the elements attribute that returns all the form fields and I was hoping I could use something like that.
(I know I still gotta discriminate the field type in a bunch of conditionals inside the iteration, but I think it would be faster and easier to keep. Unless it isn't and I should not be doing it)
#Ryan is on the right track if you want to use jQuery (and I would), but I'd suggest something more along the lines of:
$('fieldset#fieldset1 > input[type=text]').each( function() {
... do something for text inputs }
);
$('fieldset#fieldset1 > input[type=radio]').each( function() {
... do something for radios }
);
$('fieldset#fieldset1 > select').each( function() {
... do something for selects }
);
$('fieldset#fieldset1 > textarea').each( function() {
... do something for textareas }
);
As an improvement over if-then-else constructs.
Radio buttons and checkboxes are still input tags and will be in the Inputs var. The problem is, you'll need to add handlers for the checked state to see which radio buttons and checkboxes are selected.
Even worse, you can have more than one radio button and checkbox with the same name... in fact you have to for radio buttons or they don't work as expected.
No jQuery, no problem:
function condat(fieldset) {
var tagNames = ['input', 'select', 'textarea']; // Insert other tag names here
var elements = [];
for (var i in tagNames)
elements.concat(fieldset.getElementsByTagName(tagNames[i]);
for (var i in elements) {
// Do what you want
}
}
Filip Dupanović solution together with the second Cargowire comment worked for me, but only with a minor modification. Cargowire's second comment only produced an array which just holds the sliced characters of the tagNames array (I would have written this in a comment, but I lack the rep so far).
Here is what worked:
function condat(fieldset) {
var tagNames = ['input', 'select', 'textarea']; // Insert other tag names here
var elements = [];
for (var i in tagNames) {
elements = elements.concat([].slice.call(fieldset.getElementsByTagName(tagNames[i])));
}
for (var i in elements) {
// Do what you want.
// Attributes of the selected tag's can be referenced for example as
// elements[i].value = ...;
}
}
A usefull application of this would be to define buttons which only reset a fieldset instead of the whole form. Just use elements[i].value = elements[i].defaultValue; in the //do what you want part, for text inputs to be reseted. And of course bind the condat function onto the onclick event of the button providing the fieldset dom element as a paramenter.
Haven't tested this and don't know how it would work, but you could use JQuery here to select all the elements into a JQuery object
//$("input select textarea").each(function() {
$(":input").each(function() { //even better
// do stuff here
});
this would at least cleanup the code, although you would still have to add conditional statements based on field type like you mentioned.
You should use just querySelectorAll:
function condat(fieldset) {
var elements = fieldset.querySelectorAll('input, select, textarea');
elements.forEach(function(element){
// Do what you want with every element
});
}