Develop Reference

How to capture the input element using foreach

I am trying to send records of my table as form using javascript. I have tried using method below.
I know my foreach function is not capturing the tag. How do I solve it so i can send to php and receive as POST['SHOWTITLE']
<tbody>
<tr id="0">
<td class="d-none">
<input type="text" class="form-control transparent-input" name="1" value="1">
</td>
<td>
<input type="text" class="form-control transparent-input" name="SHOWTITLE" value="The Accidental Astronauts" disabled="">
</td>
</tr>
<tr>
<td>
<button onclick="submitRowAsForm(0)" id="btnRoom" class="btn btn-outline-success">Room</button>
</td>
</tr>
</tbody>
function submitRowAsForm(id) {
form=document.createElement('form');
form.method='POST';
form.action='orderTicket.php';
$("#"+id+" td").children().each(function() {
$(this).clone().appendTo(form);
});
document.body.appendChild(form);
form.submit();
}

You could iterate all input tags like this:
function submitRowAsForm(id) {
form=document.createElement('form');
form.method='POST';
form.action='orderTicket.php';
$("tbody input[type=text]").each(function() {
$(this).clone().appendTo(form);
});
document.body.appendChild(form);
form.submit();
}

Please try this i.e. remove disabled="" to readonly. If an element is disabled, its value is not sent to the server. So, the correct code is as below:
<tbody>
<tr id="0">
<td class="d-none">
<input type="text" class="form-control transparent-input" name="1" value="1">
</td>
<td>
<input type="text" class="form-control transparent-input" name="SHOWTITLE" value="The Accidental Astronauts" readonly>
</td>
</tr>
<td>
<button onclick="submitRowAsForm(0)" id="btnRoom" class="btn btn-outline-success">Room</button>
</td>
</tbody>
function submitRowAsForm(id) {
form=document.createElement('form');
form.method='POST';
form.action='orderTicket.php';
$("#"+id+" td").children().each(function() {
$(this).clone().appendTo(form);
});
document.body.appendChild(form);
form.submit();
}

function submitRowAsForm(id) {
form=document.createElement('form');
form.method='POST';
form.action='orderTicket.php';
$("#"+id).children().each(function() {
$(this).children().each(function(){
$(this).clone().appendTo(form);
});
});
document.body.appendChild(form);
form.submit();
}

This html is not require any javascript to submit the form and yes you need to write CSS to make those inner DIV inline that can be easily achieve using CSS flex and please keep in mind this is only for one row, you have to iterator the whole html to create another row.
<div>
<form action="orderTicket.php" method="POST">
<div>
<input type="text" class="form-control transparent-input" name="1" value="1">
</div>
<div>
<input type="text" class="form-control transparent-input" name="SHOWTITLE" value="The Accidental Astronauts" readonly>
</div>
<div>
<button type="submit" class="btn btn-outline-success">Room</button>
</div>
</form>
</div>

changing button to submit button in my javascript

I had this major failure in my codes, I forgot that buttons cant be isset() in PHP only submit buttons.
I used a next and prev buttons in my form, so they can next and prev the checked radio button.
but I need validation of form before going to the next radio button, when I tried converting the button to submit button it glitches and doesn't go to the next radio button.
help me convert these button codes to submit and arrange my javascript, been trying for the whole day I think I'm forgetting something again...
HTML
<form action="reservation_next_sample.php" method="POST">
<input type="radio" name="next[]" value="1" checked="checked">
<input type="radio" name="next[]" value="2" />
<div id="next1" class="desc">
<div class="div-details">
<h4>Event's Detail</h4>
<table>
<tr>
<td>
Street
</td>
<td>
<input type="text" name="event_street">
</td>
</tr>
<tr>
<td>
Barangay
</td>
<td>
<input type="text" name="event_brgy">
</td>
</tr>
<tr>
<td>
Town/City
</td>
<td>
<input type="text" name="event_town_city">
</td>
</tr>
<tr>
<td>
Province
</td>
<td>
<input type="text" name="event_province">
</td>
</tr>
</table>
<br>
<button type="button" onclick="dayNavigation('next');" data-role="none" class="slick-prev" aria-label="Next" tabindex="0" role="button">Next</button>
</div>
<div id="next2" class="desc" style="display: none;">
<p> inside of next 2 </p>
<button type="button" onclick="dayNavigation('prev');" data-role="none" class="slick-next" aria-label="Previous" tabindex="0" role="button">Previous</button>
<button type="button" onclick="dayNavigation('next');" data-role="none" class="slick-prev" aria-label="Next" tabindex="0" role="button">Next</button>
</div>
</form>
JAVASCRIPT
<script>
$(document).ready(function() {
$("input[name$='next[]']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#next" + test).show();
});
});
//this is in the bla bla next and previous -->
var index = 0;
dayNavigation = function(direction) {
var curr = $('input[name="next[]"]:checked');
if (direction == 'next') {
curr.next().attr("checked", "checked");
curr.next().click();
} else {
curr.prev().attr("checked", "checked");
curr.prev().click();
}
};
</script>

