i need to get my input value using JavaScript but i get undefined only. Here is my code:
document.forms[0].elements[0] or
document.forms['form_id']['fieldname']
Where is my mistake?
Here is my form:
<form action="registrationHandler.php" onsubmit="return validateRegistrationForm()" method="post" name="reg_form" enctype="multipart/form-data" id="reg-form">
<div>
<label for="username">Username</label>
<input type="text" name="username" required="">
</div>
<div>
<label for="password">Password</label>
<input type="password" name="password" required="">
</div>
<div>
<label for="email">E-mail</label>
<input type="text" name="email">
</div>
<div>
<label for="telephone">Telephone</label>
<input type="text" name="telephone">
</div>
<div>
<label for="sex">Sex</label>
<input type="radio" value="male" name="sex">Male
<input type="radio" value="female" name="sex">Female
</div>
<div>
<label for="user_photo">User photo</label>
<input type="file" name="user_photo">
</div>
<div>
<label for="birthDate">Birth Date</label>
<input type="date" name="birthDate">
</div>
<div>
<label for="country">Country</label>
<input type="text" name="country">
</div>
<div>
<label for="info">Info about user</label>
<textarea name="info"></textarea>
</div>
<div>
<input type="hidden" name="PHPSESSID" value="<?php echo session_id(); ?>">
</div>
<div><input type="submit" value="Register"></div>
</form>
Form lies in php file, maybe problem in that? Because when i console log forms.length i get zero...
You need to put these DOM object accessing codes into the window.onload event handler,because it need to wait the document loaded before accessing the DOM objects.
Can you try for example:
document.forms['reg-form']['email'].value
I think you might not are not targeting the right Dom-element with
document.forms['form_id']['fieldname']
Please look at this jsfiddle-Sample:
http://jsfiddle.net/3gevoyn5/8/
I have two input fields and get the Values with this code, which is then output again:
function getValues(){
var test = document.forms['myform']['firstname'].value + " " + document.forms['myform']['lastname'].value;
document.getElementById("demo").innerHTML = test;
}
Related
How is a mathematical operation performed in PHP with values received from "number1" and "number2" The result is shown in "result" ?
<div class="row">
<form class="form " action="" method="post" enctype="multipart/form-data">
<form class="form1">
<div class="form-group text-right font-12">
<label for="number">number 1</label>
<input type="number" name="number1" value="" class="form-control" placeholder="number1">
</div>
</form>
<form class="form1">
<div class="form-group text-right font-12">
<label for="number">number 2</label>
<input type="number" name="number2" value="" class="form-control" placeholder="number2">
</div>
</form>
<form class="form1">
<div class="form-group text-right font-12">
<label for="number">The result here</label>
<input type="number" value="" class="form-control" disabled="disabled">
</div>
</form>
<button class="btn btn-info font-12 " type="submit" name="save" value="Show Result">save</button>
</form>
</div>
First of all you don't need nested forms to make the UI.
I will write a simple example that you can change to match your UI needs.
<?php
$a = $_GET['number1'];
$b = $_GET['number2'];
$result = NULL;
if (isset($a) && isset($b)) {
$result = $a + $b;
}
?>
<form action="?" method="GET">
<input name="number1" value="" />
<input name="number2" value="" />
<input value="<?= $result ?>" disabled />
<button type="submit">Show Result</button>
</form>
Can you be more specific next time? I think your question is about how to handle such a form in PHP. Just first read some tutorials about it. A great website is w3schools.com. Here is one about form handling: https://www.w3schools.com/php/php_forms.asp
First, the reason why I have three forms on one page is for layout purposes. I have three input boxes going across one line and then another under it and so on. If I place them under one form tag, I get bad looking input boxes that goes from top to bottom. I have tried some solutions but they have not worked. Each line would put 3 three entries instead of one and some data would not show up or only one form would show up in the database.
HTML
<form class="form-inline" id="Test1" method="POST">
<div class="form-group">
<label>Name: <input name="FN" type="text" class="form-control" id="" value=""> </label> </div> </form>
<form class="form-inline" id="Test2" method="POST">
<div class="form-group">
<label>Name: <input name="LN" type="text" class="form-control" id="" value=""> </label> </div> </form>
<form class="form-inline" id="Test3" method="POST">
<div class="form-group">
<label>Name: <input name="EM" type="text" class="form-control" id="" value=""> </label> </div> </form>
<div class="form-group"><br>
<div class="col-sm-offset-2"> <button type="button" class="SB btn btn-default">Book Now</button> </div>
<script>
$(document).on('click','.SB',function(e) {
formData = $('#Test1, #Test2', '#Test3').serialize();
$.post(
'Process.php', formData
);
});
I only get the first form with this and the other two are blank but are on a single line. All inputs are unique. I have also tried the docbyid and it would add three lines but not work correctly. Any Help would be great.
PHP:
require('DBCon.php');
$statement = $link->prepare("INSERT INTO Database (FN, LN, EM) VALUES( :CFN, :CLN, :CE)");
$ClientFN = $_POST['FN'];
$ClientLN = $_POST['LN'];
$ClientEmail = $_POST['EM'];
$statement->execute(array(
":CFN" => "$ClientFN",
":CLN" => "$ClientLN",
":CE" => "$ClientEmail"));
$statement = null;
$link = null;
// Echo Successful attempt
echo "<p Data added to database.</p></br></br>";
?>
Your button should call a function rather than submit the form. Submitting will only send the data from the first form.
You should really use one form and use CSS to correct any display issues, but if you were to use separate forms, the following should do what you are looking for (make sure your closing tags are in the correct place):
<form class="form-inline" id="Test1">
<div class="form-group">
<label>Name: <input name="FN" type="text" class="form-control" id="" value=""></label>
</div>
</form>
<form class="form-inline" id="Test2" method="POST">
<div class="form-group">
<label>Name: <input name="LN" type="text" class="form-control" id="" value=""> </label>
</div>
</form>
<form class="form-inline" id="Test3" method="POST">
<div class="form-group">
<label>Name: <input name="EM" type="text" class="form-control" id="" value=""> </label>
</div>
</form>
<div class="form-group">
<div class="col-sm-offset-2"> <button type="button" class="sumbitButton btn btn-default">Book Now</button>
</div>
<script>
$(document).on('click','.sumbitButton',function(e) {
formData = $('#Test1, #Test2', '#Test3').serialize();
$.post(
'Process.PHP', formData
);
});
</script>
Try this:
<form method="post" action="Process.PHP">
<div class="form-inline">
<div class="form-group">
<label>Name: <input name="FN" type="text" class="form-control" id="" value=""></label>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<label>Name: <input name="LN" type="text" class="form-control" id="" value=""> </label>
</div>
</div>
<div class="form-inline">
<div class="form-group">
<label>Name: <input name="EM" type="text" class="form-control" id="" value=""> </label>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2"> <button type="submit" class="sumbitButton btn btn-default">Book Now</button>
</div>
</form>
I am trying to update and upload image to folder using php fileupload also some contents in the text area and text field. Here is my code,problem is I am not getting any result from the database. Please help.
$id=(isset($_GET['id']))?$_GET['id']:'';
$val=view_data_event($id);
if (isset($_POST["events"])&&isset($_POST["description"]))
{
$id=$_POST["id"];
$title=$_POST["events"];
$description=$_POST["description"];
$filetmp=$_FILES["images"]["tmp_name"];
$filename=$_FILES["images"]["name"];
$filetype=$_FILES["images"]["type"];
$filepath= "photo2/".$filename;
move_uploaded_file( $filetmp,$filepath);
$data=array( $title,$description,$filename,$filepath,$id);
$update1=update_event($data);
if($update1)
{
echo "<script>location.href='hotel2_galery_event.php'</script>";
}
}
HTML
<form action="hotel2_galery_eventedit.php" method="post" class="col-sm-4">
<input type="hidden" name="id" value="">
<div class="form-group has-info">
<label class="control-label" for="inputSuccess">Event title</label>
<input type="text" class="form-control" name="events" value="">
</div>
<div class="form-group has-info">
<label>Event Description</label>
<textarea name="description" class="form-control " rows="3">
</textarea><br><br>
</div>
<div class="form-group has-info">
<label>Event Related images</label>
<input type="file" name="images">
<input type="hidden" value="">
<input type="hidden" value="">
</div>
<button type="submit" class="btn btn-primary">
<span>UPDATE</span>
</button>
</form>
Whenever you want to upload files, you must put a enctype="multipart/form-data" attribute on the form tag. Standard POST encoding cannot handle files.
I am having trouble pinpointing why my javascript code is failing to validate the form on the bottom. Any help is appreciated. I'm new and learning when in comes to javascript.
Here's the javascript:
<script type="text/javascript" language="javascript">
function validate(){
//Initialize array
var field = new Array;
var field = [document.getElementById('first_name'),document.getElementById('last_name'),document.getElementById('address'),document.getElementById('eadress'),document.getElementById('city'),document.getElementById('state'),document.getElementById('telephone'),document.getElementById('comments')];
//Error tracker
var error = 0;
//Validation Loop
for (i=0;i<field.length;i++)
{
if (field[i].value == "")
{
error++;
}
}
//If no errors are present, submit
if (error == 0)
{
document.contact-form.submit();
}
//Else, display alert
else {
alert("One or more fields are empty.");
return false;
}
}
Here's the form:
<div id="registration">
<form action="" method="post" onsubmit="return validate();" id="contact-form">
<h2>Contact Us
</h2>
<div>
<label for="first_name">First Name:</label>
<input id="first_name" name="first_name" type="text" class="required" />
</div>
<div>
<label for="last_name">Last Name:</label>
<input id="last_name" name="last_name" type="text" class="required" />
</div>
<div>
<label for="address">Address:</label>
<input id="address" name="address" type="text" />
</div>
<div>
<label for="city">City:</label>
<input id="city" name="city" type="text" />
</div>
<div >
<label for="state">State:</label>
<input id="state" name="state" type="text" />
</div>
<div >
<label for="zip">Zip:</label>
<input id="zip" name="zip" type="text" />
</div>
<div>
<label for="eaddress">Email address:</label>
<input id="eaddress" name="eaddress" type="text" class="required"/>
</div>
<div>
<label for="telephone">Telephone:</label>
<input id="telephone" name="telephone" type="text" />
</div>
<div>
<label>Comments:</label>
<textarea rows="4" cols="4" name="comments" id="comments" ></textarea>
</div>
<div>
<label></label>
<input id="submit" type="submit" value="Submit" />
<input id="reset" type="reset" value="Reset" />
</div>
</form>
I just corrected your code. it seems that in the array you are asking for eadress and the field is eaddress with 2 d's
In the script, you misspelt eaddress as eadress :)
You misspelled one of the fields ids in your array definition document.getElementById('eadress') is eaddress in HTML id attribute
I'm trying to do a separate formulary for individuals and corporations
If the visitor check the "Individual" radio button, it would display a form
If the visitor check the "Corporation" radio button, it would display a different form
<fieldset>
<input type="radio" name="tipo_cadastro" value="individual_form" id="individual_form" style="margin:0px !important">
<strong>Individual Form</strong><br/>
<input type="radio" name="tipo_cadastro" value="corporation_form" id="corporation_form" style="margin:0px !important">
<strong>Corporation Form</strong>
<!-- If Individual Form is checked -->
<legend>Personal Data</legend>
<label for="Name">Full Name</label>
<input id="Name" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="Email">Email</label>
<input id="Email" type="text" />
<!-- If Corporation Form is checked -->
<legend>Corporation Data</legend>
<label for="Name">Name</label>
<input id="Name" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="Email">Email</label>
<input id="Email" type="text" />
</fieldset>
Ps: Because of my other javascript, I can't use other <fieldset> than the existing one
You'd need to wrap something around the fields to show/hide, even just a <div> tag with an ID.
Then for your radio buttons, you'd want to add onchange & onmouseup event handlers (to account for people either clicking to change the value, or using their keyboard).
eg.
<script type="text/javascript">
function onchange_handler(obj, id) {
var other_id = (id == 'personal')? 'corporate' : 'personal';
if(obj.checked) {
document.getElementById(id + '_form_fields').style.display = 'block';
document.getElementById(other_id + '_form_fields').style.display = 'none';
} else {
document.getElementById(id + '_form_fields').style.display = 'none';
document.getElementById(other_id + '_form_fields').style.display = 'block';
}
}
</script>
<fieldset>
<input type="radio" name="tipo_cadastro" value="individual_form" id="individual_form" style="margin:0px !important" onchange="onchange_handler(this, 'personal');" onmouseup="onchange_handler(this, 'personal');">
<strong>Individual Form</strong><br/>
<input type="radio" name="tipo_cadastro" value="corporation_form" id="corporation_form" style="margin:0px !important" onchange="onchange_handler(this, 'corporate');" onmouseup="onchange_handler(this, 'corporate');">
<strong>Corporation Form</strong>
<!-- If Individual Form is checked -->
<div id="personal_form_fields">
<legend>Personal Data</legend>
<label for="Name">Full Name</label>
<input id="Name" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="Email">Email</label>
<input id="Email" type="text" />
</div>
<!-- If Corporation Form is checked -->
<div id="corporate_form_fields" style="display: none;">
<legend>Corporation Data</legend>
<label for="Name">Name</label>
<input id="Name" type="text" />
<label for="City">City</label>
<input id="City" type="text" />
<label for="Email">Email</label>
<input id="Email" type="text" />
</div>
</fieldset>