Develop Reference

How to create dynamic textarea which includes php $_POST code

I got a little problem with php/js. I want to create a website for a school project which is a communotary food receipe oriented website. And here I'm struggling with my page 'submit receipe'.
To be exact the problem is that I create, with a button, some dynamic textarea in order to represents the steps of a receipe, to do so I use a js eventHandler. And here I have a problem because I want to insert in this js code the post value that the user has typed. But I honestly don't know how to do this, I get the fact that js is executed before php so do I have a solution to bypass this problem ?
Here my code :
// The js script
function createNewElement() {
var txtNewInputBox = document.createElement('div');
var php = "<?php if(isset($_POST['boxExplain_" + numStep + "']))echo $_POST['boxExplain_"+ numStep + "']?>";
txtNewInputBox.innerHTML = "<label for='box-explain'>Step " + numStep + "</label>"+
"<br>"+
"<textarea type='text' class='box-explain' name='boxExplain_" + numStep + "'" +
"value='' placeholder='BlaBla.'>" +
php + "</textarea>" +
'<i class="fas fa-minus-circle '+ numStep +'"></i>';
numetape++;
document.getElementById("step-box").appendChild(txtNewInputBox);
}
And here the HTML :
<div class="explain-box">
<h3>Explanations </h3>
<label for="box-explain">Step 1</label>
// The first one is not dynamic
<textarea type='text' class='box-explain' name='boxExplain_1' value="" placeholder="BlaBla"><?php if (isset($_POST['boxExplain_1'])) echo $_POST['boxExplain_1'] ?></textarea>
//here goes the js one
<div id="step-box"></div>
<div id="dynamicCheck">
<input class="btnStep" type="button" value="add Step" onclick="createNewElement();" />
<i class="fas fa-plus"></i>
</div>
</div>
I hope it was clear enough, thanks for your help.

Producing dynamic id for a button in javascript

I am trying to write a feature where a table data is generated from a database along with buttons like editing that particular row. The data is generated through a foreach from laravel. One of these buttons is called Edit User.
When the Edit User is clicked a form div will be .toggle('show') which will show the form.
Now I think the problem is the buttons have the same id for the toggle so when I press the second, third and so on buttons the form doesn't toggle.
Here is my script.js
$(document).ready( function() {
$("#form1").hide();
$("#form2").hide();
$("#createuser1").click(function() {
console.log('Create user button clicked');
$("#form2").hide();
$("#form1").toggle('slow');
});
$("#edituser1").click(function() {
console.log('Edit user button clicked');
$("#form1").hide();
$("#form2").toggle('slow');
});
});
//start of checkuser
function fetchUser(field, query) {
console.log('The field is ' + field + ' and the userid is ' + query);
}
my html file (main.blade.php)
<tbody>
#foreach($users as $user)
<tr>
<td>{{$user->userid}}</td>
<td>{{$user->firstname}}</td>
<td>{{$user->lastname}}</td>
<td>{{$user->username}}</td>
<td>{{$user->password}}</td>
<td>
#if($user->status == 0)
Inactive
#elseif($user->status == 1)
Active
#endif
</td>
<td>
<input class="btn btn-danger btn-inverse" type="button" value="Inactive" />
<input name="edituser" type="button" onclick="fetchUser('edituser', {{$user->userid}})" id="edituser1" class="btn btn-success btn-inverse" value="Edit User"/>
</td>
</tr>
#endforeach
</tbody>
This is the part where it toggles the forms (also part of main.blade.php)
<div class="container" id="form1">
#include('create')
</div>
<div class="container" id="form2">
#include('edit')
</div>
I have only included parts of the code to avoid chunks of unrelated code. But feel free to ask for any more details.
Help me solve the part where the other edit buttons doesn't toggle the edit user form.

I think it is better not to have inline click event handler if you have already a click handler in your code.
Change the id to a class:
<tbody>
#foreach($users as $user)
<tr>
<td>{{$user->userid}}</td>
<td>{{$user->firstname}}</td>
<td>{{$user->lastname}}</td>
<td>{{$user->username}}</td>
<td>{{$user->password}}</td>
<td>
#if($user->status == 0)
Inactive
#elseif($user->status == 1)
Active
#endif
</td>
<td>
<input class="btn btn-danger btn-inverse" type="button" value="Inactive" />
<input name="edituser" type="button" data-id="{{$user->userid}}" class="btn btn-success btn-inverse editUser" value="Edit User"/>
</td>
</tr>
#endforeach
</tbody>
Then change your js this way:
$(document).ready( function() {
$("#form1").hide();
$("#form2").hide();
$("#createuser1").click(function() {
console.log('Create user button clicked');
$("#form2").hide();
$("#form1").toggle('slow');
});
$(".editUser").click(function() {
console.log('Edit user button clicked');
var id = $(this).attr('data-id');
fetchUser('edituser', id);
$("#form1").hide();
$("#form2").toggle('slow');
});
});
//start of checkuser
function fetchUser(field, query) {
console.log('The field is ' + field + ' and the userid is ' + query);
}
This way you can reuse the code for all the edituser buttons, you have a much more readible code, you don't have two different click event handler and you don't loose the id of the single user to be passed to the fetchUser function