You can submit your form using jQuery example is given below. Don't change button to submit
$("button[type=button]").click(function(){
this.closest("form").submit();
})
Instead of selecting button like $("button[type=button]") give button id and select particular button $("#ButtonIdWillGoesHere")

html javascript chage the value of my <div> but refresh the page for 1 second and then is all null

I am try to display under my form the new value.
<form>
<h2>AES Encryption</h2>
<table>
<tr>
<td>
<label for="inputValue">Text to encrypt</label>
</td>
<td>
<input type="text" id="inputValue" size="50" name="inputValue" />
</td>
</tr>
<tr>
<td>
<label for="inputPassword">Password:</label>
</td>
<td>
<input type="text" id="inputPassword" size="50" name="inputPassword" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="Verschlüsseln" id="submitButton" onclick="encryptAES()"/>
</td>
</tr>
</table>
<div id="afterPressed" hidden="true">
<h3 id="resultTitle"></h3>
<p id="result"></p>
<br>
<h3>Code</h3>
Download
</div>
</form>
and my Script:
function encryptAES() {
var value = document.getElementById("inputValue").value;
var password = document.getElementById("inputPassword").value;
var encrypted = base64toHEX(CryptoJS.AES.encrypt(value, password));
document.getElementById("afterPressed").removeAttribute("hidden");
document.getElementById("resultTitle").innerHTML = "Result";
document.getElementById("result").innerHTML = encrypted;
}
When I click the button the code works for 1 second and then refresh the form as null
I want to show the result in the div result tag, but the page is updated and everything disappears and the code is hidden again.

Your form is submitting, so the values are displayed in the browser and then the page reloads.
You can either set the onsubmit property of the form like this:
<form onsubmit="return false;">
Or you can use an <input type="button"> or <button> instead of the <input type="submit"> that is... well, submitting the form.

Update your form tag with <form onsubmit="return false;">. This will prevent the page from getting submitted.

How to submit Multiple Form data with ng-model on single submit

Hi I want to post all form data with same model name. that is my code in this i also clone tr tag to create more form with same name classes & Model .
<tr class="row_1">
<form name="myForm1" class="sub_job">
<td><input type="text" name="quantity" ng-model="job.quantity"/></td>
<td><input type="text" name="quantity" ng-model="job.quality"/></td>
</form>
</tr>
<tr class="row_1">
<form name="myForm2" class="sub_job">
<td><input type="text" name="quantity" ng-model="job.quantity"/></td>
<td><input type="text" name="quantity" ng-model="job.quality"/></td>
</form>
</tr>
<tr class="row_1">
<form name="myForm3" class="sub_job">
<td><input type="text" name="quantity" ng-model="job.quantity"/></td>
<td><input type="text" name="quantity" ng-model="job.quality"/></td>
</form>
</tr>
</tbody>
</table>
<!-- </form> -->
<button class="btn btn-primary" ng-click="saveJob(job)" id="save_exit">Save & Exit</button>
<button class="btn btn-warning" onclick="cloneRow()" id="add_job">Add Row</button>
angular Code Like That
$scope.saveJob = function(data) {
console.log(data);
//http request goes here
}

