Forms inside td html - javascript

My html code is:
<table><tr><td onclick="submit_form_patient();")>
<form name="select_patient" method="POST" action="./select_bed.php">
<input name="raw_data" type="hidden" value="27" />27</form>
</td></tr>
<tr><td onclick="submit_form_patient();")>
<form name="select_patient" method="POST" action="./select_bed.php">
<input name="raw_data" type="hidden" value="49" />49</form></td></tr>
My Java script is:
<script>
function submit_form_patient()
{
document.forms["select_patient"].submit();
}
</script>
My form gets submitted but if I use $_POST to retrieve the values I get 27 all the time namely the first value I never get the other values.

Yours forms have same name. You need to name them differently.
And modify js code:
<script>
function submit_form_patient(formName)
{
document.forms[formName].submit();
}
</script>
And html code need to be like this
<table>
<tr>
<td onclick="submit_form_patient('select_patient');")>
<form name="select_patient" method="POST" action="./select_bed.php">
<input name="raw_data" type="hidden" value="27" />27</form>
</td>
</tr>
<tr>
<td onclick="submit_form_patient('select_patient2');")>
<form name="select_patient2" method="POST" action="./select_bed.php">
<input name="raw_data" type="hidden" value="49" />49</form>
</td>
</tr>

The name of the forms is the same. I don't know whether the standard handles this, but browsers pick the first matching item. So it's always going to be the first.
Create only one form, and based on the click POST the right value.

When you use document.forms["select_patient"].submit();, JS will find first form/element with that name.

Try this:
<script>
function submit_form_patient()
{
document.getElementsByName("select_patient")[0].submit();
document.getElementsByName("select_patient")[1].submit();
}
</script>
you can also create a for block to be more consistent.

Related

Cannot reset readonly input text

I have an input text which i use to show results of computation:
<input type="text" id="total" readonly/>
The total gets populated inside a function on a js file as follows:
//Inside a .js file
function calculate(){
document.getElementById("total").setAttribute("value", document.getElementById("amount").value * 45);
}
and i also have a reset button which resets the form, but it doesn't reset the readonly input text:
<input type="reset" value="Reset"/>
I have tried changing the reset to button and wrote my function to disable readonly, reset then enable readonly but it doesn't work as well:
<input type="button" value="Reset" onclick="resetForm(this.form.name);"/>
//Inside .js file
function resetForm(formName){
document.getElementById("total").readonly = false;
document.forms[formName].reset();
document.getElementById("total").readonly = true;
}
Does anyone know a workaround of this case? I am new to javascript and i am doing this as a learning purpose only.
Heres the complete code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="allJsCodesHere.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1> <strong>CDs Purchase Order</strong></h1>
<form name="ex2Form" action = "">
<table>
<thead>
<tr>
<th>
Number of CDs ordered:
</th>
<td>
<input type="text" id="amount" value="0"/>
</td>
<td>
<input type="button" value="Calculate" onclick="calculate();"/>
</td>
</tr>
</thead>
<tbody>
<td colspan="3">
At the rate of AED 45 for each CD
</td>
</tbody>
<tfoot>
<tr>
<th>
Total Order:
</th>
<td>
<input type="text" id="total" readonly/>
</td>
<td>
<input type="button" value="Reset" onclick="resetForm(this.form.name);"/>
</td>
</tr>
</tfoot>
</table>
</form>
<footer>
<p>Created by Mir Adnan Siraj</p>
</footer>
</body>
</html>
The calculate function:
function calculate(){
document.getElementById("total").setAttribute("value", document.getElementById("amount").value * 45);
}
Document.forms returns a collection of all of the forms within a particular page. Writing document.forms["myForm"] will return the form with the name "myForm" from that collection. So what you need to do is this. Say for example your form name is myForm with an id of myForm.
<form id="myForm" name="myForm">
<input id="email" name="email" value="some#email.com" />
</form>
Now to access this form, you have to do this.
document.forms["myForm"].reset()
This will reset your form successfully. So to be clearly, you are doing everything perfectly just console.log and check the parameter passed. You dont need to reset all the fields manually by assigning them empty string. Thats wrong!
//Inside .js file
function resetForm(formName){ //==========> this needs to return the form name. console.log and check if its returning the formname
document.getElementById("total").readonly = false;
document.forms['formName'].reset();
document.getElementById("total").readonly = true;
}
Assuming that you have your inputs inside a form you'll need to prevent the default behavior of a form, which is to send a request to any URL you might pass and refresh the page, which you don't want, I suppose. To do this, if you are triggering your reset function by attaching a listener to the submit event on a form, you'll need to use the event and call the .preventDefault method - https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
Your function:
//Inside .js file
function resetForm(formName){
document.getElementById("total").readonly = false;
document.forms[formName].reset();
document.getElementById("total").readonly = true;
}
Try changing it to this:
//Inside .js file
function resetForm(){
const form = document.getElementById("formName");
const totalInput = document.getElementById("total");
form.reset() // Resetting form
totalInput.readOnly = false; // Making readonly false so input is editable
}
Here's a codesandbox where you can try this out
https://codesandbox.io/s/lucid-frost-4pnbz?fontsize=14&hidenavigation=1&theme=dark
Hope this helps!

