We Keep Coding

Form button add dynamically in JS

I tried to add dynamically a form in JavaScript, but when I click on the submit button nothing happens. I know that is because the button has no listener, but I don't know what I have to add in the listener for a normal sending button behavior.
Here some of my code
document.getElementById("partTwo").innerHTML += "<form id='download_report' method='post' class='form-horizontal' role='form' action='include/client.process.php'>";
document.getElementById("partTwo").innerHTML += "<input type='hidden' name='jobid' value='" + jobId + "'/>";
document.getElementById("partTwo").innerHTML += "<input type='hidden' name='job' value='" + job_details.heavyInfosJson + "'/>";
document.getElementById("partTwo").innerHTML += "<input type='hidden' name='download_report' value='1'/>";
document.getElementById("partTwo").innerHTML += "<button id='download_report_button' type='submit' class='btn btn-default btn-xs'>Télécharger le rapport</button>";
document.getElementById("partTwo").innerHTML += "</form>";
I want from the listener to juste send the form to my client.process.php
I know that it s a beginner question but any help would be appreciated.
Thanks

Working fiddle.
You should add the inputs inside form and not inside div partTwo, so your code should be like :
document.getElementById("partTwo").innerHTML += "<form id='download_report' method='post' class='form-horizontal' role='form' action='include/client.process.php'>";
document.getElementById("download_report").innerHTML += "<input type='hidden' name='jobid' value='" + jobId + "'/>";
document.getElementById("download_report").innerHTML += "<input type='hidden' name='job' value='" + job_details.heavyInfosJson + "'/>";
document.getElementById("download_report").innerHTML += "<input type='hidden' name='download_report' value='1'/>";
document.getElementById("download_report").innerHTML += "<button id='download_report_button' type='submit' class='btn btn-default btn-xs'>Télécharger le rapport</button>";
Hope this helps.

The problem is that <form> tag is autoclosed. innerHTML returns well formed html. See this question

You should consider using createElement rather than innerHTML, see 2946656
Here is a basic example of how to create a form and append it to the page:
var form = document.createElement("form");
form.setAttribute('action', 'contact.php');
form.setAttribute('method', 'POST');
var inputField = document.createElement("input");
inputField.setAttribute('value', 'example');
form.appendChild(inputField);
document.body.appendChild(form);

JQuery/javascript doubleclick=do something on each div from foreach() php

I have this PHP file:
foreach($allfiles as $file) {
echo '<div class="file" id="file' . $file->id . '">';
echo '<div id="checkbox"><img src="images/delete.png" width="15" height="15"></img></div>';
echo '<div id="filename">'. $file->name . '</div>';
echo '<div id="size">| '. $file->size . ' </div>';
echo '<div id="created">'. $file->created . '</div>';
echo '<div id="download"><img src="images/download.png" width="18" height="18"></img></div>';
echo '</div>';
?>
<script>
var id = <?php echo $file->id; ?>
</script>
<?php
}
and this JS file
$('#file' + id).dblclick(function() {
alert(1);
});
What I'm trying to do is that when div "file" + the file id is clicked, it will alert "1" (or open the file).
The problem is that now it only alerts 1 when I doubleclick the last div I have, while it is supposed to be done on all of them.
Is there a solution like foreach div called file + something do ? when doubleclicked.
Sorry if this was very unclear :D

You can use data-* prefixed custom attribute like
echo '<div class="file" data-id="' . $file->id . '">';
Bind your event using the common class and then fetch data-idusing .data()
$('.file').on('dblclick', function() {
alert($(this).data('id'));
});

Get simple CMS plugin

I am currently trying to modify a plugin that was made for get simple cms. The plugin is called "pages with comments". The reason I am posting here is because the topic for the plugin in the forums looks to be dead. Here is the link to the plugin I am currently using. https://mega.co.nz/#!pVcRnTiI!N0SyhLXrPbE1vFH3dNBaqO0zznETDD--QQpWp0c1EJoI have modified it but so you can see what code I am working with I am uploading it as a zip. My question is how do I make a a field required so when users submit the comment there has to be something in it. Either that or make that field a drop down.
Thanks
if ($capt =='Y'){
echo '<div id="captch"> ';
echo '<img alt="" class="capt" id="captcha'.$imfin.'" src="'.$siteurl.'plugins/pages_comments/img_cpt.php?url='.GSPLUGINPATH.'pages_comments/" />';
echo '<input type="button" value="'.$i18n['reload'].'" onClick="javascript:rec_cpt("captcha'.$imfin.'","'.$siteurl.'plugins/pages_comments/img_cpt.php?url='.GSPLUGINPATH.'pages_comments/")" /> <span class="msgavs">'.$i18n['rl'].'</span>';
echo '</div>';
echo '<div class="cap_input">';
echo '<input type="text" value="" name="guest[pot]" /><span>'.$i18n['Cpt'].'('.$i18n['Rf'].']'.'</span>';
echo '</div>';
}
echo '<div class="submit">';
echo '<input type="submit" value="'.$i18n['Ev'].'" name="guest-submit" />';
echo '</div>';

if (empty($_POST["field_name"])) {
$FieldErr = "FIELD is required"; //or any other error message
} else {
// code for submitting;
}
// you can dispaly the error message using echo $FeildErr beside your field area

Make Wish List Dynamic for each item/ article

