We Keep Coding

for loop not working in JavaScript while Second Attempt

I got stuck in a very strange problem need help.
Actually i am trying to assign some value to dynamically generated input fields. So i tried the following code snippet. I mean to say in first step i only need to assign value for first 10 IDs and then again if assigning some other values to rest of IDs then it fails
JavaScript
<script type="text/javascript">
function callAssignMark() {
var rightMarkVal = $("#rightMarkVal").val();
var wrongMarkVal = $("#wrongMarkVal").val();
var initial= $("#from").val();
var last= $("#to").val();
console.log('fromWhere--'+initial);
console.log('to---'+last);
alert('Before Loop');
for (var i = initial; i <= last; i++) {
$('#rightMark_' + i ).val(rightMarkVal);
$('#wrongMark_' + i ).val(wrongMarkVal);
$('#selectData_' + i).prop('checked', 'checked');
}
$("#from").val('');
$("#to").val('');
}
</script>
The above JavaScript code working fine in first attempt means when I assign some value to initial and last variable then the loop iterates and works as expected and assign desired values to dynamically generated input fields, But now the problem is when I assign new value to initial and last variable then the loop not able to iterate any more.
And one more thing I want tell you all that all the dynamic IDs of input fields are generated correctly and I'm also getting the values which is going to be assigned to the input fields on second attempt and my HTML looks like following.
HTML
<div>
<div>
<ul>
<li>
<label>From</label>
<input name="" id="from" type="text" placeholder="from" value="" />
<label>To</label>
<input name="" id="to" type="text" placeholder="to" value="" />
<input name="rightMarkVal" id="rightMarkVal" type="text" placeholder="positive Value" value="" />
<input name="wrongMarkVal" id="wrongMarkVal" type="text" placeholder="Negative value" value="" />
<input type="button" class="btn btn-success" value="Assign Marks" onclick="callAssignMark()">
</li>
</ul>
</div>
<c:set var="counter" value="0" scope="page" />
<div>
<table>
<th>S.No</th>
<th>
<input type="checkbox" id="selectAllCheckBox">
</th>
<th>Right Marks</th>
<th>Wrong Marks</th>
<tbody>
<c:forEach var="list" items="${List}" varStatus="loop">
<tr>
<td>
<c:out value="${counter = counter+1 }" />
</td>
<td>
<form:checkbox path="qId" id="selectData_${counter}" value="${list.id}">
</form:checkbox>
</td>
<td>
<form:input path="rightMark" id="rightMark_${counter}" value="" />
</td>
<td>
<form:input path="wrongMark" id="wrongMark_${counter}" value="" />
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
I am unable to find out where is the problem so please help me.
Any help will be appreciated. Thanks

Sortable List Items As Form Elements

