Jquery generated input values not being posted on form submit - javascript

I'm using braintree to process payments for a website that I'm creating. The api requires that I generate a payment method nonce via javascript in order to process the payment. I'm able to generate the nonce on form submit and place it in the input field however, the value is not being posted.
The jquery:
$( document ).ready(function() {
$('#checkout').on("submit", function() {
var client = new braintree.api.Client({clientToken: "<?php echo $clientToken ?>"});
client.tokenizeCard({
number: $('#number').val(),
cardholderName: $('#first_name').val() + ' ' + $('#last_name').val(),
expirationMonth: $('#expiration_month').val(),
expirationYear: $('#expiration_year').val(),
cvv: $('#cvv').val(),
}, function (err, nonce) {
$("#checkout input[name=nonce]").val(nonce);
$('#checkout input[name=random]').val('randomtext');
});
});
});
The php:
<?php
echo $_POST['first_name'];
echo '<br/>';
echo $_POST['last_name'];
echo '<br/>';
echo $_POST['phone_number'];
echo '<br/>';
echo $_POST['expiration_month'];
echo '<br/>';
echo $_POST['expiration_year'];
echo '<br/>';
echo $_POST['nonce'];
echo '<br/>';
echo $_POST['random'];
echo '<br/>';
$result = Braintree_Transaction::sale(array(
'amount' => '113.00',
'paymentMethodNonce' => $_POST['nonce'],
'orderId' => 'order id',
'customer' => array(
'firstName' => $_POST['first_name'],
'lastName' => $_POST['last_name'],
'phone' => $_POST['phone_number'],
)
));
if ($result->success) {
print_r("success!: " . $result->transaction->id);
} else if ($result->transaction) {
print_r("Error processing transaction:");
print_r("\n code: " . $result->transaction->processorResponseCode);
print_r("\n text: " . $result->transaction->processorResponseText);
} else {
print_r("Validation errors: \n");
print_r($result->errors->deepAll());
}
?>
The html:
<form id="checkout" name="checkout" action="checkout_result.php" method="post" style="width:20em;font-size:1.5em;margin-left:auto;margin-right:auto;">
<table style="margin-top:0.5em;">
<tr>
<td style="padding-left:0.75em;">First Name:</td>
<td><input style="font-size:0.75em;"data-braintree-name="first_name" name="first_name" id="first_name" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Last Name:</td>
<td><input style="font-size:0.75em;"data-braintree-name="last_name" name="last_name" id="last_name" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Email Address:</td>
<td><input style="font-size:0.75em;" name="email_address" id="email_address" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Phone Number:</td>
<td><input style="font-size:0.75em;" name="phone_number" id="phone_number" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Street Address:</td>
<td><input style="font-size:0.75em;" data-braintree-name="street_address" name="street_address" id="street_address" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Apt #:</td>
<td><input style="font-size:0.75em;" data-braintree-name="extended_address" name="extended_address" id="extended_address" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Postal Code:</td>
<td><input style="font-size:0.75em;" data-braintree-name="postal_code" name="postal_code" id="postal_code" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Card Number:</td>
<td><input style="font-size:0.75em;" data-braintree-name="number" name="number" id="number" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Expiration Month:</td>
<td><input style="font-size:0.75em;" data-braintree-name="expiration_month" name="expiration_month" id="expiration_month" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Expiration Year:</td>
<td><input style="font-size:0.75em;" data-braintree-name="expiration_year" name="expiration_year" id="expiration_year" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">CVV:</td>
<td><input style="font-size:0.75em;" data-braintree-name="cvv" name="cvv" id="cvv" value=""/> </td>
</tr>
<tr>
<td style="padding-left:0.75em;">Random:</td>
<td><input style="font-size:0.75em;" name="random" id="random" value=""/></td>
</tr>
<tr>
<td style="padding-left:0.75em;">Nonce:</td>
<td><input type="text" style="font-size:0.75em;" name="nonce" id="nonce" value=""/></td>
</tr>
</table>
<div style="padding-top:0.25em;padding-bottom:0.25em;text-align:center;"><span><input style="font-size:0.5em;" type="submit"
id="submit" value="SUBMIT"/></span></div>
</div>
</form>
How do I get the nonce input field to post. The random text input field doesn't post either.