HI i got a little Problem i have whish list script which adds artivcles from shop into a session and saves them but when i click on the which list he only adds the first item how to male it dynamic that every wish list click is for the individual item in the shop
my article structure, onclick of wlbutton1 or wlbutton2 he should add the article with id1 or 2 to the wishlist:
echo '<div class="span3 filter--'.$obj->product_prop1.'" data-price="'.substr($obj->price, 0, -3) . '" data-popularity="3" data-size="s|m|xl" data-color="pink|orange" data-brand="'.$obj->product_brand.'">';
echo '<div class="product">';
echo '<div class="product-img featured">';
echo '<form method="post" action="../cart_update.php">';
echo '<div class="picture"><img src="images/'.$obj->product_img_name.'">';
echo '<div class="img-overlay"><button class="add_to_cart btn more btn-primary">Kaufen</button>...mehr</div>';
echo '</div>';
echo '</div>';
echo '<div id="result"></div>';
echo '<div class="main-titles"><h4 class="title">'.$currency.$obj->price.'</h4>';
echo '<h5 class="no-margin isotope--title" id="product'.$obj->id.'">'.$obj->product_name.'</h5>';
echo '<p class="no-margin pacifico" style="position: absolute;right: 10px;top: 5px; text-transform: capitalize;">'.$obj->product_brand.'</p>';
echo '<p class="no-margin" style="position: absolute;right: 10px;top: 25px;"><a class="wl-button'.$obj->id.'"><i class="icon-gift"></i></a></p>';
echo '</div>';
echo '<p class="desc">'.substr($obj->product_desc, 0, 160) . '...</p>';
echo '<input type="hidden" name="product_qty" value="1" />';
echo '<input type="hidden" name="product_code" value="'.$obj->product_code.'" />';
echo '<input type="hidden" name="type" value="add" />';
echo '<input type="hidden" name="return_url" value="'.$current_url.'" />';
echo '</form>';
echo '</div>';
echo '</div>';
My Jquery Code how to make it dynamic and individual for eacht artivle?:
$(".wl-button").click(function() {
var wlproduct = $('#product').text();
var wlproducturl = $('#producturl').attr('href');
$.ajax({
type : "POST",
url : "../assets/wlscript.php",
data : { wlproduct : wlproduct, wlproducturl : wlproducturl },
success : function(data) {
$('div#result').text('You added '+wlproducturl+' '+wlproduct+'\'s to your wishlist.');
}
});
});

Here an example of how you can do to find the data you need to add your article.
First the HTML example :
<div class="products">
<form>
<p>
<!-- Fist article -->
<span>Article 1</span>
<!-- A name construct so that I can easilly find in which iteration of the loop I am -->
<input type="hidden" name="article[0].id" value="1" />
<input type="hidden" name="article[0].name" value="article1" />
<button class="addButton">Add article</button>
</p>
<p>
<!-- Second article -->
<span>Article 2</span>
<input type="hidden" name="article[1].id" value="2" />
<input type="hidden" name="article[1].name" value="article2" />
<button class="addButton">Add article</button>
</p>
<!-- … others articles -->
</form>
</div>
And the Javascript part :
$(document).ready(function(){
$(".addButton").on("click", function(event){
event.preventDefault();
var button = $(this);
var parent = button.parent(); // We need to find the container in which to seach our fields.
var idArticle = parent.find("input[name$='.id']").val(); // Find the ID
var nameArticle = parent.find("input[name$='.name']").val(); // Find ather data
alert("Add article with id = " + idArticle + " and name = " + nameArticle);
// Next step is the ajax method to call the server with the correct data.
});
});
By working like that, you can then send to your server the data you need to add an article to your wishlist.
Here the link to the JS Fiddle example.
In this example, you can see how to work around the HTML content from the button to find the inputs.
You can find more about "tree traversal" with the jQuery API.

Form won't submit when generated with Javascript

I'm generating a login form in javascript. The form displays perfectly and the HTML looks fine in Google Dev Tools but the form won't submit when I click the submit button.
Heres's the generated form code:
var loginBox = '<div id="loginBox">';
loginBox += '<h1>Login</h1>';
loginBox += 'Please use the form to login below<br /><br />';
loginBox += '<form action="home.php" method="post">';
loginBox += '<div class="input">';
loginBox += '<label for="username">Username</label>';
loginBox += '<input type="text" name="username" />';
loginBox += '</div>';
loginBox += '<div class="input">';
loginBox += '<label for="userpass">Password</label>';
loginBox += '<input type="password" name="password" />';
loginBox += '</div>';
loginBox += '<div class="clear"></div>';
loginBox += '<div class="input">';
loginBox += '<input type="submit" class="submit button" value="Submit" />';
loginBox += '</div>';
loginBox += '</form>';
loginBox += '</div>';
Any ideas on why this wouldn't work?
I know I could probably write some Javascript to submit the form when the submit button is pressed but I don't see why that should be necessary.
Thanks

The bigger question is why are you creating a login box with Javascript?
I think that it is cleaner to refactor it and have the form live inside a hidden div, and use JavaScript to show/hide it as required. This would get around some brower's issues with dynamically adding a form using element.innerHTML.
If that is not an option then you may have to change your JS to add it using the DOM. This is quite verbose and not very easy to read.

I added it to this page and it seemed to work. Do you have any client validation scripts that might intercept the form submit event?
My code:
$(loginBox).appendTo("body");