Searching jQuery variable full of html [duplicate] - javascript

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);
}
});

Related

Manipulating DOM in Javascript not working out [duplicate]

This question already has answers here:
Which characters are valid in CSS class names/selectors?
(11 answers)
Closed 4 years ago.
Hi I'm trying to create a simple calculator website, and I'm trying to manipulate the DOM to display an updating equation, but it won't add the child to the display container.
HTML:
<body>
<div class="body">
<div id="display"></div>
In the Javascript, I have the following code to add an element to the "display" div:
JAVASCRIPT:
const display = document.querySelector("#display");
var eqnDisp = document.createElement("p");
eqnDisp.classList.add("eqnDisp");
eqnDisp.textContent = "DISPLAY SOMETHING";
display.appendChild(eqnDisp);
Am I missing a line? I have the exact code for another page and it works but not here.
The example you provided is finely working:
const display = document.querySelector("#display");
var eqnDisp = document.createElement("p");
eqnDisp.classList.add("eqnDisp");
eqnDisp.textContent = "DISPLAY SOMETHING";
display.appendChild(eqnDisp);
<div class="body">
<div id="display"></div>
</div>
Your <script> tag needs to be placed after the body content, not in the <head> section. This is because you must wait for the DOM to get loaded before you can use DOM methods such as document.querySelector() (i.e. at the point where your script is executing, document is undefined). If you still want your script file in the <head> section, modify it this way:
window.onload = function() {
const display = document.querySelector("#display");
var eqnDisp = document.createElement("p");
eqnDisp.classList.add("eqnDisp");
eqnDisp.textContent = "DISPLAY SOMETHING";
display.appendChild(eqnDisp);
}
However, the code you posted here is not causing the problem. There are many other errors in the JSFiddle you provided. Here are the errors:
let btn1 = document.querySelector("#1");
As stated earlier, this won't work with IDs starting with a number. Correct is using document.getElementById()
btn1.addEventListener("click", include("1"));
This is another mistake. The above line will only call include("1") once, and not on every click. This is not how you pass a parameter to a function inside an event listener. Correct is using
btn1.addEventListener("click", function() {
include("1");
});
...which will call include("1") whenever btn1 is clicked.
btnCLR.addEventListener("click", clearDisp());
If you want to call a function without parameters, remove the brackets. Only call clearDisp, not clearDisp().
equation.concat(value);
equation is a string, not an array. Use the normal addition (concatentation) operator:
equation += value;
Then, you have many functions inside event listeners which you didn't define. Either define these functions, or comment out the whole event listener. You will end up with a working calculator.

dynamically created form depending on <select> does not work

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.

jquery getting data from form

I have a form that I'm trying to get data from a form using jquery and validate it. What is the best way to take data from a form to a variable using jquery?
Here is the snippet that you can use -
$('#myForm').submit(function() {
// get all the inputs into an array.
var $inputs = $('#myForm :input');
// not sure if you wanted this, but I thought I'd add it.
// get an associative array of just the values.
var values = {};
$inputs.each(function() {
values[this.name] = $(this).val();
});
});
Got it from stackoverflow-link
Well here we go
This is the jQuery script:
function getData () {
$(document).ready(function() {
var myTextFieldValue = $('#myTextField').value;
alert('The value is: '+myTextFieldValue);
});
}
This is the HTML
<form action='#' method='whatever'>
<input type='text' id='myTextField' />
<input type='submit' onClick='getData()' />
</form>
NOTE:
In order to make your script working you must import the jQuery Libraries
Like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
I Did not try the script so there could be some errors.
Hope i was helpful to you
Bye.
(For any help pm me)
there no way to get all the data from a form in one line of code. You have to retrieve it value by value.
if you have a <input id='some-id' >
just use var someId = $('#some-id').val();. Now someId hold the value of the input
The val() function only return the value of the first matched element (if you don't know what i mean take a look at jquery selector (http://api.jquery.com/category/selectors/)
take a look at http://api.jquery.com/val/ to see the val function, it has some weird thing with the <textarea> tag
And remember to always validate server side, even if you already did it client side, js securrity is very easy to bypass
use JQuery Validation plugin. Have a look here

jQuery iterate through HTML in a variable and remove first radio button

I have a some HTML stored in a javascript variable that looks like below. Example looks like below.
var divHTML = "<table><tbody><tr><td><input type='radio' name='radio_1'></td></tr><tr><td></td><tr><td><input type='radio' name='radio_2'></td></tr></tbody></table>;
I would like to iterate through the divHTML and remove the first radio button along with the <tr></tr> that wrapped around it and return the rest of the HTML. (could acheive the same by removing the first <tr></tr> as well I think - as it will remove what's inside but the end goal is to not see the first radio button).
Also created a JSFiddle with the string in place. jsFiddle Please help. Hope the question is clear and many thanks in advance.
You forgot a closing quote mark, by the way:
var divHTML = "<table><tbody><tr><td><input type='radio'></td></tr><tr><td></td><tr><td><input type='radio'></td></tr></tbody></table>";
var $divhtml = $(divHTML);
$divhtml.find(':radio:first').closest('tr').remove();
newHTML = $divhtml.clone().wrap('<div/>').parent().html();
alert(newHTML);
don't know what you're doing but will this work?
var divHTML = "<table><tbody><tr><td><input type='radio'></td></tr><tr><td></td><tr><td><input type='radio'></td></tr></tbody></table>"
$('body').append($(divHTML));
$("input:first").hide();
or you can hide the first radio button in your divHTML "markup" before appending to the <body>...
var newHTML = $(divHTML);
$("input:first",newHTML).hide();
$('body').append(newHTML);
JSFiddle here

How do read/write <input> values in an HTML document with JavaScript?

I have an <input> in my document. There I want the user to do some input.
var myVar = document.getElementById('userInput').value;
Then I want this value to be shown in another <input>.
document.getElementById('Preview').value = myVar;
This code somehow doesn't work.
Can anybody help?
Thanks in advance!
Update based on further information in comments before:
<button onClick="calculateThatObscenityDeleted()">"Save"</button >
Submit buttons will submit forms, thus running the JS but immediately blanking the form.
(That might still not be the actual issue, the question is still missing most of the code)
Original answer before it was revealed that the question didn't reflect the problem:
var myVar=document.getElementById('userInput').value;
Don't forget the =.
(And, obviously, you need to use that code in an event handler so it isn't executed only when the document loads and before the user has typed anything.)
Is it form?
Try something like this:
oFormObject = document.forms['myform_id'];
oFormObject.elements["element_name"].value = 'Some Value';
Besides the typo, you have to bind an event handler to the first <input>:
var input_a = document.getElementById('userInput');
var input_b = document.getElementById('Preview');
input_a.onkeyup = function(){
input_b.value = input_a.value;
}

Categories