I need to create a checkbox input dynamically in javaScript and parse a hardcoded value (test in the below examples). When alerting out the result, val is always null.
What am I doing wrong?
<input onchange='doNotShowClicked(" + 'test' + ");' style='vertical-align:middle;' type='checkbox' />
function doNotShowClicked(val){ alert(val); }
Related
I have a jconfirm window on which i display some informative text.
I would like to add a checkbox on that jconfirm window, that based on its checked/unchecked value will add value to the target URL( which eventually will be processed with django)
The problem is that after adding the checkbox in the html code displayed on the jconfirm page, i loose the value of the checkbox.
$('#credit_checkbox').change(function(){
$('#hiddenInput').val(this.checked);
console.log($('#hiddenInput'));
});
$(".popup-action").click(function(e) {
var target = this.href;
e.preventDefault();
info = "<br/><br/><div> What will happen:<ul class='log payback' style='text-align:left;'><li><input id='credit_checkbox' type='checkbox' />Wanna do this?<br /><input id='hiddenInput' value=''>"; //Probably missed a quote here
jConfirm("{% trans 'Set status to ' %}" + $(this).html() + " ?"+ info, "Confirmation", function (r) {
if ($('#credit_checkbox').is(':checked')){
target = target + "/True";
}
if (r) {
console.log($('#hiddenInput').val());
$.getJSON(target,function(json) {codecode}
);
}
});
If it's not the syntax error as someone else here pointed out, it's because your checkbox is destroyed before you can read its value.
Try attaching an event to that checkbox:
$("#credit_checkbox").change(function(){
$("#hiddenInput").val(this.checked);
});
Then you create a hidden input in HTML that will store that value:
<input id="hiddenInput" value="">
And then you can read that value from the #hiddenInput at any time.
I'm using JavaScript to try and pass the value of a hidden input field as a variable into the url path below, but when I inspect the code, I'm seeing 'undefined' where I want the variable to be.
I would really like to get this issue solved. Any idea why the value is 'undefined' instead of the value of the hidden input field?
var userID = "";
userID = $('#userID').val();
document.write("<input type='hidden' id='userID'>");
document.write("<a href='http://sample/folder/" + userID + "/Documents/Forms/All.aspx'><li>test</li></a>");
Your javascript can't find the value because your html is not created.
Try to create it, before getting the value.
document.write("<input type='hidden' id='userID' value='user1234'>");
var userID = "";
userID = $('#userID').val();
console.log(userID);
document.write("<a href='http://sample/folder/" + userID + "/Documents/Forms/All.aspx'><li>test</li></a>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You're getting undefined because the input field doesn't have any value. Make sure you set a default value to the field so that even if nothing is entered into the field, you can still extract a value.
<input type='hidden' id='userID' value="defaultText"/>
Reference (JSFiddle): https://jsfiddle.net/e7zkhhny/
Side-note: It's usually a good idea to put a placeholder on an input field.
You're trying to retrieve a value from an element that does not yet exist on the page. It will exist only after this statement runs document.write("<input type='hidden' id='userID'>");
To work around this,
1) Make sure that the javascript runs only after the hml loads using a $( document ).ready(function() {
$( document ).ready(function() {
var userID = ""
userID = $('#userID').val();
$('#link').attr("href", "http://sample/folder/" + userID + "/Documents/Forms/All.aspx");
}
2) Place the following html on your site:
<input type='hidden' id='userID' value="0">
<a id='link' href=''><li>test</li></a>
I have a form with several fields. The value of one of the hidden fields is passed in the URL along with some other input values like this:
example.html#firstname=Homer&lastname=Simpson&itype=TARGET
I have a javascript that parses the URL and that is populating the form just fine. The output of the form contains all of the values passed from the url, so I know the variable are getting passed to the form fields.
My issue is - I want to be able to setup an if statement to change the text of one of the headings based on the value of itype.
Here's my code:
var itypestuff = document.getElementById("itype").value;
document.write ("<p>The value of the variable is " + itypestuff.value + "</p>");
if( itypestuff == "TARGET" ){
document.write("This is the target");
}
else{
document.write("This is not the target");
}
I added the first document.write statement as a debug and it's coming back with: The value of the variable is undefined
Here's what the itype field variable looks like:
<input type="hidden" name="itype" id="itype" value="">
Any ideas how I can get the variable from the URL into my javascript variable so I can do my if statement?
Change :
document.write ("<p>The value of the variable is " + itypestuff.value + "</p>");
To
document.write ("<p>The value of the variable is " + itypestuff + "</p>");
OR
Change
var itypestuff = document.getElementById("itype").value;
To
var itypestuff = document.getElementById("itype");
// And
if( itypestuff.value == "TARGET" ){ //...
EDIT
You have to change your html like that :
<input type="hidden" name="itype" id="itype" value="<?= htmlspecialchars($_GET['itype']); ?>">
And call : example.php?firstname=Homer&lastname=Simpson&itype=TARGET
I am using jQuery to send Ajax request to the server to save the values being input in the form. Below the section where I am stuck. The HTML is as
<span class="no-margin multiple Date_Off" style="margin-left: 104px;">
<input type="text" value="" /><input type="text" />
<input type="text" value="-" /><input type="text" />
<input type="text" /><input type="text" value="-" />
<input type="text" /><input type="text" /><input type="text" />
<input type="text" />
</span>
I have tried using jQuery to send the request. What I want to do is something like this
I want to save the values from the form, to the same Column_Name that the input fields have. In the multiple input fields I am not using input names. Instead I am using a classname which is identical to the Column_Name in the database.
For that, I am using $(this).parent().attr('class');. If I use this in an alert, it gives me the result without error. But if I use it in the code, it gives me undefined.
I want to append each input's value to the string to save it as a single string.
Here is what I tried so far
var input = $('input');
input.change(function () {
// Input click function...
if ($(this).parent().attr('class')
.replace(' multiple ', '')
.replace('no-margins', '') == 'Date_Off') {
// Date Time for the office work!
var value = '';
value = $(this).parent().find('input').each(function (index, ele) {
value += ele.val();
});
send_request('Date_Off', value);
// Below is the else condition, to execute only when the input is single
// Like a single string input and not like the one in image
// That's why I am using attr('name') for that.
} else {
send_request($(this).attr('name'), $(this).val());
}
});
But what it returns is always a undefined in the Query structure. Here is the function for that
function send_request(input_name, value) {
$.ajax({
url: '/ajax_requests/save_form',
data: 'input_name=' + input_name + '&form_id=' +
$('input[type=hidden]').val() + '&value=' + value,
error: function () {
$('.main-content').append(
'There was an error in request.
Please contact your website Developer to fix it.'
);
},
success: function () {
}
});
}
Image for the code execution
The input in focus was 1. Date. And the console shows the Internal Server Error. Because jQuery sent the request with input_name=undefined which is not a Column_Name.
I have created a (Mini) fiddle for that: http://jsfiddle.net/afzaal_ahmad_zeeshan/EHWqB/
Any help here?
For the fiddle that you posted, there were two errors. The first was you were calling ele.val(), but ele in this context is not a jQuery object - so you need to get the value property off of it. The second is that the jQuery each function operates on an array of objects and it's return value is that array of objects. You don't want your value, which should be a string, to be accepting that return value. Here is an updated, working fiddle
input.change(function () {
// Input click function...
var value = '';
$(this).parent().find('input').each(function (index, ele) {
value += ele.value;
});
send_request('Date_Off', value);
});
In this line you're trying to get the name of the input
send_request($(this).attr('name'), $(this).val());
I don't see a "name" attribute anywhere in your code, I think what you want is to get the class of the parent instead?
send_request($(this).parent().attr('class'), $(this).val());
I do not understand why I cannot access field values on forms generated dynamically via AJAX / MySQL.
The form template looks like this:
<form class="dishform" id='" + d.dish_id + "FF' action="#" method="post">
<fieldset>
<label for="dish_name">Name</label>
<textarea onblur="changedField(this);" id='" + d.dish_id + "n' name="dish_name" class="textarea-comment dish_name valid" maxlength="80">
default text from MySQL
</textarea>
<label for="dish_decription">Description</label>
<textarea onblur="changedField(this);" id='" + d.dish_id + "d' name="dish_description" class="textarea-comment dish_description valid" maxlength="240">more default text from MySQL here</textarea>
<img src="/wp-content/uploads/menu-icons/save-dish.png" alt="Save current dish changes" class="action-menu-buttons save-curr-dish" onclick="saveDish(\'' + d.dish_id + '\')">
</fieldset>
</form>
The d.dish_id value is the unique table key and it looks something like "DSH0000000001".
When I hit saveDish button I call alerts to show contents of name field, and I get UNDEFINED for the value, but the right figure for defaultValue:
function saveDish(thisId) {
var NameId = thisId + 'n' <--- all ids for "name" are created as "d.dish_id + n"
alert("NameID= " + NameId); <--- this shows "DSH0000000001n" so correct
alert("DINAM= " + document.getElementById(NameId).defaultValue); <--- this shows the defaultValue correctly to what is in the textarea from load
alert("VAL= " + document.getElementById(NameId).Value); <--- this one shows UNDEFINED
alert("HARD CODED ID VAL= " + document.getElementById('DSH0000000001n').Value); <--- this one shows UNDEFINED
};
Even if I hard code an ID to one of the ones I can see in inspect (that is the textarea exists with the right id), I still get UNDEFINED.
Any help is appreciated/
in saveDish, .Value needs to be lowercased .value