Well, as I see it, you have two options. Unique ids are a must. I'm assuming your userids are unique, so I'd recommend using them as suffixes to create unique ids for your elements.
First option: Create a unique form for each user that is opened when Edit User is clicked.
Second option: Create a generic form that is populated with the user information when Edit User is clicked.
The first is simpler, but the second with be more efficient. Here is example code of the second solution. Main HTML:
<div class="container" id="main">
<!-- ... -->
<input type="button" onclick="fetchUser('edituser', {{$user->userid}}, {{$user->firstname}}, {{$user->lastname}})" class="btn btn-success btn-inverse" value="Edit User" />
<!-- ... -->
</div>
Edit form HTML:
<div class="container" id="form2">
<input id='editFormFirstName' />
<input id='editFormLastName' />
<input id='editFormPassword' />
</div>
And JS:
function fetchUser(field, userid, firstname, lastname) {
$('#editFormFirstName').val() = firstname;
$('#editFormLastName').val() = lastname;
$('#editFormPassword').val() = "";
}

Increment of counter on dynamic addition of rows

I'm trying to add the rows dynamically plus auto-increment of a counter.I want to start with 1 then 2 then 3 and so on . I have added my code on plunker ,in which every time the max value is getting in first column like 4 then 1,1,2,3.Where am i going wrong ?i Want it to be 1,2,3,4.
Here is the plunker link http://plnkr.co/edit/GuDbJ3SHOPvWkHfNfd8E?p=preview
var _counter = 0;
function Add() {
_counter++;
var oClone = document.getElementById("template").cloneNode(true);
oClone.id += (_counter + "");
document.getElementById("placeholder1").appendChild(oClone);
document.getElementById("myVal").value=_counter;
}
<div id="placeholder1">
<div id="template">
<div>
Value:<input type="text" id="myVal" placeholder="1">
Quantity:<input type="text" placeholder="Qty">
<input type="button" onClick="Add()" value="Click! ">
</div>
</div>

I think it is because you have multiple divs with the id="myVal". The id attribute should be unique on the page. If not, your page will still load, but you may have unexpected behavior.
You are changing the id of the template div, but not the myVal div.

I assume you are looking for something like this:
var _counter = 0;
function Add() {
_counter++;
var oClone = document.getElementById("template").cloneNode(true);
oClone.id += (_counter + "");
document.getElementById("placeholder1").appendChild(oClone);
oClone.getElementsByClassName("myVal")[0].value = _counter;
}
<div id="placeholder1">
<div id="template">
<div>
Value:
<input type="text" class="myVal" placeholder="1">Quantity:
<input type="text" placeholder="Qty">
<input type="button" onClick="Add()" value="Click! ">
</div>
</div>
</div>
In your original you are cloning your template with the same id for the input. So when you do document.getElementById("myVal").value=_counter;, you only get the first input. I changed it to use class instead and get the input with the appropriate class that is a child of the cloned node.

POST DATA issues when adding new elements to the page

Hi all I have a form in which I dynamically add in a new row consisting of a text box and check button on button press. However I need some sort of way to know which checkbuttons were pressed in the post data and therefore need a value field consisting of an ID on each of the the check buttons, code is seen below:
<div id='1'>
<div class="template">
<div>
<label class="right inline">Response:</label>
</div>
<div>
<input type="text" name="responseText[]" value="" maxlength="400" />
</div>
<div>
<input type="radio" name="responseRadio[]" value="" />
</div>
</div>
<div>
<input type="button" name="addNewRow" value="Add Row" />
</div>
</div>
JS to add new row:
var $template = $('.template');
$('input[type=button]').click(function() {
$template.clone().insertAfter($template);
});
can anyone suggest a good way to help me know in the post data which text field, links to which check button, and to know if it was pressed?
at the moment if you were to add 3 rows and check row 3 I have no way of identifying that row three was the button pressed - This is my issue

after you cloned it, change the name so you know about this input
also it's good to have a counter for naming:
like : 'somename[myInput' + counter + ']'
update:
var counter = 0;
var $template = $('.template');
$('input[type=button]').click(function() {
counter++;
$template.clone().attr('name' , 'somename[myInput' + counter + ']').insertAfter($template);
});
now you have array named:somename which you can have a loop over its content on your form handler.

ASP Submit Button onclick/_doPostBack

