Form submit in a foreach - javascript

I have a form which contains a foreach. This is my code:
<table style="direction: rtl;text-align: right;width: 1500px;font-family: tahoma;" align="center">
<thead>
<tr>
<th style="width:5%; ">#</th>
<th style="width:20%;">Name</th>
<th>Date</th>
<th>Buyer Code</th>
<th>User Code</th>
<th>Check</th>
</tr>
</thead>
<tbody>
<?php
$i=1;
foreach($Items as $Item)
{
echo '<form method="post" action="/provider/provider/checkUserCodeValidation">
<tr>
<td>'.$i.'</td>
<td>'.$Item->getUser()->getFullName().'</td>
<td>'.$Item->getCreationDate(true,'Date').'</td>
<td>'.$Item->getBuyerCode().'</td>
<td><input name="userCode" id="userCode" value=""/></td>
<td><input type="submit" name="Submit" id="submit_butt" value="Submit"/></td>
</tr>
</from>';
$i++;
}
?>
</tbody>
</table>
The output will be this:
Now what I want to do is, when user inputs an integer into UserCode and clicks submit, it checks the existence of that integer in database. I am handling the process in checkUserCodeValidation (action of the form). The problem is, if any of the fields are filled, it sends the value of userCode as null. But the last one works. What should I do to submit each one individually?
IMPORTANT!!: I tried using one button where all the table is in one form, but then the problem was that it sends an array which will be a pain in head because I have to implode it and stuff later in my function. So Please help me on this, if you have any solution via Javascript, that will be also appreciated.
Cheeeeers

You have to give a unique id to each input. So you get all values.
Other way is you make each line a form.
Ajax would be the best solution, but in this case the input type must be button instead of submit. Then you have to define the click handler, which makes the ajax call. Here is jquery doc for ajax post: http://api.jquery.com/jquery.post/
You can do it in vanilla js too: http://vanilla-js.com

yout text box id are same
so add any dynamic value to your textbox and name
like
<input name="userCode[]" id="userCode<?php $i ?>" value=""/>

Related

How to get an input from HTML page and search google sheet for the matching details and then show it on html fields

Im new to coding and i need below solution to one of my project. i'll try my best to explain. Im using google appscript.
I have a HTML file with an ID agent_email_id, when i change the email id (type in an email id) from this input, i want the rest of the input fields (like, name, emp id, supervisor name) to get updated with the data from google sheet for this specific email.
is this possible ? how should i proceed
Any help would be appreciated.
Note: i do not have any code handy, trying to automate certain audits.
<form id="myForm" onsubmit="handleFormSubmit(this)">
<table class="table table-bordered table-striped table-condensed" style="border-style: solid">
<tr>
<td class="" colspan="6">Mandatory Fields </td>
</tr>
<tr>
<th class="">Agent EMP ID</th>
<td class="text-center"><input name="agent_ID" value="agent_ID" type="hidden" class="">
<span class="">agent_ID</span></td>
<th class="">Agent Name: </th>
<td class="text-center"><span class=""></span><input name="agent_name" type="hidden" value="agent_name" class=""><span class="">agent_name</span></td>
<th class="">Agent Email ID </th>
<td class="text-center"><input name="agent_email_ID" id="a_email_id" type="text" value="" class=""></td>
</tr>
For get any information form google sheet using AppScript you have create a API with google sheet.
than you will able to fetch data with email and any other params.
But I want to tell you thats not easy for anyone without learning javascript.

How to call the two functions (one from JavaScript, one from PHP) in a form

