function myFunction(ID) {
var fileSelector = $('<input onchange="javascript:testFunction(' + ID + ',' + this.value +')" type="file" />');
fileSelector.click();
}
my call to the testFunction is with the correct ID, but "Undefined" for this.value
All I want is to pass the value that the input now has WITH the onchange event. Why is it not possible?
Your this keyword inside the myFunction function is the window object. You don't want that.
In fact, you want to use the this.value inside the HTML, so you don't need to interpolate strings.
function myFunction(ID) {
var fileSelector = $('<input onchange="javascript:testFunction(' + ID + ', this.value)" type="file" />');
fileSelector.click();
}
I think what are you trying achieve is simply to remove the codes from the this.value. I did write the correct code below for your requirements:
var fileSelector =
$('<input onchange="javascript:testFunction(' + ID + ', this.value)" type="file" />');
Related
I have input type text, when writing js in input field <script> alert (1) </script> it works, is it possible to disable js in input?
Thanks
<form action="" name="typing_and_press_form" id="typing_and_press_form">
<input id='typing_and_press' class="typing_and_press" type="text"
placeholder="<?php if($jobStrings) echo $jobStrings['keyword_search']; ?>">
<div class="tagsgroupkeyup"></div>
</form>
jquery:
jQuery('#typing_and_press_form').on('submit', function (event) {
event.preventDefault();
if (jQuery('#typing_and_press').val()){
var enteredValue = jQuery('#typing_and_press').val();
jQuery('.typing-press .tagsgroupkeyup').append('<div class="tagstyle"><span>' + enteredValue + '</span><span id="' + enteredValue + '" class="remove">X</span></div>');
jQuery('#typing_and_press').val('');
jQuery('#typing_and_press').text('');
}
})
This is known as a self-xss attack. Where the input is reflected onto the page, and executes javascript. To prevent this you have to use innerText, or you can also parse the input text by checking if there is any javascript in the input before showing it into the DOM.
In Jquery, you can use .text() method.
The Javascript part is:
jQuery('#typing_and_press_form').on('submit', function (event) {
event.preventDefault();
if(jQuery('#typing_and_press').val()){
var enteredValue = jQuery('#typing_and_press').val();
spanElem = jQuery('.tagsgroupkeyup').append('<div class="tagstyle"><span></span><span id="' + enteredValue + '" class="remove">X</span></div>');
spanElem.find("span:first").text(enteredValue)
jQuery('#typing_and_press').val('');
jQuery('#typing_and_press').text('');
}
})
I want to give a name to my dynamically created textbox on a specific event.
I have written the following code where the function GenerateTextBox returns the name of the textbox and the value "". The textbox is generated by but the name does not get assigned.
This is to use the name as a reference to the textbox in another php file.
Jquery code for generating textbox:
function GenerateTextbox(value,name1) {
return '<input name = "'+ name1 + '" type="text" value = "' + value + '" /> ';
}
Calling the function:
$("#t11, #t12").click(function(){
var div = $("<div />");
div.html(GenerateTextbox("", c1));
$("#TextBoxContainer").append(div);
});
The php output file is showing the error that c1 is an undefined index...
How do I solve this problem?
Change c1 to "c1". c1 refers to a variable named c1 (which you have not defined) whereas "c1" refers to a String.
div.html(GenerateTextbox("", "c1"));
Working Code:
function GenerateTextbox(value,name1) {
return '<input name = "'+ name1 + '" type="text" value = "' + value + '" />';
}
$("#t11, #t12").click(function(){
var div = $("<div>");
div.html(GenerateTextbox("", "c1"));
$("#TextBoxContainer").append(div);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="t11">Create Textbox</button>
<div id="TextBoxContainer"></div>
I am trying to get the value from checkbox when checked which is created dynamically with jquery associated with html table am using class to get the value but am unable to get it
My code is like this
Input created with Jquery
"<td><div class=" + "checkbox checkbox-primary" + "><input type=" + "checkbox" + " class=" + "cbCheck" + " value=" + "" + data.d[i].Rowname + "" + "" + data.d[i].one + "" + "></div></td>"
Jquery to get the value
$("#table").on(":checked", ".cbCheck", function () {
var id = $(this).attr("value");
alert(id);
});
Please help me how to fix this.
Thanks in advance
Working Fiddle
Try:
$('table tr td').on('click','.cbCheck',function() {
if ($(this).is(':checked')) {
alert($(this).attr('id'))
}
else
alert('unchecked');
});
Use 'change' event:
$("#table").on("change", ".cbCheck", function () {
var id = $(this).attr("value");
alert(id);
});
Instead of creating it like that
use Create element and add id dynamically then use your function I guess it will work, actually worked in my case
var newCheckBox = document.createElement('input');
newCheckBox.type = 'checkbox';
newCheckBox.id = 'ptworkinfo';
You can do using following for dynamically created elements:
$(document).on("click", ".cbCheck", function () {
var value=$(this).attr("value");
alert(value);
});
I read similar posts on this but fails to work at this time. Mine is slightly different.
I call a javascript function addFormField which creates a dynamic input element within a form. This part works fine. Within that function I call the JQuery function loadData(id) to test if the id of the dynamically created element exists but it does not. Is loadData being called correctly to wait $ for the input element id to be created before checking if it's created? Thanks!
function addFormField() {
var id = document.getElementById("id").value;
$("#divTxt").append("<p id='row" + id + "'><label for='txt" + id + "'>Field " + id + " <input type='text' size='20' id='txt" + id + "'><p>");
$(function () {
loadData(id);
});
id = (id - 1) + 2;
document.getElementById("id").value = id;
}
function loadData(id) {
if ( $('#txt' + id).length ){
alert('success');
}
else {
alert ('fail');
}
}
<html>
<p>Add</p>
<form method="get" id="form1" action='#'>
<input type="hidden" id="id" value="1">
<div id="divTxt"></div>
</html>
Your code works fine for me: http://jsfiddle.net/6t8eX/
Just make sure that the addFormField() method is global. If it isn't, the inline onClick won't be able to find it.
If it is wrapped in $(function () { }), (or in any other function body) it won't be global.
as the title says, I keep getting "undefined" when I try to get the id attribute of an element, basically what I want to do is replace an element with an input box when the value is "other".
Here is the code:
function showHideOther(obj) {
var sel = obj.options[obj.selectedIndex].value;
var ID = $(this).attr("id");
alert(ID);
if (sel == 'other') {
$(this).html("<input type='text' name='" + ID + "' id='" + ID + "' />");
} else {
$(this).css({
'display': 'none'
});
}
}
The HTML:
<span class='left'><label for='race'>Race: </label></span>
<span class='right'><select name='race' id='race' onchange='showHideOther(this);'>
<option>Select one</option>
<option>one</option>
<option>two</option>
<option>three</option>
<option value="other">Other</option>
</select>
</span>
It is probably something small that I am not noticing, what am I doing wrong?
Change
var ID = $(this).attr("id");
to
var ID = $(obj).attr("id");
Also you can change it to use jQuery event handler:
$('#race').change(function() {
var select = $(this);
var id = select.attr('id');
if(select.val() == 'other') {
select.replaceWith("<input type='text' name='" + id + "' id='" + id + "' />");
} else {
select.hide();
}
});
your using this in a function, when you should be using the parameter.
You only use $(this) in callbacks... from selections like
$('a').click(function() {
alert($(this).href);
})
In closing, the proper way (using your code example) would be to do this
obj.attr('id');
Because of the way the function is called (i.e. as a simple call to a function variable), this is the global object (for which window is an alias in browsers). Use the obj parameter instead.
Also, creating a jQuery object and the using its attr() method for obtaining an element ID is inefficient and unnecessary. Just use the element's id property, which works in all browsers.
function showHideOther(obj){
var sel = obj.options[obj.selectedIndex].value;
var ID = obj.id;
if (sel == 'other') {
$(obj).html("<input type='text' name='" + ID + "' id='" + ID + "' />");
} else {
$(obj).css({'display' : 'none'});
}
}
You could also write your entire function as a jQuery extension, so you could do something along the lines of `$('#element').showHideOther();
(function($) {
$.extend($.fn, {
showHideOther: function() {
$.each(this, function() {
var Id = $(this).attr('id');
alert(Id);
...
return this;
});
}
});
})(jQuery);
Not that it answers your question... Just food for thought.
What are you expecting $(this) to refer to?
Do you mean sel.attr("id"); perhaps?
Remove the inline event handler and do it completly unobtrusive, like
$('#race').bind('change', function(){
var $this = $(this),
id = $this[0].id;
if(/^other$/.test($(this).val())){
$this.replaceWith($('<input/>', {
type: 'text',
name: id,
id: id
}));
}
});
I had a similar issue.
`var ID = $(this).attr("id");`
sometimes using this method with arrow function (`
$('div).click(()=>{
console.log($(this).attr("id"))
}
`)
)Could result in undefined output so instead better using the keyword 'function'
In the function context "this" its not referring to the select element, but to the page itself
Change var ID = $(this).attr("id");
to var ID = $(obj).attr("id");
If obj is already a jQuery Object, just remove the $() around it.
I recommend you to read more about the this keyword.
You cannot expect "this" to select the "select" tag in this case.
What you want to do in this case is use obj.id to get the id of select tag.
You can do
onchange='showHideOther.call(this);'
instead of
onchange='showHideOther(this);'
But then you also need to replace obj with this in the function.