EDIT: This structure is not good. I think you are trying to create a lot of rows and select table DOM and datas. It is not an angular way!
How to do that with angular way
You need to define an array in your controller.
$scope.jobList = [];
You need to define a push method. Your save method work with jobList array.
$scope.addEmptyJob() = function(){
var newJob = {};
$scope.jobList.push(newJob);
}
You need to define a repeating td and one submit button.
<form name="myForm_{{$index}}" class="sub_job">
<tr class="row_1" ng-repeat="job in jobList">
<td><input type="text" name="quantity" ng-model="job.quantity"/></td>
<td><input type="text" name="quantity" ng-model="job.quality"/></td>
<td>
<button class="btn btn-warning" ng-click="addEmptyJob()" id="add_job">Add New Row</button>
</td>
</tr>
<button type="submit" class="btn btn-primary" ng-click="saveJob(job)" id="save_exit">Save & Exit</button>
</form>
OLD ANSWER for single save.
You need to define every form with a button. And every form have to be unique. So you can use $index for unique. End you need to add type="submit" to buttons for form control.
<tr class="row_1" ng-repeat="job in myArray track by $index">
<form name="myForm_{{$index}}" class="sub_job">
<td><input type="text" name="quantity" ng-model="job.quantity"/></td>
<td><input type="text" name="quantity" ng-model="job.quality"/></td>
<td>
<button type="submit" class="btn btn-primary" ng-click="saveJob(job)" id="save_exit">Save & Exit</button>
<button type="submit" class="btn btn-warning" onclick="cloneRow()" id="add_job">Add Row</button>
</td>
</form>
</tr>

You can achieve this thing with array and ng-repeat rather than cloning html element.
HTML
<table><tbody>
<tr class="row_1" ng-repeat="job in jobs track by $index">
<form name="myForm" class="sub_job">
<td><input type="text" name="quantity[]" ng-model="job.quantity"/></td>
<td><input type="text" name="quantity[]" ng-model="job.quality"/></td>
</form>
</tr>
</tbody></table>
<button class="btn btn-primary" ng-click="save()" id="save_exit">Save & Exit</button>
<button class="btn btn-warning" ng-click="clone()" id="add_job">Add Row</button>
Angular Controller
// You can fetch this array of jobs from server for showing purpose
$scope.jobs = [
{
quantity: "1.0" ,
quality: "A"
},
{
quantity: "2.0" ,
quality: "B"
}
]
$scope.clone = function(){
// You can change default values for new job to appear
var empty = {
quantity: "" ,
quality: ""
};
$scope.jobs.push(empty);
}
$scope.save = function(){
// You can send this array of jobs to server for saving purpose
console.log($scope.jobs);
}

You can't have a single model for multiple input elements, because if you change value in either of the input boxes, it will overwrite it with the latest value. Assuming you start filling the form, from form1 to form3, and do a submit, the model will hold value entered in the last used input box, i.e form3.
To solve your problem you need to use a collection, array or object (preferably array) as your model.
Your controller would be something like:
var JobModel = function() {
return {
jobs: [],
addRow: function() {
var model = {
quantity: "",
quality: "",
};
this.jobs.push(model);
},
save: function() {
console.log(this.jobs);
},
submit: function(){
for(var i=0;i<this.jobs.length;i++){
doSomeHTTPRequest(this.jobs[i]);
}
}
};
};
$scope.jobModel = new JobModel();
Your HTML will be somthing like:
<button ng-click="jobModel.addRow()">
Add Job
</button>
<div ng-repeat="job in jobModel.jobs">
<input type="text" ng-model="job.quantity" placeholder="Quantity">
<input type="text" ng-model="job.quality" placeholder="Quality">
</div>
<button ng-click="jobModel.save()">
Save Jobs
</button>
To submit your form with same name you would need to iterate over the jobs array and make ajax calls for each

Passing value from jQuery Modal into last input box

