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
Related
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); }
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 the following Javascript to generate a silent call to another sheet to update a database value without refreshing the page
function UpdateDB(table,column,type){
var value = $("#Assigned").val();
$.post("UpdateValuation.php?Table=" + table + "&Value=" + value + "&Column=" + column + "&Type=" + type, {}).done();
};
This works perfectly but only for the "Assigned" table row since it is statically assigned.
I use the following php to generate the table entry with button
print "<tr><td>" . $stuff['Status'] . "</td><td ><input type=\"text\" id=\"" . $stuff['Status'] . "\" name=\"" . $stuff['Status'] . "\" value=". $stuff['Value'] ." size = \"4\" style = \"text-align: center\"/><button onclick=\"UpdateDB('NOCstatus','Status','". $stuff['Status'] ."');\">Update</button></td></tr>";
Which after variables are assigned looks like this for my "Pending" row
<input id="Pending" type="text" style="text-align: center" size="4" value="120" name="Pending"> </input>
<button onclick="UpdateDB('NOCstatus','Status','Pending');">
Update
</button>
My problem is that passing "this.value" or trying to use a variable in the javascript portion I always come up with a blank value, the only time I can get a value to be correct is by statically assigning the "#Assigned" or "#Pending" in the value field. I have hundreds of entries so I don't want to write the function over for each of these. I know there is probably something extremely simple I am missing but I cannot get the pieces to fit.
I need to pass the typed in value in the input field to the function to update the database. Please help.
function UpdateDB(table,column,type){
var value = $('#'+type).val();
$.post("UpdateValuation.php?Table=" + table + "&Value=" + value + "&Column=" + column + "&Type=" + type, {}).done();
};
?
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
I am a complete novice in jQuery and javascript, so if this sounds very silly or very simple thing to do please help me out with your expertise
$(document).ready(function(){
$('#add_button').click(function(){
var vol = $('input#cv').val();
var col = $('input#cc').val();
var comment = $('input#co').val();
var sample = $('#cv').attr('class');
var url = $('input#cv').attr('title');
if( (vol && col && comment) == ''){
alert('No data to update');
}else{
url = url.concat('volupdate=',vol,'&concupdate=',col,'&commupdate=',comment,'&sample=',sample);
alert(sample + " " + vol + " " + col +" "+ comment +" " + url);
}
});
});
html :
my $correct_vol = qq{<input type="text" name="cv" id="cv" size="6" class="$sample_name" title="/here/is/where/you/are">};
my $correct_conc = qq{<input type="text" name="cc" id="cc" size="6" class="$sample_name" title="/here/is/where/you/are">};
my $comments = qq{<input type="text" name="co" id="co" size="10" class="$sample_name" title="/here/is/where/you/are">};
my $update = q{<input type="submit" value="Update" id="add_button" class="add_now">};
These forms the last four columns in a big table. My question is: How should I return the url in jquery function to my perl?
if I use return url what should I expect ? And how should I handle the values passed from the url in my script? Thanks for your suggestions.
Your javascript code won't connect with your perl code by itself. The connections to perl will happen as it processes the form elements. So your values need to be passed via POST or GET, the same way they would be passed if you were doing this in an HTML + perl only solution.
What you can do in your javascript is to set the value of the form input that you need to pass. That would be accomplished via something like $("#inputElementID").val(url); (assuming that you give the input element an id of inputElementID in the html where you create it.
You could also submit the form through javascript, if it made sense to do so.
As to using return url, that will only end up returning the value of url to the javascript function that calls it (which, in this case, doesn't really exist since this is a document.ready() execution.