I am trying to make a list editing page, so far, I am just printing list values from a database into <li> elements, and I also made the list sortable. Ideally what I want is to also be able to double click the list items to edit. The first problem I'm facing is submitting the <li> items in $_POST format in order. I tried using serialize but that only gives the order the values are in, not the values themselves. I also tried using hidden inputs before each <li>, but again the sorting problem happens. This is my code so far:
HTML / PHP:
echo('<div class="jumbotron">
<form id="formOne" action="editListTest.php" method="get">
<input type="hidden" value="'.$dbname.'" name="dbname"></input>
<p>Title</p>
<input style="text-align:center; width: 90%" class="form-control input-md" type="text" name="title" value="'.$listname.'">
<pstyle="padding-top:10px">Items</p>
<input type="hidden" name="listitems" id="listitems" value="">
<ol id="sortable" class="rankings">');
$stmt2 = $mysqli2->prepare("SELECT listitems FROM {$dbname}");
$stmt2->execute();
$stmt2->bind_result($item);
$number = 0;
while ($stmt2->fetch()) {
$number += 1;
echo('<li class="notep" id="notep_'.$number.'"">'.$item.'</li>');
}
?>
</ol>
</input>
<p>
</br>
<input type="button" <?php if ($_SESSION) {echo('class="btn btn-primary" ');}else{echo('class="btn btn-primary" disabled="disabled" ');} ?>type="submit" id="more_fields" onclick="add_fields();" style="font-size:28; max-height:34px; line-height:34px; padding-top:0px; width:34px; padding-left:9px" value="+" />
<input type="hidden" value="<?php echo($private)?>" name="oldprivate" id="oldprivate"/>
<input type="button" <?php if ($_SESSION) {echo('class="btn btn-primary" ');}else{echo('class="btn btn-primary" disabled="disabled" ');} ?>type="submit" id="less_fields" onclick="remove_fields();" style="font-size:28; max-height:34px; line-height:34px; padding-top:0px; width:34px; padding-left:7px" value="-" />
<button <?php if ($_SESSION) {echo('class="btn btn-primary" ');}else{echo('class="btn btn-primary" disabled="disabled" ');} ?>type="submit">Submit Edits</button>
</p>
<p>
Keep This List <?php echo($privateString) ?> : <input style="vertical-align:1px" type="checkbox" name="keepprivate" value="1" checked>
</p>
</form>
Javascript/Jquery:
$('#formOne').submit(function(){
var cerial = $( "#sortable" ).sortable( "serialize");
$('#listitems').val(cerial);
HTML Output (The ListItems are draggable right now, but I cant send them as an array in the order they are in after ing been dragged):
If anyone has any ideas that would be great, also if you have any ideas about double clicking to edit <li> items, that would be great. I have tried using jQuery to switch class and contenteditable but I've sort of hit a dead end with that. Also, just so you know: editListTest.php is the page this code is on, so it's just submitting to itself for now, but it will be submitting to a processing PHP page that will insert edits into a MYSQL database.
Any help is greatly appreciated,
Thank You

Input fields get (readonly) after hit submit button

I have a script which is coded in PHP and smarty and I want to make some changes in this script like in user profile setting when a user click on profile setting and fill the profile data like (full name , email , bank account number , bank name , branch code , tile etc) after fill this information and click the save button the script save all setting but I want to make some of form input fields (readonly) after user submitted his/her data I want make this data (readonly) (bank name , account number , branch code , title) I mean about readonly that after user fill this and save it in profile its show to user (readonly) user can't change it only I can change it from database .
Below is the form code
<form id="settingsform" onsubmit="return submitform(this.id);">
<input type="hidden" name="a" value="submit" />
Bank Name:
</td>
<td><input type="text" name="bank" id="bank" value="{$user_info.bank}"></td>
</tr>
<tr>
<td align="right" width="50%">
Bank Account Number:
</td>
<td><input type="text" name="baccount" id="baccount" value="{$user_info.baccount}"></td>
</tr>
<tr>
<td align="right" width="50%">
Bank Account Title:
</td>
<td><input type="text" name="btitle" id="btitle" value="{$user_info.btitle}"></td>
</tr>
<tr>
<td align="right" width="50%">
Bank Branch Code:
</td>
<td><input type="text" name="bcode" id="bcode" value="{$user_info.bcode}"></td>
</tr>
<input type="submit" name="btn" value="{$lang.txt.send}" class="orange" />
also i am already trying like this below
<script>
function hide(){
document.getElementById("bank").disabled = true;
document.getElementById("baccount").disabled = true;
document.getElementById("btitle").disabled = true;
document.getElementById("bcode").disabled = true;
}
</script>
and
<input type="button" onClick="hide()" value="save">

<input type="text" name="country" value="Norway" readonly>
http://www.w3schools.com/tags/att_input_readonly.asp
Then simply do a check if the POST/GET is set for the field you want to have readonly on ->
<input type="text" name="country" value="Norway" <?php isset($_POST['country']) ? echo 'readonly' : ''; ?> >
UPDATE
<input type="text" name="country" value="Norway" <?php isset($user_info.bank) ? echo 'readonly' : ''; ?> >
Just replace the variable inside of the isset() with the variable of the field, depending on how you initialize the variables you might need to use
empty()
instead, to do so just simply replace isset() with !empty()
The reason for the ! sign is to tell the code to execute the first bit (the echo part) if the variable ISN'T empty
UPDATE 2
<input type="text" name="country" value="Norway" {if isset($user_info.bank) } readonly {/if} >
Above code should work with smarty how ever, the idea is simple, simply have a "if" sentence that checks whether the variable is set/have data, and if it does, then echo 'readonly' in the input field

Try to use attr() in submitform() like,
function submitform(id){
....
....
$('#bank,#baccount').attr('readonly','readonly');
return false;
}
Updated,
function hide(){
$("#bank,#baccount,#btitle,#bcode").prop('disabled', true);
}
Or try,
function hide(){
$("#bank,#baccount,#btitle,#bcode").attr('disabled', 'disabled');
}

JavaScript validation-- onClick

I have the following piece of code which deletes a document when the delete image is clicked
<tr> To replace the document, you will need to first delete the current one.
<form name="delete_attachment_form" action="apr_attachment.cfc?method=delete_apr_attachment" method="post">
<input type="hidden" name="apr_attachment_id" value="#apr_attachment_id#">
<input type="hidden" name="apr_section_id" value="#apr_section_id#">
<input type="hidden" name="submit_mode" value="DELETE">
<input type="image" name="submit" src="images/delete.gif" alt="DELETE">
</form>
</tr>
Now I want to modify this and change the image to a button and put some basic JS validation so that it asks a confirmation message before deleting.
I have this as my code so far
<tr> To replace the document, you will need to first delete the current one.
<form name="delete_attachment_form" action="apr_attachment.cfc?method=delete_apr_attachment" method="post">
<input type="hidden" name="apr_attachment_id" value="#apr_attachment_id#">
<input type="hidden" name="apr_section_id" value="#apr_section_id#">
<input type="hidden" name="submit_mode" value="DELETE">
<input type="button" onClick ="return confirm('Are you sure you want to delete the current project activities document')" name="submit" Value="Delete">
</form>
</tr>
But there is no change/effect in the page when I click this button, Can anyone point out whats happening here? Thanks

Add id="form" to <form>, then
<input type="button" onClick ="if(confirm('Are you sure you want to delete the current project activities document')==1){document.getElementById('form').submit();}" name="submit" Value="Delete">

That's where the rest of the JavaScript comes in... or an AJAX call to a PHP file to perform that task for you. May I give you a couple of pointers? First, give that button element and ID, say id="deleter". Then, to clean up your inline markup, add this eventListener in your <head> section:
<script>
var d = document.getElementById('deleter');
var f = document.getElementByName('delete_attachment_form');
d.onClick = function() {
var yn = confirm('Are you sure you want to delete the current project activities document?');
// Note that the 'confirm' dialog is an obsolete construct
if (yn) {
f.submit();
}
};
</script>
HTML Markup
<tr>To replace the document, you will need to first delete the current one.
<form name="delete_attachment_form" action="apr_attachment.cfc?method=delete_apr_attachment" method="post">
<input type="hidden" name="apr_attachment_id" value="#apr_attachment_id#">
<input type="hidden" name="apr_section_id" value="#apr_section_id#">
<input type="hidden" name="submit_mode" value="DELETE">
<input type="button" id="deleter" name="deleter" Value="Delete">
</form>
</tr>

Selecting a checkbox in html table containing handlebar, expressjs

I have a html table in a form in which the rows of table are populated using handebars. I want to select some rows of the table using checkbox. The form makes a post request. I am using express.js framework for the same. The requiremment is that when the form is submitted the json should have a field named 'checked' which should have value true or 1 if the row was selected. Please help me in solving the issue.
Following is the snippet of the html
<form id='form1'>
<table border="1">
{{#each ElectrnicsResults}}
<tr>
<td>{{Product}}</td>
<td>{{Description}}</td>
<td>{{price}}</td>
<td>{{quantity}}</td>
<td>
<input type='checkbox' id="check">
</td>
<td style="display:none">
<input type="hidden" name="electronicsId" value="{{electronicsId}}" />
<input type="hidden" name="Product" value="{{Product}}" />
<input type="hidden" name="Description" value="{{Description}}" />
<input type="hidden" name="price" value="{{price}}" />
<input type="hidden" name="quantity" value="{{quantity}}" />
</td>
</tr>
{{/each}}
</table>
<input type="submit" value="submit" >
</form>
Following is the javascript code using JQuery
$(document).ready(function () {
$('#form1').submit(function() {
$.ajax({
url: '/submitValues',
type: 'post',
dataType: 'json',
data: $('#form1').serialize(),
success: function() {
alert("Submitted!"); // for testing
}
});
return false;
});
});

Since the form is created dynamically, you'll have to parse the results dynamically as well.
First, you'll want to attach a name field to each input type=checkbox element. This name needs to be unique to each ElectrnicsResults (perhaps something like the ID field).
Then, in your backend code when parsing the form details, you'll can again loop through each relevant ElectrnicsResults and check the req.body.{UNIQUE_NAME_FIELD_VALUE} for each checkbox, and act accordingly.