I've created a modal window, containing a table with rows of input boxes and buttons:
<table class="datatable tablesort selectable paginate full" width="100%">
<tbody>
<tr id="row_1">
<td><strong><input type="text" value="120040965" id="icpcode">
<button type="button" id="btnSave" class="btn btn-primary">Insert</button></strong>
<p>GRAND VOYAGER WIPER MOTOR REAR 04-08 £35.00</p>
</td>
</tr> <tr id="row_2">
<td><strong><input type="text" value="120040966" id="icpcode">
<button type="button" id="btnSave" class="btn btn-primary">Insert</button></strong>
<p>CHRYSLER GRAND VOYAGER WIPER MOTOR FRONT 01-08 £30.00</p>
</td>
</tr> <tr id="row_3">
<td><strong><input type="text" value="120040964" id="icpcode">
<button type="button" id="btnSave" class="btn btn-primary">Insert</button></strong>
<p>CHRYSLER GRAND VOYAGER MK2 01-08 2.8 CRD GEARBOX AUTOMATIC £500.00</p>
</td>
</tr> <tr id="row_4">
<td><strong><input type="text" value="120040963" id="icpcode">
<button type="button" id="btnSave" class="btn btn-primary">Insert</button></strong>
<p>CHRYSLER GRAND VOYAGER MK2 STOW £80.00</p>
</td>
</tr> <tr id="row_5">
<td><strong><input type="text" value="120040962" id="icpcode">
<button type="button" id="btnSave" class="btn btn-primary">Insert</button></strong>
<p>CHRYSLER GRAND VOYAGER MK2 01-08 WISHBONE DRIVER SIDE £15.00</p>
</td>
</tr> </tbody>
</table>
I then use jQuery to insert the value of the inputbox (icpcode) into the last row of another table and close the open modal and focus on that inputbox:
$('#btnSave').click(function() {
var value = $('#icpcode').val();
$('#tablemain tbody tr:last #itemlookup').val(value);
$('#tablemain tbody tr:last #itemlookup').focus();
$('#productlookup').modal('hide');
});
My problem is that only the first button works, so I need a solution that enables the selected row's value to pass back. I have incremented the tr id, but I'm not sure what I need to do... but I'm presuming it needs something involving $.(this) and also incrementing the inputbox/button. It might be easier to do away with the button and have the row itself to have an onclick? Either way I appreciate any help!

It is because your input boxes all share the same ID and all of your buttons share the same ID. Every element on your page must have a unique ID.
<input type="text" id="input1">
<input type="text" id="input2">
<input type="text" id="input3">
This is the reason only the first button works because it's only finding one element with that ID, and it's the first button, the rest are ignored.
So, to fix the problem, you can either add btnSave as a class to your buttons, like this:
<button type="button" class="btn btn-primary btnSave">
and change your JS to:
$('.btnSave').click(function() {
// do something
});
Or you could change your ID's very slightly, like this:
<button type="button" id="btnSave1" class="btn btn-primary">
<button type="button" id="btnSave2" class="btn btn-primary">
<button type="button" id="btnSave3" class="btn btn-primary">
and your JS would be:
$('button[id^="btnSave"]').click(function() {
// do something
});

What you can do id give them all unique ids and then give them all the same class:
<button type="button" id="row 1" class="btnSave btn btn-primary">Insert</button>
<button type="button" id="row 2" class="btnSave btn btn-primary">Insert</button>
<button type="button" id="row 3" class="btnSave btn btn-primary">Insert</button>
Then use the class as reference and the id for the value;
$('.btnSave').click(function() {
var value = this.id; // this equals 'row 1' | 'row 2' | 'row 3'
// your remaining code here
});
and to get the value of the selected row's text edit, you can reference it by using the button's id to grab the value as shown below and also be ablt to create your table rows using a loop easily and fast.
<table class="datatable tablesort selectable paginate full" width="100%">
<tbody>
<tr>
<td>
<strong>
<input type="text" value="120040965" id="data_1">
<button type="button" id="1" class="btnSave btn btn-primary">Insert</button>
</strong>
<p>GRAND VOYAGER WIPER MOTOR REAR 04-08 £35.00</p>
</td>
</tr>
<tr>
<td>
<strong>
<input type="text" value="120040965" id="data_2">
<button type="button" id="2" class="btnSave btn btn-primary">Insert</button>
</strong>
<p>GRAND VOYAGER WIPER MOTOR REAR 04-08 £35.00</p>
</td>
</tr>
<tr>
<td>
<strong>
<input type="text" value="120040965" id="data_3">
<button type="button" id="3" class="btnSave btn btn-primary">Insert</button>
</strong>
<p>GRAND VOYAGER WIPER MOTOR REAR 04-08 £35.00</p>
</td>
</tr>
</tbody>
</table>
<script>
$('.btnSave').click(function() {
var row = this.id;
var value = $( '#data_' + row ).val();
alert( value );
});
</script>