Submit specific form inside foreach loop

I'm trying to submit a form like below
{foreach from=$myInfo item=list}
<tr>
<td>
<form id="formq" method="post" action="{eval var=$rootPath}/devt/index?request=getme">
<input type="text" name="taskida" value="{$list.pa_id}" >
<input type="button" onclick="addFunction();" value="Add Task">
</form></td></tr>{/foreach}
How will I submit only the pa_idwhich I click submit and not the entire list.
<script type="text/javascript">
function addFunction() {
document.getElementById('formq').submit();
}
First of all, You can assign one id to only one element. You can NOT use single ID for mutliple elements on the same page.
For example in the loop you have multiple forms after execution of loop with the same id formq. That is wrong. You have to use unique ID for each element.
So try your code in something like this:
HTML/PHP
{foreach from=$myInfo item=list}
<tr>
<td>
<form id="formq_{$list.pa_id}" post" action="{eval var=$rootPath}/devt/index?request=getme">
<input type="text" name="taskida" value="{$list.pa_id}" >
<input type="button" onclick="addFunction({$list.pa_id});" value="Add Task">
</form></td></tr>
{/foreach}
Javascript
<script type="text/javascript">
function addFunction(id) {
document.getElementById('formq'+id).submit();
}
solved it
using $list.pa_id as form id and passing it to script
<input type="button" onclick="addFunction($list.pa_id);" value="Add Task">
<script type="text/javascript">
function addFunction(id) {
document.getElementById(id).submit();

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');
}

Getting value of element with javascript from jsp page

I have the following jsp form:
<form action = "dt.jsp" METHOD = "GET" ONSUBMIT="return validateForm()">
<table>
<tr>
<td><input type=date name="fdate"/></td>
<td><input type=date name="tdate"/></td>
</tr>
</table>
<input TYPE = "SUBMIT" VALUE = "Search by date">
</form>
and javascript function:
function validateForm()
{
alert(document.getElementsByName('fdate').value);
return false;
}
when I do the alert I get undefined. why?
document.getElementsByName('fdate') returns an array, or more accurately a NodeList.
Use document.getElementsByName('fdate')[0].value
See https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByName

javascript validation empty field with error messages

Can any one please tell me the wrong of this code, I just want to j=give an error message when the first_name is empty.
<script type="text/javascript">
$(document).ready(function(){
$('#submit').click(function(){
var first_name=$('#first_name').val();
if(first_name==="" ){
$('#first_name').css('background-color','#D8D8D8');
$('#fNameErr').show();
return false;
}
else{
$('#first_name').css('background-color','#FFFFFF');
$('#fNameErr').hide();
return true;
}
});
});
</script>
HTML
<form name="myForm" action="../controller/users.php" method="POST"
enctype="multipart/form-data" >
<table align="left" width="700" height="330">
<tbody>
<tr>
<td>First Name: </td>
<td><input type="text" name="first_name" value=""size="45" id="first_name"/>
<div id="fNameErr" class="err"><b>Please Enter First Name</b></div></td>
</tr>
First of all i need to know whether you downloaded jquery file from ,if not do it first.. else jquery wont work.. follow this link http://code.jquery.com/jquery-1.11.1.min.js, save this file in the folder where is your code is...name of the file i used is 'jquery-1.11.1.min.js'
then there was some more mistakes in your code. you need to give a submit button first with the id 'submit', which you used in your script's 3rd line, then need to close form tag..
correct code is..
<html><script src="jquery-1.11.1.min.js"></script><script type="text/javascript">
$(document).ready(function(){
$('#submit').click(function(){
var first_name=$('#first_name').val();
if(first_name=="" ){
$('#first_name').css('background-color','#D8D8D8');
$('#fNameErr').show();
return false;
}
else{
$('#first_name').css('background-color','#FFFFFF');
$('#fNameErr').hide();
return true;
}
});
});
</script>
<body>
<form name="myForm" action="../controller/users.php" method="POST" enctype="multipart/form-data">
<table align="left" width="700" height="330">
<tbody>
<tr>
<td>First Name: </td>
<td><input type="text" name="first_name" value=""size="45" id="first_name"/>
<div id="fNameErr" class="err"><b>Please Enter First Name</b></div></td>
</tr>
<input type="submit" id="submit" value="submit">
</form>
</body>
</html>
try to learn basics first.. Accept my answer if it helps.. :)

Categories