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>

how to list the selected options and remove the selected options by using jQuery?

Below is my HTML code and i have to add jquery for this how to do?
<div class="container">
<div class="row one">
<h4>Staff Re-Admission</h4>
</div><br>
<div class="row">
<p>Academic Year</p>
<select>
<option>2010/2011</option>
<option>2010/2011</option>
<option>2010/2011</option>
</select>
</div><br>
<div class="row">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table" style="width: 100%;">
<tbody>
<tr>
<td style="width: 250px"><p>Staff List</p></td>
<td></td>
<td><p>Continue</p></td>
<td><p>Discontinue</p></td>
</tr>
<tr>
<td><select size="14" class="Staff" multiple="multiple">
<option value="SJB2017NT021">SJB2017NT021--Vishu</option>
<option value="SJB2017NT022">SJB2017NT022--Naveen</option>
<option value="SJB2017NT023">SJB2017NT023--Uday</option>
<option value="SJB2017NT024">SJB2017NT024--Mohan</option>
<option value="SJB2017TS019">SJB2017TS019--Thejaswini</option>
<option value="SJB2017TS020">SJB2017TS020--Prasad</option>
</select></td>
<td>
<button type="submit" value="" id="Continue">Continue >>
</button><br><br>
<button type="submit" value="" id="Discontinue">Discontinue >>
</button><br><br>
<button type="submit" value="" id="Back">Back To List
<<</button>
</td>
<td><select size="14" multiple="multiple" class="Staff" ></select>
</td>
<td><select size="14" multiple="multiple" class="Staff" ></select>
</td>
<tr>
<td><button type="submit">submit</button>
<button type="submit">submit</button>
</td>
</tr>
</tr>
</tbody>
</table>
</div><!--end of .table-responsive-->
</div>
</div>
</div>
</div>
</div>
when i selcet the option and click on continue it has to be listed in continue box and same if i select discontinue then in discontinue box and if i select back entire thing has to come back how to do this please help me out.

just change the id of another two select with continue and discontinue
<td>
<select size="14" multiple="multiple" class="continue" ></select>
</td>
<td>
<select size="14" multiple="multiple" class="discontinue" ></select>
</td>
Here is jquery for add to continue and discontinue.
<script>
$("#Continue").on("click", function(){
var cont = $(".Staff").val();
$(".continue").append($(".Staff option:selected"));
$(".Staff option:selected").remove();
return false;
});
$("#Discontinue").on("click", function(){
var cont = $(".Staff").val();
$(".discontinue").append($(".Staff option:selected"));
$(".Staff option:selected").remove();
return false;
});
</script>

Make 2 methods for each button and on click of each move item to particular box...
on back button click take all items from both the box (Continue and Discontinue) and add them to <select> back..
also clear both boxes...

I do have a form wherein if a user enters input it should check for negative or empty input box and throw an alert message

Here is my code below. I do have a form wherein consists of three dropdowns and input boxes.So I do want to check whether a field is blank or for negative numbers being entered?
//Dependant dropdown code
$("#item").change(function() {
var iname = $(this).val();
$.post("fetch_data.php",
{"iname": iname},
function (data) {
document.getElementById('new_select').innerHTML=data;
});
});
$('#submitBtn').click(function(){
var txt = $(".check").val();
if(parseInt(txt) < 0 || txt == -1){
alert("Enter positive values ..!!!!");
}else{
$('#sess').text($('#sesion').val());
$('#ite').text($('#item').val());
$('#new').text($('#new_select').val());
$('#qin').text($('#qtyin').val());
$('#qout').text($('#qtyout').val());
}
});
$('#submit').click(function(){
$.ajax({
type:"POST",
url:'profile.php',
data:{sesion:$("#sess").text(),iname:$("#ite").text(),price:$("#new").text(),category:$("#qin").text(),qty:$("#qout").text()},
success: function(data){
$("#confirm-submit").modal("hide");
$("#result").html("<div class='alert alert-warning'>Record Inserted Successfully</div>");
setTimeout(function(){
$("#result").fadeOut();
},5000);
window.location.reload();
}
});
});
});
<form method='post' name='ireg' class="form-inline" role="form" id="formfield" enctype="multipart/form-data" onsubmit="return validateForm();">
<table id="entry" class="table table-responsive">
<tr>
<td> <label for="sesion">Session</label></td>
<td><select id="sesion" name="sesion" class="form-control check">
<option>--Select--</option>
<option>Breakfast</option>
<option>Lunch</option>
<option>Dinner</option>
</select></td>
<td> <label for="item_name">Item Name</label></td>
<td><select name="iname" id="item" class="form-control check" style="width:180px;">
<option>Select Item</option>
<?php
include 'db.php';
$select = $conn->query("SELECT item_name from items");
while($row = mysqli_fetch_array($select, MYSQLI_ASSOC))
{
echo "<option>".$row['item_name']."</option>";
}
?>
</select>
</td>
<td>
<label for="new_select">Price</label>
</td>
<td>
<select id="new_select" name="new_select" class="form-control check">
<option>Select Price</option>
</select>
</td>
<td>
<label for="qtyin">Qty(Dine In)</label>
</td>
<td>
<input type="number" id="qtyin" min="0" name="qtyin" class="check" placeholder="QTY Dine In" style="width:80px;"/>
</td>
<td>
<label for="qtyout">Qty(Parcel)</label>
</td>
<td>
<input type="number" id="qtyout" name="qtyout" min="0" class="check" placeholder="QTY Dine Out" style="width:80px;"/>
</td>
<td>
<!-- <button type="submit" name="submit" class="btn btn-primary">Submit</button> -->
<input type="button" name="submit" value="Submit" id="submitBtn" data-toggle="modal"
data-target="#confirm-submit" class="btn btn-success" />
</td>
</tr>
</table>
</form>
I am trying to take input from user where validation is needed and once it is validated goes to modal popup to confirm then submit process..