The problem is probably with the fact, that tokenizeCard makes an asynchronous call to get the nonce. The flow of events is then like this:
submit form begins -> tokenizing begins -> submit form ends ->
(somewhere here the promise is resolved - the result comes back from the server)
-> tokenizing ends
What you can do is to add return false to the end of submit listener (conditions by the emptiness of nonce field) and then then call submit again (without getting the nonce from server again) from the client callback. It would look like this:
$('#checkout').on("submit", function() {
//I could be wrong in the condition below - it may be undefined
if($("#checkout input[name=nonce]").val() === ''){
var client = new braintree.api.Client({clientToken: "<?php echo $clientToken ?>"});
client.tokenizeCard({
number: $('#number').val(),
cardholderName: $('#first_name').val() + ' ' + $('#last_name').val(),
expirationMonth: $('#expiration_month').val(),
expirationYear: $('#expiration_year').val(),
cvv: $('#cvv').val(),
}, function (err, nonce) {
$("#checkout input[name=nonce]").val(nonce);
$('#checkout input[name=random]').val('randomtext');
$('#checkout').submit();
});
return false; //stops form submitting
} else {
return true; //continues form submitting
}
});
Edit: This fiddle represents your problem exactly
$("#form").submit(function(){
alert("submit invoked!");
if($("#writeMe").val() === ''){
writeValue();
alert("submit not done - writeValue invoked");
} else {
alert("submit actually done");
}
return false;
});
function writeValue(){
setTimeout(function() {
alert("result's back -> gonna submit again");
$("#writeMe").val("written");
$("#form").submit();
}, 1000);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form id="form">
<input type="text" readonly id="writeMe" />
<input type="submit" value="Submit me!" />
</form>

Related

Can I able to write with out isset($post[]) for the below code

<script>
function removeAllRowsContainingCheckedCheckbox() {
alert("hello");
for (var rowi= table.rows.length; rowi-->0;) {
var row= table.rows[rowi];
var inputs= row.getElementsByTagName('input');
for (var inputi= inputs.length; inputi-->0;) {
//alert("inside for");
var input= inputs[inputi];
if (input.type==='checkbox' && input.checked) {
//alert("indide if ")
row.parentNode.removeChild(row);
break;
}
}
}
}
</script>
<html>
<head>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<table border="1" id="table">
<tr>
<td colspan="2">Select Technolgy:</td>
</tr>
<tr>
<td>c</td>
<td><input type="checkbox" name="techno[]" ></td>
</tr>
<tr>
<td>hadoop</td>
<td><input type="checkbox" name="techno[]" ></td>
</tr>
<tr>
<td>core java</td>
<td><input type="checkbox" name="techno[]" ></td>
</tr>
<tr>
<td>Javascript</td>
<td><input type="checkbox" name="techno[]" ></td>
</tr>
<tr>
<td>springs</td>
<td><input type="checkbox" name="techno[]" ></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="submit" name="sub"></td>
</tr>
<input type='button' value='del' onclick='removeAllRowsContainingCheckedCheckbox();'>Click me to delete
</table>
</form>
<?php
if(isset($_POST['sub']))
{
$db = pg_connect("host=localhost port=5432 dbname=postgres user=postgres password=ndem$123");
if(!$db){
echo "Error : Unable to open database\n";
} else {
echo "Opened database successfully\n";
}
$checkbox1=$_POST['techno'];
$chk="";
foreach($checkbox1 as $chk1)
{
$chk .= $chk1."";
echo '<script>alert("Inserted Successfully")</script>';
}
$in_ch=pg_query("insert into news_table(technology) values ('$chk')");
echo "the check box value is " . $in_ch;
if($in_ch==1)
{
echo '<script>alert("Inserted Successfully")</script>';
echo "Records created successfully\n";
}
else
{
echo pg_last_error($db);
}
pg_close($db);
}
?>
</body>
</html>
For the submit can i able to write javascript function with out using
$checkbox1=$_POST['techno'];
$chk="";
foreach($checkbox1 as $chk1)
{
$chk .= $chk1."";
echo '<script>alert("Inserted Successfully")</script>';
}
above code because if(isset($_POST['sub'])) is reloading the already submitted checkboxs in the table so user may confuse after delete the page will again show all the check box those who are submitted also .. Please suggest alternatives for this any ways i want to insert the checked checkboxes into database but my thought is to delete the checked submitted also in the table.

if loop to get data if present in table if not present then insert value in table and javascript to get the data on writing profile id

I need a if loop in view file and a javascript when profile id is entered it should show all the related elements in the form and i'm doing this in codeignitor and this is the part of view file
<tr>
<td width='50%'>
<table width="50%"><tr>
<td width="50%"><strong>Profile ID </strong></td>
<td width="50%"><input type="text" id="profile_id" name="profile_id" value="<?php echo $reg_personal_details->profile_id;?>"placeholder="Employee ID "/><?php echo form_error('profile_id');?><br></td>
</tr>
<tr>
<td><strong>Employee Name </strong></td>
<td><input type="text" id="profile_fname" name="profile_fname" value="<?php echo $reg_personal_details->profile_fname;?>"placeholder="Employee Name"/><?php echo form_error('profile_fname'); ?><br></td>
</tr>
<tr>
<td><strong>Employee Type </strong></td>
<td>
<input type="text" id="profile_type" name="profile_type" value="<?php echo $reg_personal_details->profile_type;?>"placeholder="Employee Type"/><?php echo form_error('profile_type');?><br>
</td>
</tr>
<tr>
here is my table:
profile
(profile_id,
profile_fname,
profile_lname,
profile_email,
profile_mobile,
profile_type,
profile_gender,
profile_dob,
profile_marital_status,
profile_religion,
profile_blood_group,
profile_nationality,
profile_iris,
profile_biometric,
profile_department,
profile_designation,
profile_project_designation,
profile_image,
address_1,
address_2)
profile_id is a foreign key and its primary key is in other table as emp_acc_id
model for the above is :
public function reg_personal_details()
{
$reg_personal_details = array(
// i also need a condition here to read the entered profile_id all that below data must be store in that id only//
'profile_type' => $this->input->post('profile_type'),
'profile_gender' => $this->input->post('profile_gender'),
'profile_dob' => $this->input->post('profile_dob'),
'profile_marital_status' => $this->input->post('profile_marital_status'),
'profile_religion' => $this->input->post('profile_religion'),
'profile_blood_group' => $this->input->post('profile_blood_group'),
'profile_nationality' => $this->input->post('profile_nationality'),
'profile_iris' => $this->input->post('profile_iris'),
'profile_biometric' => $this->input->post('profile_biometric'),
'profile_department' => $this->input->post('profile_department'),
'profile_designation' => $this->input->post('profile_designation'),
'profile_project_designation' => $this->input->post('profile_project_designation'),
);
$this->db->update('profile',$reg_personal_details);
You Should write a java Script which would check if a particular element exists or not i.e if its value is not null then generate a new row tags dynamically and set its value what we get in response of the query.
For generating a tag dynamically you can refer the following page:-
http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/
we have a function to check whether data is present or not i.e., empty()and we just need to use it in if loop like this "if (!empty($var name))" and can also use "if(empty($var name)) " so if there is no data then it doesn't show any error and if data is present in db it shows that data
<tr>
<td width='50%'>
<table width="50%"><tr>
<td width="50%"><strong>Profile ID </strong></td>
<td width="50%"><input type="text" id="profile_id" name="profile_id" value="<?php
if (!empty($reg_personal_details)) {
echo $reg_personal_details->profile_id;
} else
echo $profile_id;
?>"placeholder="Employee ID "/><?php echo form_error('profile_id'); ?><br></td>
</tr>
<?php //if($reg_personal_details!=array()){ ?>
<td><strong>Employee Name </strong></td>
<td>
<input type="text" id="profile_fname" name="profile_fname" value="<?php
if (!empty($reg_personal_details)) {
echo $reg_personal_details->profile_fname;
}
?>" placeholder="Employee Name"/><?php echo form_error('profile_fname'); ?><br>
</td>
</tr>
<tr>
<td><strong>Employee Type </strong></td>
<td>
<input type="text" id="profile_type" name="profile_type" value="<?php
if (!empty($reg_personal_details)) {
echo $reg_personal_details->profile_type;
}
?>"placeholder="Employee Type 0/1"/><?php echo form_error('profile_type'); ?><br>
</td>
</tr>
<tr>

updating to sql failed

I've got an error says failed, whenever I check this code I feel there is nothing wrong with my code. Please help me, as I'm only a beginner. There are forms, javascript, and php.
<?php
$species=""; //declare variable to assign table record data
$age= "";
$sex="";
$location="";
$comment="";
require('connectdb.php');
$record=$_REQUEST['id' ];
$query="SELECT * FROM usersform WHERE id = $record "; // listing reservation record
$result=mysql_query($query);
$row=mysql_fetch_array($result);
$species= $row['species']; //retrieve table record and assign to variable
$age= $row['age'];
$location= $row['location'];
$comment= $row['comment'];
if (isset($_POST['submit']))
{
//get data from reservation form
$spec=$_POST['species'];
$eage=$_POST['age'];
$gender=$_POST['gender'];
$elocation=$_POST['location'];
$ecomment=$_POST['comment'];
//update data to table
$query=" UPDATE `usersform` SET
`species` ='$spec',
`age`='$eage',
`location`='$elocation',
`comment`='$ecomment',
WHERE usersform= $record
";
$qresult = mysql_query($query);
if ($qresult){
/*echo '<script type="text/javascript">
window.location = "http://www.example.com/";
</script>';*/
echo '<script type="text/javascript"> window.location="gallery.php";</script>';
#header("location:gallery.php"); // redirect to list
}
else
{
echo "<script type='text/javascript'>alert('failed!')</script>";
}
}
?>
Here is my form code:
<h2>Edit/Update Reservation Record </h2>
<form name="Form" method="Post" onsubmit="return(validateForm());" onreset="cancel();">
<table cellspacing="2" cellpadding="2">
<tr>
<td>species: </td>
<td><input type="text" name="species" size="35" value="<?php echo $species; ?>"/></td>
</tr>
<tr>
<td>age:</td>
<td><input type="text" name="age" maxlength="15" size="15" value="<?php echo $age; ?>"/></td>
</tr>
<tr>
<td>sex:</td>
<td><input type="radio" name="gender" value="male" value="<?php echo $sex; ?>"/>Male <input type="radio" name="gender" value="female" value="<?php echo $sex; ?>"/>Female</td>
</tr>
<tr>
<td>location:</td>
<td><input type="text" name="location" size="35" value="<?php echo $location; ?>"/></td>
</tr>
<tr>
<td>comment:</td>
<td><input type="text" name="comment" size="50" value="<?php echo $comment; ?>"/></td>
</tr>
<tr>
<td><input type="submit" value="Update" name="submit" /></td>
<td><input type="reset" value="Cancel" name="reset" /></td>
</tr>
</table>
</form>
Here is my javascript:
function validateForm() {
if( document.Form.species.value == "" )
{
alert( "Please insert species." );
document.Form.Name.focus() ;
return false;
}
if( document.Form.age.value == "" ||isNaN( document.Form.age.value ) )
{
alert( "Please insert age." );
document.Form.age.focus() ;
return false;
}
if( document.Form.location.value == "" )
{
alert( "Please insert location." );
document.Form.Name.focus() ;
return false;
}
if( document.Form.comment.value == "" )
{
alert( "Please insert comment." );
document.Form.Name.focus() ;
return false;
}
}
function cancel()
{
window.location.href="gallery.php";
}
the update syntax is incorrect.. this is the correct sql syntax
$query=" UPDATE `usersform` SET
`species` ='$spec',
`age`='$eage',
`location`='$elocation',
`comment`='$ecomment'
WHERE usersform= $record
";
change your update query to this
$query=" UPDATE `usersform` SET
`species` ='$spec',
`age`='$eage',
`location`='$elocation',
`comment`='$ecomment'
WHERE id= $record
";
$qresult = mysql_query($query) or die(mysql_error());
Note: Learn mysqli_ or P.D.O as mysql is depriciated

Trying to use javascript to add a new form row and insert into database

The add new row works ( well it adds a new row ) but when i try and submit the data to the database its coming back with array. I tried it without putting the [] at the end of the name tags in the form but all it submited then was the first row.
Sorry to ask a dumb question but ive been racking my brains on how to get this to work.
Heres my code:
<?php
if($user->data()->username = $res->username) {
if(isset($_POST['results'])) {
$submitres = DB::getInstance()->insert('results', array(
'torneyid' => Input::get('torneyid'),
'buyin' => Input::get('buyin'),
'torneydesc' => Input::get('description'),
'finish' => Input::get('finish'),
'profit_loss' => Input::get('profit'),
'eventid' => $res->id
));
}
echo '<form action="" method="post">
<table id="mytable" class="table table-striped">
<thead>
<tr>
<th>Torney ID</th>
<th class="hidden-sm">Torney Description</th>
<th>Buy-In</th>
<th>Finish Pos</th>
<th>Profit/Loss</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="torneyid[]" type="text" value="" class="form-control" /></td>
<td class="hidden-sm"><input name="description[]" type="text" value="" class="fm-control" /></td>
<td><input name="buyin[]" type="text" value="" class="form-control" /></td>
<td><input name="finish[]" type="text" value="" class="form-control" /></td>
<td><input name="profit[]" type="text" value="" class="form-control" /></td>
</tr>
</tbody>
</table>
<button type="submit" name="results" class="btn btn-primary">Submit Results</button>
<a id="add"><button class="btn btn-primary">Add Row</button></a>
</form>';
}
?>
My java script is:
<script type="text/javascript">
$(document).ready(function() {
$("#add").click(function() {
$('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last');
return false;
});
});
</script>
Thanks for any help!
FIXED - Will add how i done it just in case it helps anyone else in the fuiture:
Changed the code from if(isset) to:
if(isset($_POST['results'])) {
for ( $row = 0; $row < count( $_POST["torneyid"] ); ++$row ) {
$tid = $_POST["torneyid"][$row];
$desc = $_POST["description"][$row];
$buy = $_POST['buyin'][$row];
$fin = $_POST['finish'][$row];
$prof = $_POST['profit'][$row];
$submitres = DB::getInstance()->insert('results', array(
'torneyid' => $tid,
'buyin' => $desc,
'torneydesc' => $buy,
'finish' => $fin,
'profit_loss' => $prof,
'eventid' => $res->id
));
}

Why the text contained in textarea is not coming in the $_POST array in PHP?

I've following HTML form:
<form name="question_issue_form" id="question_issue_form" class="login_box" method="post" action="{$site_url}question_issue.php">
<input type="hidden" name="form_submitted" id="form_submitted" value="yes"/>
<input type="hidden" name="post_url" id="post_url" value="question_issue.php"/>
<input type="hidden" name="op" id="op" value="question_issue"/>
<input type="hidden" name="question_id" id="question_id" value="{$question_id}"/>
<table class="trnsction_details" width="100%" cellpadding="5">
<tbody>
<tr>
<td></td>
<td>
<input type="checkbox" name = "que_issue[]" value = "Question is wrong" id ="chkQueWrong">Question is wrong</input>
</td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name = "que_issue[]" value = "Answers are wrong" id ="chkAnsWrong">Answers are wrong</input></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name = "que_issue[]" value = "Question direction is incorrect" id ="chkDirIncorrect">Question direction is incorrecct</input></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name = "que_issue[]" value = "Other" id ="chkOther">Other</input></td>
</tr>
<tr>
<td></td>
<td class="set_message" style="display:none;"><textarea name="que_issue_comment" id = "que_issue_comment" rows="4" cols="25" maxlength="100"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" value="Submit" id="report_question_issue" class="c-btn submit_form"/></td>
</tr>
</tbody>
</table>
</form>
I'm submitting the form using AJAX. When I print the $_POST[] array I'm able to get all the values entered by user, values from hidden fields, etc. except the text from the textarea having name que_issue_comment. Can anyone guide me why such thing is happening? For your reference I'm putting below the AJAX code I've written.
<script language="javascript" type="text/javascript">
$(document).on("click","input[id='chkOther']", function (e) {
$('.set_message').toggle(this.checked);
});
$(document).on('click', "input[id='report_question_issue']", function(e) {
e.preventDefault();
//for confirmation that status change
var ans = confirm("Are you sure to report the question issue?");
if (!ans) {
return false;
}
var post_url = $('#post_url').val();
$.ajax({
type: "POST",
url: post_url,
data: $('#question_issue_form').serialize(),
dataType: 'json',
success: function(data) {
var error = data.error_message;
if(error)
alert(error);
else {
alert("Question issue has been reported successfully.");
$.colorbox.close();
}
}
});
});
</script>
The array $_POST[] printed after form submission is as follows:
(
[form_submitted] => yes
[post_url] => http://localhost/abc/pqr/web/question_issue.php
[op] => question_issue
[question_id] => 77104
[que_issue_comment] =>
)
Why the index value [que_issue_comment] is coming blank even after filling up the text area?

Categories