I am very new to the coding and writing script to insert data from a form. I'd like to check the validations if those are true then data should be submitted to database.
The problem is that when the page is loaded, the data has been submitted to the database without click on submit button.
Here is my code:
<?php
include 'config.php';
?>
<html>
<head> <h1 align="center">Credit form </h1>
<script>
function GoToValidation() {
var x = document.forms["insert_form"]["name"].value;
var y = document.forms["insert_form"]["amount"].value;
if (x == null || x == "") {
alert("Name field must be filled out");
return false;
}
if (y == null || y == "") {
alert("Amount field must be filled out");
return false;
}
}
</script>
</head>
<body bgcolor="#D3D3D3">
<table>
<form name="insert_form" action="insert.php" method="post" onsubmit="GoToValidation() ">
<br>
<br>
<br>
<br>
<table align="center" width="30%" border="1" cellpadding="4" cellspacing="0" bordercolor="#ffffff">
<tr>
<td>Name</td>
<td>
<input type="text" name="name">
</td>
</tr>
<tr>
<td>Date</td>
<td>
<input type="text" name="TodayDate">
</td>
</tr>
<tr>
<td>Amount</td>
<td>
<input type="text" name="amount">
</td>
</tr>
<tr>
<td></td>
<td align="right">
<input type="submit" value="submit">
</td>
</tr>
</form>
<?php
$qinsert = "INSERT INTO finance (name,date,amt,status)
VALUES('$_POST[name]','$_POST[TodayDate]','$_POST[amount]','P')";
if (!mysqli_query($con, $qinsert)) {
die('Error: ' . mysqli_error($con));
}
?>
<script>alert ("1 record added") </script>
<?php
mysqli_close($con);
?>
</body>
</html>
You're mixing up some things. Remember you're doing client side (browser) validation with your JavaScript code and server side processing with your PHP code.
It's best practice to separate the processing part in kind of "controller file" which does the database stuff and then redirects to or includes a result rendering file. Even better: Try to get familiar with some MVC pattern basics to get a better understanding how and why this is essential for minimal separation of concerns.
Anyway, to solve this problem using your single file approach, you need at least to check if your HTML form was successfully validated and submitted. This can be for example achieved by checking on the submit buttons value transferred with a successful POST request:
if ($_POST[ "submit" ]) {
// Your database insert statement
}
Be aware (again) that the line <script>alert ("1 record added") </script> is currently processed every time you call that page. Either you generate a status message on the server site and include it in your HTML rendering or you put your JavaScript statement within a PHP if-statement to generate JavaScript code conditionally (which isn't good practice at all!):
if (mysqli_query($con, $qinsert)) {
echo '<script>alert ("1 record added")</script'; // Better don't do that!
}
While this will probably work, you probably won't get happy with it in the long run. Again, please try to get familiar with some common design patterns. Get an idea of MVC patterns and frameworks for PHP as well as the transforming role of JavaScript these days and how it is best used on client side. Stuff like that one you posted is so very "nineties".
The problem is that your PHP script that executes the INSERT query is being executed right when you load the page, as there is nothing stopping it.
I think the easiest solution, also to help you learn the difference between client-side and server-side, is to create a separate page for your PHP. Then call this page on the <form action="PHP_PAGE" property. Then you'll see that the INSERT is only executed on form submit.
just check one condition before insert query that if $_post('submit'){your insert code..}
alert ("1 record added")
put <form onsubmit="return GoToValidation();"> in your form tag...
You can also use the HTML5 Required function in your input. You won't need the validation script anymore since you will get a notice from the required function.
<tr><td>Name</td> <td><input type="text" name="name" required="required"></td></tr>
<tr><td>Date </td> <td><input type="text" name="TodayDate"></td></tr>
<tr><td>Amount</td> <td> <input type="text" name="amount" required="required"></td></tr>

Validation of visible text field in ruby on rails

I have some hidden text fields in my table which become visible one by one when I click the add button. I want to validate(in rails) only those rows which are visible.
<div class="info_type">
Internet<hr>
<table id="email_add">
<tr id="email_1">
<th><%= f.label(:email1,"Email :") %></th>
<td><input id="contact_email1" type="text" name="contact[email1]"></input>
</td>
</tr>
<tr id="email_2">
<th><%= f.label(:email2,"Email 2:") %></th>
<td><input id="contact_email2" type="text" name="contact[email2]"></input>
</td>
</tr>
<tr id="email_3">
<th><%= f.label(:email3,"Email 3:") %></th>
<td><input id="contact_email3" type="text" name="contact[email3]"></input>
</td>
</tr>
</table>
<input type="button" id="add_email" value="Add Email"/>
<input type="button" id="delete_email" value="Delete Email"/>
</div>
I hide rows email_2 and email_3 using jquery and display when add is clicked.
Is there any method of checking the text field visibility while using validates email tag or will I have to do it in jquery only??
Send a list of the hidden fields to the request then in the create method you can remove the fields you do not want to save from the params before you save.
To determine the hidden fields use JQuery's $("#contact_email1").is(":visible")
Then in the controller before saving remove the hidden elements variables using params[:info].delete :email1 or params.delete :email1 depending where it is located.
So, just create a list using some logic to keep track of the hidden elements, possibly by just using an int. Then iterate over that list and remove them from the params.

Where do you put the form element if you have editable rows of a table in AngularJS?

We have a table(A) and we want a specific row to become editable on click. Currently we have a directive that inserts a new table into the td of table(A) where it is called. We do this so we can use the <form> element around the table.
uneditable-table.html
<table>
<tbody>
<tr>
<td ng-show="editing" class="editing" colspan="2">
<div edit-form-directive
model="thing"
on-success="thingUpdated(thing); editing=false;"
on-cancel="editing=false; setUpdating(false);"
enabled="editing" />
</td>
</tr>
</tbody>
</table>
edit-template.html inserted via the editFormDirective
<form ng-submit="save(thingCopy)" name="EditForm">
<table>
<tbody>
<tr>
<td>
<input ng-model="thing.field1"/>
</td>
<td>
<input ng-model="thing.field2"/>
</td>
</tr>
</tbody>
<table>
</form>
Question:
We have tried putting the <form> element around each row to be editable, and this works, however, this is not semantically correct with the <form> around a <tr> within a table.
We also considered putting the <form> around the entire table in uneditable-table.html. This causes a form validation issue, where we may have many errors per non-unique form node, so we would have to index the nodes to get specific errors.
We settled on the code as it is here, with having the <form> element around a whole new table (in edit-template.html) and inserting that into a <td>, as this seemed the least harmful.
We do have to have the form tag so we can access validation based on the form name and nodes.
Is there a more Angular (or elegant) way to do this?
Thank you!
Angular way. Form tag isn't needed:
<table ng-form="EditForm">
...
</table>
http://docs.angularjs.org/api/ng.directive:ngForm

How to show the form on click of a button?

I am facing a problem. I have created a form where a user has to input the details about a candidate and also upload his/her image. The problem is that in the form there is a button that says "Click To Add More Candidate", so when this button is clicked the same form should reappear under a division called "moreCandidates". Now to achieve this how should I go about it? Things that are coming in my mind is as follows:
To create a function in javascript that exactly creates the form contents (ie. all the input fields,etc) and onclick of the button "Click To Add More Candidate", call the function under the mentioned division. I can do this as in the past I have done something very similar to this. However, this time I don't think it would be good idea to create the whole form again as I have written a PHP function in between to read a directory.
Or the second thought that I have is to have the form code written in a file called candidate.php and call that file with AJAX. The problem here could be that I might be calling the whole form again (whereas I just want to call the contents of the form like the candidate name, and other stuff)
I very confused at the moment, and help from you all would be greatly appreciated. Thanks in advance.
My html code:
<div id="candidateForm">
<table border="0">
<form method="post" action="formDetails.php" enctype="multipart/form-date">
<tr>
<td>Candidate Name:</td>
<td><input class="candidateForm" type="textbox" name="candidateName" placeholder="Candidate's Name"/></td>
</tr>
<tr>
<td>Enroll No:</td>
<td><input class="candidateForm" type="textbox" name="enrollNumber" placeholder="Enroll No"/></td>
</tr>
<tr>
<td>Candidate Image:</td>
<td><input class="candidateForm" type="file" name="candidateImage" placeholder="Select a Image"/></td>
</tr>
<tr>
<td>Cadidate Post:</td>
<?php
//This is the target folder that is going to be read.
$target="uploads/";
//I an using a directory function in PHP scandir() which scans tha contains of the give directory
$dir=scandir($target);
?>
<td>
<select name="candidatePost">
<option value="candidatePost" select="selected">---------Select---------</option>
<?php
foreach($dir as $folders)
{
//When we loop throung the target folder/directory we get this annoying two folder that is "." and ".." so just to rule then out i m using an IF condition
if($folders!="."&& $folders!="..")
//echo $folders;
echo "<option class='candidateForm' value=$folders>$folders</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td>About The Candidate:</td>
<td><textarea name="aboutCandidate" cols="40" rows="5"></textarea></td>
</tr>
<div id="moreCandidates"> </div>
<tr>
<td></td>
<td><input type="button" value="Click To Add More Candidate"></input> </td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="candidateFormSubmit" value="Press Here To Submit The Details" onclick=""/></td>
</tr>
</form>
</table>
</div>

Categories