If HTML5 validation is supported, you do not need jQuery for validation.
<input type=number min=0 required placeholder='Enter a positive number'>
If you want a custom validation message, the following should do:
<input type=number min=0 required placeholder="Enter a positive number"
oninvalid="this.setCustomValidity('Enter User Name Here')"
oninput="setCustomValidity('')">
The :invalid psuedo class can be used to apply custom CSS to it.
This link contains some examples. For browser support see caniuse.
EDIT:
For dropdowns, you may use the required attribute.
<select required>
<option value="">None</option>
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
</select>
Note that the first option has to be blank. For details on applying required to <select> see this question.

JavaScript working in IE8 and 9 but not in Chrome

I have this javascript to see if the drop-down is selected. If not an error message is displayed. The problem is that the code works in IE9 and 8, but not in Chrome.
The simple solution to this is to add the "required" attribute to the tag, but I want to know the reason that code isn't working.
<form name="form1" action="insert.php" method="post" onsubmit="return validateForm()">
<table name="table1">
<tr>
<td>
<select name="fruits">
<option selected disabled>Please Select</option>
<option value="banana>banana</option>
<option value="apple>apple</option>
</select>
</td>
</tr>
</table>
<input type="submit" value="Submit"/>
</form>
<script type="text/javascript">
function validateForm()
{
var x=document.forms["form1"]["fruits"].value;
if (x==null || x=="")
{
alert("Please Select Fruit");
return false;
}
}
</script>

please review this code,required is the html5 attribute and by default check for empty values
<form name="form1" action="insert.php" method="post" onSubmit="return validateForm()">
<table name="table1">
<tr>
<td>
<select name="fruits">
<option value=" " disabled>Please Select</option>
<option value="banana">banana</option>
<option value="apple">apple</option>
</select>
</td>
</tr>
</table>
<input type="submit" value="Submit" />
</form>
<script>
function validateForm() {
var x = document.forms["form1"]["fruits"].value;
if (x == null || x == " ") {
alert("Please Select Fruit");
return false;
}
}
</script>
Demo here: http://jsfiddle.net/2zgGM/

Help with javascript onchange and showing/hiding table content

I'd like to show / hide a div within a td tag based on the select value chosen. I cannot get the label text to appear, only the textbox. Can someone please give me a hand with this?
Here is my code so far
<script>
function toggleOther(chosen){
if (chosen == 'oth') {
document.myform.other.style.visibility = 'visible';
} else {
document.myform.other.style.visibility = 'hidden';
document.myform.other.value = '';
}
}
</script>
<form name="myform">
<tr>
<td>
<select name="values" size="1" onchange="toggleOther( document.myform.values.options[ document.myform.values.selectedIndex ].value );">
<option value=" " selected="selected"> </option>
<option value="name">Name</option>
<option value="age">Age</option>
<option value="oth">Other</option>
</select>
</td>
<td>
<div style="visibility:hidden">
<label>adfdasfgsfg</label>
<input type="text" name="other" value="" size="25" />
</div>
</td>
</tr>
</form>

Give the element an id:
<div id="Other" style="visibility:hidden">
Now you can easily access it in the code:
document.getElementById('Other').style.visibility = 'visible';
Edit:
Here's the code with the changes, tested and working:
<script>
function toggleOther(chosen){
if (chosen == 'oth') {
document.getElementById('Other').style.visibility = 'visible';
} else {
document.getElementById('Other').style.visibility = 'hidden';
document.myform.other.value = '';
}
}
</script>
<form name="myform">
<tr>
<td>
<select name="values" size="1" onchange="toggleOther( document.myform.values.options[
document.myform.values.selectedIndex ].value );">
<option value=" " selected="selected"> </option>
<option value="name">Name</option>
<option value="age">Age</option>
<option value="oth">Other</option>
</select>
</td>
<td>
<div id="Other" style="visibility:hidden">
<label>adfdasfgsfg</label>
<input type="text" name="other" value="" size="25" />
</div>
</td>
</tr>
</form>

The problem is that you have set visibility on your containing <div> to hidden but your javascript is only showing your input. (document.myform.other.style.visibility)
To make it work, simply give your <div> an id and show and hide that instead:
// ... snip ...
function toggleOther(chosen){
var piece_to_hide = document.getElementById("otherValues");
if (chosen == 'oth') {
piece_to_hide.style.display = 'block';
} else {
piece_to_hide.style.display = 'none';
document.myform.other.value = '';
}
}
// ... snip ...
<div id="otherValues" style="display:none">
<label>adfdasfgsfg</label>
<input type="text" name="other" value="" size="25" />
</div>