The form begins:
<% using (Html.BeginForm("Index", "recordssbook", FormMethod.Post, new { id = "SubmitForm" }))
{ %>
The submit button I would like to validate (there are other submit buttons in the same form):
<div><input type="submit" value="Delete Selected" id ="DeleteButton" name="DeleteButton" onclick="deleteRecordsDialog();"/></div>
The buttons in my confirm dialog in js that automatically returns false:
function deleteRecordsDialog() {
var returnThis;
var numRecords = selectedRecordsArr.length;
document.getElementById("popupContainer");
var html = ""
html= html + '<table>';
html= html + '<tr>';
html= html + '<td class="warning-icon-cell"></td>';
html= html + '<td style="padding-left: 5px;">';
if (numAddresses == 1) {
html = html + '<p>You have chosen to delete a record.</p>';
}
else {
html = html + '<p>You have chosen to delete ' + numRecords + ' records.</p>';
}
html= html + '<p>Are you sure you wish to proceed?</p>';
html= html + '</td>';
html= html + '</tr>';
html = html + '</table>';
if (numAddresses == 1) {
html = html + '<div><input type="button" value="Yes, Delete Contact" style="width: 160px; onclick="document.DSubmitForm.HDeleteButton.submit(); CloseDialog();"/> <input type="button" value="Cancel" onclick="CloseDialog();"/></div>';
}
else {
html = html + '<div><input type="submit" value="Yes, Delete Contact(s)" style="width: 160px; onclick="document.DSubmitForm.HDeleteButton.submit(); CloseDialog();"/> <input type="button" value="Cancel" onclick="CloseDialog();"/></div>';
}
html = html + '</div>';
html = html + '</div>';
html = html + '</div>';
html = html + '</div>';
OpenDialog(html, 350, 180, false, "Delete Contact")
return false;
}
My issues:
Even with onclick returning false the form is submitted:
I can change the input type to button instead of submit, and this should work if I can get the psuedo submit to work
is _doPostBack another way to submit the form?: From my google searches I think this should simulate the submit but when I make the submit button a regular button as stated in number 1 clicking "Yes, Delete Record(s)" doesn't submit the form.
I have multiple submit buttons which makes this more complex
I cannot use JQuery's easy .dialog
If someone can help me out in getting this to work I would GREATLY appreciate it!
Thanks!!
EDIT
So the html a list of records with buttons that can query based on letter, add a record, delete a record and edit a record. All of these buttons are submit buttons in the same form.
<td><input type="submit" value="ABC" name="SubmitButton"/></td>
<td><input type="submit" value="DEF" name="SubmitButton" /></td>
<td><input type="submit" value="GHI" name="SubmitButton" /></td>
<td><input type="submit" value="JKL" name="SubmitButton"/></td>
<td><input type="submit" value="MNO" name="SubmitButton"/></td>
<td><input type="submit" value="PQRS" name="SubmitButton" /></td>
<td><input type="submit" value="TUV" name="SubmitButton"/></td>
<td><input type="submit" value="WXYZ" name="SubmitButton" /></td>
<div><input type="button" value="Add Contact" id="addAddress" onclick="AddAddresDialog()" /></div>
<div><input type="button" value="View & Edit Selected" id="EditButton" name="EditButton" onclick="updateAddressDialog()"/></div>
<div><input type="submit" value="Delete Selected" id ="DeleteButton" name="SubmitButton" /></div>
I only want to add the confirm dialog to the delete button being clicked. I want to confirm it using a custom dialog window which is a div on the site master that appears as a pop up by being placed on top of a mask that covers the whole screen which is created in deleteRecordsDialog().
What I want to do is change the submit button for the delete task (id="DeleteButton) to a regular button that just opens the dialog created by deleteRecordsDialog() instead of the form submission it does now. The "Yes, Delete Contact(s)" button in the custom confirm dialog should take on that task of submitting the form with the value "Delete Selected" just as the submit button does now.

It is hard to really understand what you are trying to do without your html. However, you can try out the following:
HTML:
<div>
<input type="submit" value="Delete Selected" id ="DeleteButton" name="DeleteButton" onclick="deleteRecordsDialog();"/>
<input type="button" id ="DeleteButtonSubmit" name="DeleteButtonSubmit" style="display:none;" />
</div>
Javscript:
To create button for modal:
html = html + '<div><input type="button" value="Yes, Delete Contact(s)" style="width: 160px; onclick="deleteContact();"/> <input type="button" value="Cancel" onclick="CloseDialog();"/></div>';
Function to post the delete confirmation:
function deleteContact()
{
document.getElementById('DeleteButtonSubmit').click();
}
This function will click a hidden button below the button the user initially clicked. if you setup this button correctly, the form should submit with all of the information you need.