Develop Reference

Created Input from javascript not delivering its value

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.

<pattern> & required doesn't work on dynamically created form

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.

How to get value from form field and concatenate with url in Jquery

I am using jquery for the first time today and need help with this problem. For the all the pros out there, this issue might sound dumb but I am struggling.
I have a form field in a HTML page, and want to get value from the form field and concatenate with a url.
<form id="form-container" class="form-container">
<label for="street">Street: </label><input type="text" id="street" value="">
<label for="city">City: </label><input type="text" id="city" value="">
<button id="submit-btn">Submit</button>
</form>
This is tag where I am want to add the values of street and city.
<img class="bgimg" src="https://maps.googleapis.com/maps/api/streetview?size=600x300&location=White House, Washington DC&key=API_KEY">
</body>
Basically the location field in this src will come from the form field. so something like this:
<img class="bgimg" src="https://maps.googleapis.com/maps/api/streetview?size=600x300&location=" + $('#street').val() + "," + $('#city').val()&key=API_KEY">
</body>
But unfortunately this is not working and need some pointers to resolve this.
UPDATE : I am trying this method to achieve this but not working
$body.append('<img class="bgimg" src="https://maps.googleapis.com/maps/api/streetview?size=600x300&location=" + $('#street').val() + " " + $('#city').val() + "&key=ABC">'

You can do something like this:
var url = "https://maps.googleapis.com/maps/api/streetview?size=600x300&location={street},{city}&key=API_KEY";
$("#submit-btn").on('click', function() {
var street = $('#street').val();
var city = $('#city').val();
var finalURL = url.replace('{street}', street).replace('{city}', city);
$('.bgimg').attr('src',finalURL);
});
Note that you shouldn't have src attribute set in the HTML, else browser will fire a request to invalid source.
Also make sure to validate the user inputs and that you've jQuery.

If You need to do it using jQuery then set the value of 'src' property of img tag like this:
$('.bgimg').prop('src', '"https://maps.googleapis.com/maps/api/streetview?size=600x300&location=' + $('#street').val() + ',' + $('#city').val() + '&key=API_KEY')

You should modify the src of your image on form submit.
Possible duplicate of this thread (you will find a detailed answer there): Changing the image source using jQuery
So something like:
function setSrc(){
$('.bgimg').prop('src','https://maps.googleapis.com/maps/api/streetview?size=600x300&location=' + $('#street').val() + ',' + $('#city').val() + '&key=API_KEY');
}
<form id="form-container" class="form-container" onSubmit="setSrc();">

Unable to get hidden form value into javascript variable

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

Getting variable into JS via PHP assigned id

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