Is there a way for me to submit data collected and passed to a variable using javascript to a php page.
I have a form that has input fields that are posted to a php file I am using a jquery function to serialize the form data and process it in php. However as well as the form data from the input fields I want to send data that I have collected and stored in a javascript variable and pick that up into a php variable so I can run a for loop.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>New User Registration</title>
</head>
<body>
<div id="newUserHld">
<table id="newUserFrmTbl">
<form id="newUserFrm">
<tr>
<td><label id="firstnameLbl">First Name</label></td>
<td><input type="text" id="firstname" size="20" /></td>
</tr>
<tr>
<td><label id="lastnameLbl">Last Name</label></td>
<td><input type="text" id="lastname" size="20" /></td>
</tr>
<tr>
<td><label id="dobLbl">Date of Birth</label></td>
<td><input type="text" id="dob" size="8" /></td>
</tr>
<tr>
<td><label id="positionLbl">Position</label></td>
<td>
<select size="1">
<option>Select Option</option>
<option> WFXM </option>
<option>Operations Manager</option>
<option>Assistant</option>
</select>
</td>
</tr>
<tr>
<td><label id="usernameLbl">Username</label></td>
<td><input type="text" id="username" size="20" /></td>
</tr>
<tr>
<td><label id="passwordLbl">Password</label></td>
<td><input type="password" id="password" size="20" /></td>
</tr>
<tr>
<td><label id="payRateLbl">Pay Rate</label></td>
<td><input type="text" id="payRate" size="20" /></td>
</tr>
<tr><td><input type="submit" id="createUsr" name="createUsr" value="Create User" /> </td>
</form>
</table>
</div>
<div id="success">
</div>
<button type="button" onclick="getFrmElm()">Try it</button>
</body>
<script>
function getFrmElm (){
var x = document.getElementById("newUserFrm");
var txt = "";
var i;
for (i = 0; i < x.length; i++) {
txt = txt + x.elements[i].id + "<br>";
}
formSubmit();
}
function formSubmit(){
$.ajax({
type:'POST',
url:'userreg.php',
data:$('#newUserFrm').serialize(),
success:function(response){
$('#success').html(response);
}
});
return false;
}
</script>
</html>
PHP FROM userreg
<?php
include_once "iud.php";
$db = connectDatabase();
$formfields = test_input($_POST['txt'];
$firstname=test_input($_POST['firstname']);
$lastname=test_input($_POST['lastname']);
$sql="INSERT INTO contacts(firstname, lastname) ";
$sql .= "values (";
$sql .= "'".$firstname."', '".$lastname."'";
$sql .= ")";
if(mysqli_query($db, $sql)){
echo "Record Inserted";
}else{
echo "Insert failed";
}
mysqli_close($db);
function test_input($data){
$data=trim($data);
$data=stripslashes($data);
$data=htmlspecialchars($data);
return $data;
}
?>
Basically I want to send the data from the form but also from the VAR txt with it.
Modify your ajax to contain data Key.
Currently there are no key there.
$.ajax({
type:'POST',
url:'userreg.php',
data: {
firstName: $("#firstName").val(),
lastName: $("#lastName").val(),
// ... and so on until all the form element in here - then your PHP will work
},
success:function(response){
$('#success').html(response);
}
});
your missing name attribute in input field and if u user ajax need to link jquery library file in header. below code help to post your form data using ajax.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>New User Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<div id="newUserHld">
<table id="newUserFrmTbl">
<form id="newUserFrm" method="POST" >
<tr>
<td><label id="firstnameLbl">First Name</label></td>
<td><input type="text" id="firstname" size="20" name="firstname" /></td>
</tr>
<tr>
<td><label id="lastnameLbl">Last Name</label></td>
<td><input type="text" id="lastname" size="20" name="lastname" /></td>
</tr>
<tr>
<td><label id="dobLbl">Date of Birth</label></td>
<td><input type="text" id="dob" size="8" name="dob" /></td>
</tr>
<tr>
<td><label id="positionLbl">Position</label></td>
<td>
<select size="1" name="positionLbl">
<option>Select Option</option>
<option> WFXM </option>
<option>Operations Manager</option>
<option>Assistant</option>
</select>
</td>
</tr>
<tr>
<td><label id="usernameLbl">Username</label></td>
<td><input type="text" id="username" size="20" name="username" /></td>
</tr>
<tr>
<td><label id="passwordLbl">Password</label></td>
<td><input type="password" id="password" size="20" name="password" /></td>
</tr>
<tr>
<td><label id="payRateLbl">Pay Rate</label></td>
<td><input type="text" id="payRate" size="20" name="payRate" /></td>
</tr>
<tr><td><input type="submit" id="createUsr" name="createUsr" value="Create User" onclick="formSubmit(); return false;" /> </td>
</form>
</table>
</div>
<div id="success">
</div>
</body>
<script>
function formSubmit(){
alert($('#newUserFrm').serialize());
$.ajax({
type:'POST',
url:'userreg.php',
data:$('#newUserFrm').serialize(),
success:function(response){
$('#success').html(response);
}
});
return false;
}
</script>
</html>
and php File to check response.
<?php
print_r($_POST);
exit;
?>
Related
I have a set of 10 Search Fields to be displayed when 2 different tabs are clicked. Both the tabs have same set of 10 fields. Instead of having different DIV, I want to use same DIV and based on the specific TAB selection, I want to only change my AJAX REST End-Point.
Pls help how to use same DIV for different TABS in HTML.
1) HTML: Code below shows 2 tabs and the 2 DIVs - Entity and Claim. Want to use only 1 DIV as both ENTITY and CLAIM DIVs have same set of fields.
<div class="tab">
<button class="tablinks" name="entity"
onclick="openTab(event, 'entity')" id="defaultOpen">Entity
Search</button>
<button class="tablinks" name="claim" onclick="openTab(event, 'claim')">Claim
Search</button>
</div>
<div id="entity1" class="tabcontent">
<h3>Entity</h3>
</div>
<div id="claim1" class="tabcontent">
<h3>Claim</h3>
</div>
<div id="entity" style="text-align: center" class="tabcontent">
<form name="ajaxform" id="ajaxform" method="POST" align="center">
<label align="center" class="h1"><font size=6><b>ER
Search Service</b></font></label> </br> </br> </br>
<input type="hidden" id="userID" name="userID" value="">
<script>
</script>
<table align="center">
<tr>
<td>EntityID</td>
<td><input type="text" name="entityid" width=10></td>
<!-- <td>ClaimID</td>
<td><input type="text" name="claimid" width=10></td> -->
<td>First Name</td>
<td><input type="text" name="firstname" width=10></td>
<td>Last Name</td>
<td><input type="text" name="lastname" width=10></td>
</tr>
<tr>
<td>Address Line 1</td>
<td><input type="text" name="addrLine1" width=10></td>
<td>Address Line 2</td>
<td><input type="text" name="addrLine2" width=10></td>
<td>City</td>
<td><input type="text" name="city" width=10></td>
<td>State</td>
<td><input type="text" name="state" width=10></td>
</tr>
<tr>
<td>Country</td>
<td><input type="text" name="country" width=10></td>
<td>Zipcode</td>
<td><input type="text" name="zipcode" width=10></td>
<td>SSN</td>
<td><input type="text" name="ssn" width=10></td>
<td>DL Number</td>
<td><input type="text" name="dl_num" width=10></td>
</tr>
<tr>
<td>DOB</td>
<td><input type="text" name="dob" width=10></td>
<td>Professional License</td>
<td><input type="text" name="profLic" width=10></td>
<td>Policy Number</td>
<td><input type="text" name="policyNum" width=10></td>
</tr>
</table>
</br>
<table align="center" class="h1">
<tr>
<td><input type="button" id="simplepost" value="Search"
align="center"></td>
<td><input type="reset" id="reset" value="Clear"
onClick="runReset()" align="center"></td>
</tr>
</table>
</br>
<table align="center" class="h1">
<tr>
<td><select id="downloadFormat" align="center">
<option value="selectValue" selected>Select Download
Format</option>
<option value="csv">CSV</option>
<option value="xls">Excel</option>
<option value="xml">XML</option>
<option value="pdf">PDF</option>
</select></td>
<td><input type="button" id="download" value="Download"
disabled=true align="center"></td>
</tr>
</table>
</form>
</div>
<div id="claim" style="text-align: center" class="tabcontent">
<form name="claimform" id="claimform" method="POST" align="center">
<label align="center" class="h1"><font size=6><b>ER
Search Service</b></font></label> </br> </br> </br>
<table align="center">
<tr>
<td>EntityID</td>
<td><input type="text" name="entityid" width=10></td>
<td>ClaimID</td>
<td><input type="text" name="claimid" width=10></td>
<td>First Name</td>
<td><input type="text" name="firstname" width=10></td>
<td>Last Name</td>
<td><input type="text" name="lastname" width=10></td>
</tr>
<tr>
<td>Address Line 1</td>
<td><input type="text" name="addrLine1" width=10></td>
<td>Address Line 2</td>
<td><input type="text" name="addrLine2" width=10></td>
<td>City</td>
<td><input type="text" name="city" width=10></td>
<td>State</td>
<td><input type="text" name="state" width=10></td>
</tr>
<tr>
<td>Country</td>
<td><input type="text" name="country" width=10></td>
<td>Zipcode</td>
<td><input type="text" name="zipcode" width=10></td>
<td>SSN</td>
<td><input type="text" name="ssn" width=10></td>
<td>DL Number</td>
<td><input type="text" name="dl_num" width=10></td>
</tr>
<tr>
<td>DOB</td>
<td><input type="text" name="dob" width=10></td>
<td>Professional License</td>
<td><input type="text" name="profLic" width=10></td>
<td>Policy Number</td>
<td><input type="text" name="policyNum" width=10></td>
</tr>
</table>
</br>
<table align="center" class="h1">
<tr>
<td><input type="button" id="claimpost" value="Search"
align="center"></td>
<td><input type="reset" id="reset" value="Clear"
onClick="runReset()" align="center"></td>
</tr>
</table>
</br>
<table align="center" class="h1">
<tr>
<td><select id="downloadFormat" align="center">
<option value="selectValue" selected>Select Download
Format</option>
<option value="csv">CSV</option>
<option value="xls">Excel</option>
<option value="xml">XML</option>
<option value="pdf">PDF</option>
</select></td>
<td><input type="button" id="download" value="Download"
disabled=true align="center"></td>
</tr>
</table>
</form>
</div>
2) JavaScript:
<script>
var tabSelected = '';
var userID = getParameterByName("userID");
//alert(userID);
function setUserID() {
//userID = getParameterByName("userID");
document.getElementById("userID").value = userID;
//alert(document.getElementById("userID").value);
}
function getParameterByName(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
//alert('Query Variable ' + variable + ' not found');
}
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
if (tabName == "entity") {
tabSelected = "getEntity";
alert(tabSelected);
} else if (tabName == "claim") {
tabSelected = "getClaim";
alert(tabSelected);
}
}
document.getElementById("defaultOpen").click();
</script>
3) AJAX:
$("#simplepost").click(function(e) {
//getUsersAndDisplay();
tabSelected = "getEntity";
//alert(tabSelected);
convertJSONToTable(tabSelected);
});
//GETUSERS Button ends
$("#claimpost").click(function(e) {
tabSelected = "getClaim";
//alert(tabSelected);
convertJSONToTable(tabSelected);
});
AJAX REST-ENDPOINT CALL: Want to call same method based on the variable which is getting the right values. But problem is how to display same DIV for different TAB Selections.
function convertJSONToTable(tab) {
var MyFormData = $("#ajaxform").serializeJSON();
console.log(MyFormData);
var MyFormJSON = JSON.stringify(MyFormData,null, 2);
console.log(MyFormJSON);
var urlSelected = '';
if (tab == "getEntity") {
urlSelected = "http://localhost:8089/restserver/rest/getEntity";
} else if (tab == "getClaim"){
urlSelected = "http://localhost:8089/restserver/rest/getClaim";
}
$.ajax({
url : urlSelected,
type: "POST",
contentType: "application/json",
data : MyFormJSON,
success: function(response) {
//Store result in Session and Enable Download button
response = removeAllBlankOrNull(response);
var cacheString = JSON.stringify(response, null, 2);
console.log("-----------------> cacheString is: " + cacheString);
var sessionresponse = sessionStorage.setItem("i98779", cacheString);
console.log("----------------------------------------------------------------");
console.log("Response is: " + response);
console.log("----------------------------------------------------------------");
if(cacheString != null && cacheString != "[]") {
document.getElementById("download").disabled = false;
}
createTable2(response);
},
error: function(jqXHR, textStatus, errorThrown)
{
console.log(errorThrown);
alert("Error: " + errorThrown);
}
});
} //convertJSONToTable() Ends here
You only need one form and therefore only one "tab". But with two buttons you can let it appear like having two tabs. Each of these buttons shows/hide a submit-button in the form.
The form has to submit-buttons. One is sending the variable "claim" to the ajax-function. The other one is sending "entity" to the ajax-function.
HTML
<div class="tab">
<button class="tablinks" name="entity" id="open-entity">Entity
Search</button>
<button class="tablinks" name="claim" id="open-claim">Claim
Search</button>
</div>
<div>
<form>
<!--Input fields goes here-->
<!--Two submit buttons in the same form, each is sending its individual variable to your ajax function-->
<input type="button" id="submit-entity" value="Download"
disabled=true align="center">
<input type="button" id="submit-claim" value="Download"
disabled=true align="center"></td>
</form>
</div>
JS
$(function() {
//Define which form should be shown on page-load, in this case "claim"
$('#submit-claim').show();
$('#submit-claim').hide();
//Show button to submit claim-form, hide button for entity-form
$('#open-claim').click(function(){
$('#submit-claim').show();
$('#submit-claim').hide();
});
//Hide button to submit claim-form, show button for entity-form
$('#open-entity').click(function(){
$('#submit-entity').show();
$('#submit-entity').hide();
});
//Call ajax if submit button is clicked
$('#submit-entity').click(function(){
convertJSONToTable('entity');
});
$('#submit-claim').click(function(){
convertJSONToTable('claim');
});
});
SECOND OPTION:
Instead of having two submit buttons you can add a hidden input-field to your form. If the user clicks on the #open-claim button the value of the input field is changed to 'claim'. If clicked on open-entityits value gets 'entity'.
$('#open-claim').click(function(){
$('#form-type').val('claim');
});
$('#open-entity').click(function(){
$('#form-type').val('entity');
});
Then, when clicked on the submit-button of the form the value of the input field is sent to the ajax-function.
$('#submit-btn').click(function(){
convertJSONToTable($('#form-type').val());
});
Hi I am using codeigniter. I need to have a form_dropdown embedded inside javascript.I have a table with a button add row.
When I click add I replicate the same row above. In my view page I have a javascript to add the dynamic table row.
Now I could not have a drop-down in it.I have a controller file where I pass a data that should be displayed as drop-down box.
My controller function:
class Admin_billing extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->model('billing_model');
if(!$this->session->userdata('is_logged_in')){
redirect('admin/login');
}
}
public function ticket($id)
{
$this->load->library('session');
$this->session->unset_userdata('client_detail');
$id=$this->uri->segment(4);
$data['id']=$this->uri->segment(4);
$data['employee']=$this->billing_model->emp_name();
$data['main_content'] = 'admin/billing/ticket_page';
$this->load->view('includes/template', $data);
}
}
My model function:
<?php
class billing_model extends CI_Model {
public function __construct()
{
$this->load->database();
}
public function emp_name()
{
$this->db->select('employee.first_name');
$this->db->from('employee');
$this->db->group_by('employee.id');
$query = $this->db->get();
return $query->result_array();
}
}
?>
Here I have a emp_name function to get the employee name from my database.
My view page:
<script>
function displayResult() {
var row = document.getElementById("test").insertRow(-1);
row.innerHTML = '<td>form_dropdown('employee', $options_employee, set_value('employee[]'), 'class="span2"')</td><td><input type="text" name="start_time[]" value="" style="width:35px;"/></td><td><input type="text" name="pid[]" style="width:35px;"/></td><td><input type="text" name="description[]" class="description" value="" style="width:145px;"/></td><td><input type="text" class="type" value="" style="width:45px;"/></td><td><input type="text" class="qty_prch" value="" style="width:45px;"/></td><td><input type="text" class="qty_used" value="" style="width:45px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td>';
}
</script>
<?php
$attributes = array('class' => 'form-horizontal', 'id' => '');
$options_employee = array('' => "Select");
foreach ($employee as $row)
{
$options_employee[$row['name']] = $row['name'];
}
?>
<table id="test">
<thead>
<tr>
<td style="width:80px;">Employee</td>
<td style="width:35px;">Start time</td>
<td style="width:35px;">Id</td>
<td style="width:145px;">Description</td>
<td style="width:45px;">Type></td>
<td style="width:45px;">qty prch></td>
<td style="width:45px;">qty used</td>
<td style="width:70px;">Price</td>
<td style="width:70px;">discount></td>
<td style="width:70px;">Tax></td>
<td style="width:70px;">Total</td>
</tr>
</thead>
<tbody>
<tr>
<td><?php echo form_dropdown('employee', $options_employee, set_value('employee[]'), 'class="span2"');?></td>
<td><input type="text" name="start_time[]" value="" style="width:35px;"/></td>
<td><input type="text" name="pid[]" value="" style="width:35px;"/></td>
<td><input type="text" name="description[]" class="description" value="" style="width:145px;"/></td>
<td><input type="text" name="type[]" class="type" style="width:45px;"/></td>
<td><input type="text" name="qty_prch[]" class="qty_prch" style="width:45px;"/></td>
<td><input type="text" name="qty_used[]" class="qty_used" style="width:45px;"/></td>
<td><input type="text" name="price[]" class="price" style="width:70px;"/></td>
<td><input type="text" name="discount[]" class="discount" style="width:70px;"/></td>
<td><input type="text" name="tax[]" class="tax" style="width:70px;"/></td>
<td><input type="text" name="total[]" class="total" style="width:70px;"/></td>
</tr>
</tbody>
</table>
<div id="add_row">
<button onClick="displayResult()" class="add_r"></button>
</div>
This is my view page in the above table My first field is a dropdown php code. This works for static row in my table.When I use javascript to add new row I could not get a dropdown.How to handle this?Can someone help me code?
First at all PHP is server side language. If you append to html your row only in javascript no php is executed.
You need use ajax for this. Solution with jQuery:
On server side (php) you need to prepare url (function) for serve a new row snipped data.
On buton onClick event trigger jQuery ajax http://api.jquery.com/jquery.ajax. Url param point to prepared url.
After ajax request is done you set response data as new row to your table.
$.ajax({
url: "DOMAIN/newRow",
})
.done(function(data) {
$('table#test tbody').append(data);
}
});
PHP (in your admin billing controller)
I am not verry familiar with cakePHP, so simple. You need write function which returns generated row html.
public function newRow()
{
$options_employee = 'prepare this variable here';
$dropdown = form_dropdown('employee', $options_employee, set_value('employee[]'), 'class="span2"');
// Send data to browser (return is only for demonstration)
return '<tr><td>' . $dropdown . '</td><td><input type="text" name="start_time[]" value="" style="width:35px;"/></td><td><input type="text" name="pid[]" style="width:35px;"/></td><td><input type="text" name="description[]" class="description" value="" style="width:145px;"/></td><td><input type="text" class="type" value="" style="width:45px;"/></td><td><input type="text" class="qty_prch" value="" style="width:45px;"/></td><td><input type="text" class="qty_used" value="" style="width:45px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td></tr>';
}
I am having quite a bit of trouble getting a particular login form to work with Jquery using classic asp on IE 9.
On my index.asp page I have the following form:
<%#LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!--#include file="Connections/LogisticsConnection.asp" -->
<%
Dim RS_User
Dim RS_User_cmd
Dim RS_User_numRows
Set RS_User_cmd = Server.CreateObject ("ADODB.Command")
RS_User_cmd.ActiveConnection = MM_LogisticsConnection_STRING
RS_User_cmd.CommandText = "SELECT UserName, Password FROM Users"
RS_User_cmd.Prepared = true
Set RS_User = RS_User_cmd.Execute
RS_User_numRows = 0
%>
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Training Prioritization</title>
</head>
<link rel="stylesheet" type="text/css" href="img/css/site.css"/>
<link rel="stylesheet" type="text/css" href="img/scripts/jquery-ui-1.11.4/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="img/scripts/chosen/chosen.css"/>
<script src="img/scripts/jquery-1.11.2.min.js"></script>
<script src="img/scripts/jquery-ui-1.11.4/jquery-ui.js"></script>
<script src="img/scripts/chosen/chosen.jquery.js"></script>
<script src="img/scripts/siteScript.js"></script>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"></div>
<div id="title">Training Prioritization</div>
<div id="login"><img src="img/loginBtn.png" id="Login-Img">Login</img></div>
</div><!--END HEADER-->
<div id="menu">
<div id = "menuItems">
<img src="img/editBtn.png" id="Menu-edit">Edit</img>
<img src="img/saveBtn.png" id="Menu-save">Save</img>
<img src="img/cancelBtn.png" id="Menu-cancel"/>Cancel</img>
</div>
</div>
<div id="body">
<div id="formBody">
<table id="formTable">
<tbody>
<tr id="Table-Heading-titleGroup">
<td>Title:</td>
<td>Project Tracker Number:</td>
<td>Status:</td>
<td>Month:</td>
</tr>
<tr>
<td><input type="text" id="Form-title"></td>
<td><input type="text" id="Form-ptNum"></td>
<td> <select id="Form-Dropdown-status"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></td>
<td>
<select id="Form-Dropdown-month"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>
</td>
</tr>
<tr id="Table-Heading-requestorGroup">
<td>Requestor:</td>
<td>Curriculum/Course:</td>
<td>Duration:</td>
</tr>
<tr>
<td><input type="text" id="Form-requestor"></td>
<td><input type="text" id="Form-curriculum"></td>
<td><input type="text" id="Form-duration"></td>
</tr>
<tr id="Table-Heading-designerGroup">
<td>Designer:</td>
<td>Start Date:</td>
<td>End Date:</td>
<td>Launch Date:</td>
</tr>
<tr>
<td><input type="text" id="Form-designer"></td>
<td><input type="text" id="Form-Date-startDate"></td>
<td><input type="text" id="Form-Date-endDate"></td>
<td><input type="text" id="Form-Date-launchDate"></td>
</tr>
<tr id="Table-Heading-project">
<td>Project Description:</td>
</tr>
<tr>
<td><input type="text" id="Form-Paragraph-projectDescription"></td>
</tr>
<tr id="Table-Heading-businessGroup">
<td>Business Unit</td>
<td>Legacy Group</td>
<td>Work Group</td>
</tr>
<tr>
<td><select id="Form-Dropdown-businessUnit"><option value="test1">test1</option><option value="test2">test2</option><option value="test3">test3</option></select></td>
<td><select id="Form-Dropdown-legacyGroup"><option value="test1">test1</option><option value="test2">test2</option><option value="test3">test3</option></select></td>
<td><select id="Form-Dropdown-workGroup"><option value="test1">test1</option><option value="test2">test2</option><option value="test3">test3</option></select></td>
</tr>
<tr>
<td id="Table-Heading-location">
Location:
</td>
</tr>
<tr>
<td><img src="img/addBtn.png"/><div id="Table-Row-Child-Location">Add Location</div></td>
</tr>
<tr id="Table-Row-Parent-AddLocation">
<tr>
<tr id="Table-Heading-notes">
<td>Notes</td>
</tr>
<tr>
<td><input type="text" id="Form-Paragraph-notes"></td>
</tr>
</tbody>
</table>
</div>
<div id="test">
text here
</div>
<form id="Form-Submit" action="verify.asp" method="post">
<div id="Modal-Menu">
User Name:<input type="text" id="Modal-Menu-Input-UserName" name="UserName" value="User Name">
Password:<input type="password" id="Modal-Menu-Input-Password" name="Password" value="Password" >
</div>
</form>
</div><!--END BODY-->
<div id="footer">
<div id="footerText" align="center">
©2015 CenturyLink
</div>
</div>
</div><!--END WRAPPER-->
</body>
</html>
<%
RS_User.Close()
Set RS_User = Nothing
%>
In my siteScript.js I have the following Jquery:
//menu
$("#login").click(function(){$("#Modal-Menu").dialog("open")});
$(function(){
$("#Modal-Menu").dialog(
{autoOpen:false,
modal:true,
buttons:{
Cancel: function(){
$("#Modal-Menu").dialog("close");
},
'Submit': function(){
ajaxSubmit();
}
}
})
});
//ajax response
function ajaxSubmit(){
$.ajax({
url: 'verify.asp',
data: $("#Form-Submit").serialize(),
type: 'POST',
dataType: 'html',
success: function(data){
alert(data);
},
error: function(err){
alert("Error");
}
});
return false;
};
This particular form sends information to verify.asp which has the following code:
dim Username
dim Password
Username =Request.Form("UserName")
Password = Request.Form("Password")
Response.Write(Username)
Response.Write(Password)
My issue is that I am unable to get any information from the modal form(which sends infor via POST), and have it properly captured via Request.Form. When I alert out the data, I get the whole verify.html page, but when I look at the response.write for Username and Password, it is blank. Any help or advice is greatly appreciated thanks!
Edit: Provided full index.asp document as requested
I finally figured it out in my index.asp I have:
<form id="Form-Submit" action="verify.asp" method="post">
<div id="Modal-Menu">
User Name:<input type="text" id="Modal-Menu-Input-UserName" name="UserName" value="User Name">
Password:<input type="password" id="Modal-Menu-Input-Password" name="Password" value="Password" >
</div>
</form>
Note the two form tags that are outside of the "Modal-Menu" div. What it needs to look like is this:
<div id="Modal-Menu">
<form id="Form-Submit" action="verify.asp" method="post">
<input type="text"name="UserName" value="User Name"/>
<input type="password" id="Modal-Menu-Input-Password" name="Password" value="Password"/>
</form>
</div>
where the form tags are wrapped inside of the "Modal-Menu" div...
Idiocy 1 Hexobolic 0...
I have a form, echo'd from a php page, and I need to error handle multiple text fields
the 'phone' field is not meant to have more than 10 NUMBERS
the 'fname', 'oname' and 'sname' are meant to have only letters
and the 'date' is meant to have only date format.
How do i achieve this using javascript?
echo '
<html>
<head>
<title>Member Registration</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<!-- USE JAVASCRIPT FOR ERROR HANDLING -->
<body>
<h1>Member Registration</h1>
<form method="POST" enctype="multipart/form-data" action="register.php" name="regform" onsubmit="return validateForm();return allnumeric()">
<table>
<tr>
<td><label for="fname">First name: </label> <input class="fields" type="text" name="fname" value="" required></td>
<td><label for="sname">Surname: </label> <input class="fields" type="text" name="sname" value="" required></td>
<td><label for="oname">Other names: </label> <input class="fields" type="text" name="oname" value="" required></td>
</tr>
<tr>
<td>Choose Profile Picture:</td><td> <input type="file" name="image" id="file" class="fields"></td>
</tr>
<tr>
<td><label for="nationalid" >National ID: </label> <input class="fields" type="text" name="nationalid" value="" required></td>
<td><label for="dob">Date: </label><input class="fields" type="text" name="dob" required></td>
</tr>
<tr>
<td><label for="email">Email: </label> <input class="fields" type="text" name="email" value="" required></td>
</tr>
<tr>
<td><label for="phone">Phone Number: </label> <input class="fields" type="text" name="phone" value="" required></td>
</tr>
<tr>
<td><label for="gender">Male</label><input type="radio" value="M" name="gender" required></td>
<td><label for="gender">Female</label><input type="radio" value="F" name="gender" required></td>
</tr>
<tr>
<td><input type="submit" value="Submit" name="submit" onclick="return matchcheck"></td>
</tr>
</table>
</form>
</body>
</html>';
here is the script i have written so far
function validateForm()
{
var x=document.forms["regform"]["email"].value;
var atpos=x.indexOf("#");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
}
function isNumeric(){
var a = document.getElementById('phone').value;
var b = /^\d+$/;
if(a.search(b) == -1)
{
alert(Must be Interger);
return false;
}
}
</script>
I am fetching data from database , for each of row data fetched I am creating a radio button against the row. The details of a land-sites are fetched here.
I have a form for booking these land sites, which takes land-site details and name and email of user.
So when a user selects a radio button, the details of land-site should be automatically filled in the form, How to achieve this.
<html>
<body>
<?php
$phase=$_GET["q"];
$sql ="select id, phase,size, facing, sply, status from plot where status='avail' and phase='$phase'";
$ret=mysql_query($sql, $connect);
echo "<form>";
echo"<div style='overflow-y:scroll;height:200px;float:left;' ><table border=1 >
<tr>
<td>select </td><td>phase</td> <td>site no.</td> <td>plot-size</td> <td>face</td> <td>sply</td> <td>status</td>
</tr>" ;
while($row = mysql_fetch_array($ret, MYSQL_ASSOC))
{
echo "<tr>".
"<td><input type='radio' name='book' value='book' onClick=\"whichForm('send_to_one');\" /></td>".
"<td>{$row['phase']} </td>".
"<td>{$row['id']} </td>".
"<td> {$row['size']} </td>".
"<td> {$row['facing']} </td>".
"<td>{$row['sply']} </td> ".
"<td>{$row['status']} </td> ".
"</tr>";
}
echo "</table></div>";
mysql_close($connect);
?>
<div id="send_to_one" style="float:right;padding:30px">
<table>
<tr>
<td>Name :</td><td><input type="text" name="name" value=""/></td>
</tr>
<tr>
<td>Mobile:</td><td><input type="text" name="mobile" value="" /></td>
</tr>
<tr>
<td>Email :</td> <td><input type="text" name="email" value="" /></td>
</tr>
<tr>
<td>Phase : </td> <td><select name="phase" id="phase">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></td>
</tr>
<tr>
<td>Site :</td> <td> <input type="text" name="site" value="" id="site" /></td>
</tr>
<!--
<tr><td><span id="status"></span></td></tr>
-->
<tr>
<td><input type="radio" name="status" value="blocked" class="radioBtn" onclick="advance.disabled=true" /> block</td>
<td><input type="radio" name="status" value="booked" class="radioBtn" onclick="advance.disabled=false" /> book </td>
</tr>
<tr>
<td>Advance paid </td> <td><input type="text" name="advance" value="" id="textField" /></td>
</tr>
<tr><td><input type="submit" value="submit" /></td> <td> <input type="reset" value="clear all" /> </td></tr>
</table>
<?php echo "</form>"; ?>
</div>
<!-- div ends here -->
</body>
</html>