i created an input from javascript like this:
<form action='' method='post' name='create'>
<span id="duration"></span>
</form>
function duration(){
document.getElementById('duration').innerHTML += "<label>Deadline :</label><input type='date' name='deadline' id='deadline' onchange='pengumuman(this.value)' class='form-control' min=" + date('now', 0, 'ymd') + " max=" + date('now', 7, 'ymd') + ">";
}
And i created a span inside a form, but whenever I tried to submit this form and print I got no value (string(0) = "") or $_GET['deadline']; (and i just tried $_POST['deadline'] also but still the same. not found Undefined index: deadline from this input. How to fix this? Do created input from javascript can't be inputted in form?
POST parameters come in on $_POST, not $_GET. $_GET is for GET parameters. Since your form has method='post', it will send its data via POST.
The min=" + date('now', 0, 'ymd') + " max=" + date('now', 7, 'ymd') + part of your code also looks suspect, unless you've defined a JavaScript function alled date.
Related
I'm trying to implement client-side input validation for a datatables-editor that I'm rewriting. The form is created dynamically and then added to a bootstrap-modal.
I have encountered a problem where adding <pattern> and/or required doesn't result in any added functionality at all. The form just accepts the input and submits, and I'm quite confused as to why that is.
EDIT:
I have added the relevant code to a plunkr
I have now added the full project. Specifically the issue is connected to the _openEditModal function and _openAddModal function, where i generate the forms dynamically and add the pattern='patternVariable'.
The pattern for this example (however it doesn't work no matter what pattern I use):
^[a-zA-Z0-9\.]+$
Creating the form:
var data = "";
data += "<form name='altEditor-form' role='form'>";
for(var j = 0; j < columnDefs.length; j++){
data += "<div class='form-group'><div class='col-sm-3 col-md-3 col-lg-3 text-right' style='padding-top:7px;'><label for='" + columnDefs[j].title + "'>" + columnDefs[j].title + ":</label></div><div class='col-sm-9 col-md-9 col-lg-9'>";
if(columnTypes[j].type.includes("text")){
data += "<input type='" + columnTypes[j].type + "' id='" + columnDefs[j].title + "' pattern='" + columnPattern[j].pattern + "' title='" + patternErrMsg[j].msg + "' required name='" + columnDefs[j].title + "' placeholder='" + columnDefs[j].title + "' style='overflow:hidden' class='form-control form-control-sm' value='" + adata.data()[0][newaData[j].name] + "'>";
}
if(...){...}
data +="</div><div style='clear:both;'></div></div>";
}
data += "</form>";
As you can see I add the tags like so:
pattern='" + columnPattern[j].pattern + "' title='" + patternErrMsg[j].msg + "' required ...
The modal:
$('#altEditor-modal').on('show.bs.modal', function() {
$('#altEditor-modal').find('.modal-title').html('Edit Record');
$('#altEditor-modal').find('.modal-body').html(data);
$('#altEditor-modal').find('.modal-footer').html("<button type='button' data-content='remove' class='btn btn-default' data-dismiss='modal'>Close</button>\
<input type='submit' data-content='remove' class='btn btn-primary' id='editRowBtn'>Save Changes</input>");
I made sure that the button has type='submit' as I've read that this is what triggers the pattern-check.
editRowBtn code:
$(document).on('click', '#editRowBtn', function(e)
{
e.preventDefault();
e.stopPropagation();
that._editRowData();
});
To make sure that my code is actually adding the attributes to the input i checked the console:
Any help or advice is greatly appreciated as I'm kinda stuck here.
It's a little hard to read your examples (a plunkr would be nice :) ), but from what I can see, you've put your submit button outside your form.
That won't work, since the button won't know what it's submitting.
Try putting the submit button inside the form.
Alternatively, try using the form attribute on the submit button, which should reference the form ID. I've never used this myself, but according to MDN, it's part of the HTML5 spec.
Form attribute description from MDN:
The form element that the input element is associated with (its form owner). The value of the attribute must be an id of a element in the same document. If this attribute is not specified, this element must be a descendant of a element. This attribute enables you to place elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form.
The autosubmit document.myForm.submit(); works fine if I call it once, but I'm trying to call it multiple times and after 1st attempt, the other times give out an error Uncaught Error: document.myForm.submit(); the code works 100% fine UNTIL I call more than once. Is this normal? How do I avoid it?
Research shows that most likely my form inputs are named Submit, which is not the case
I'm using Phonegap/Cordova:
function sendData()//Gets called once per second
{
document.body.insertAdjacentHTML("afterend",
'<form name=\"myForm\" action=\"http://www.mywebsite.com/formProcess.php\" method=\"POST\" target=\"submission.frame\">' +
'<input type=\"text\" name = "uuid" value=\"' + String(uuid) + '\">' +
'<input type=\"text\" name = "directionX" value=\"' + String(directionX) + '\">' +
'<input type=\"text\" name = "directionY" value=\"' + String(directionY) + '\">' +
'<iframe name=\"submission.frame\" hidden></iframe>' +
'</form>'
);
document.myForm.submit();
}
Server PHP
<?php
//Do bunch of stuff
?>
<form name="myForm" action="<?php echo $current_file; ?>" method="POST">
UUID <input type="text" name="uuid"> <br>
directionX <input type="text" name="directionX"><br>
directionY <input type="text" name="directionY"><br>
<input type="submit" value="Send">
</form>
The first time you call it, you add a form to the document and then document.myForm is that form element.
The second time you call it, you add another form (with the same name!) to the document and then document.myForm is an HTML Element Collection (which is an array-like object) containing two forms.
The collection doesn't have a submit method. The two elements inside it do.
You could compensate for that by testing to see if there is a submit method and then grabbing the last element in the collection if it fails…
if (document.myForm.submit) {
document.myForm.submit();
} else {
document.myForm[document.myForm.length - 1].submit();
}
… but it really looks like you would be better off just switching to use XMLHttpRequest instead of throwing forms and iframes into the document. Those are what we used before Microsoft came up with XMLHttpRequest in the late 90s for the Outlook web app.
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 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