Closest find a class and change the input value - javascript

I have added the hidden field in the form and inserting the data into the database. I have 16 fields on my page and If the user enters any value in the field then I have to change the value from 0 to 1 in the input field.
I tried the below code but it's not working.
$(document).ready(function() {
//Check this link
$(".onchangefield").change(function() {
var val = $(this).closest(".onchangefield").find(".haschange").val(1);
//$(".haschange").val(1);
alert(val);
});
});
<form action="process.php" name="employee" method="post">
<input type="text" name="name" class="onchangefield">
<input type="hidden" name="haschange[name]" class="haschange" value="0" />
<input type="email" name="email" class="onchangefield">
<input type="hidden" name="haschange[email]" class="haschange" value="0" />
<button type="submit" name="save">Save</button>
<button type="submit" name="send_for_approval">Send to approval</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
How to change the value in the foreach.
<?php
$i=1;
$arrayName = array('1','2','3');
foreach ($arrayName as $key => $value) {?>
<input type="file" name="slider[]" class="fileupload onchangefield">
<input type="hidden" name="haschange[slider][<?php echo $i;?>]" class="haschange" value="">
<?php $i++; } ?>

You can use .next() to get the reference of next input and change value there .
Demo Code :
$(".onchangefield").change(function() {
var selector = $(this).next() //get next input..
selector.val($(this).val() != "" ? 1 : 0) //depending on value change value of next
});
<form action="process.php" name="employee" method="post">
<input type="text" name="name" class="onchangefield">
<input type="text" name="haschange[name]" class="haschange" value="0" />
<input type="email" name="email" class="onchangefield">
<input type="text" name="haschange[email]" class="haschange" value="0" />
<button type="submit" name="save">Save</button>
<button type="submit" name="send_for_approval">Send to approval</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Related

Three forms actions in one php page

Assume that I have a PHP page that has three forms.
Form one, it will ask the user to enter the email address while the code is hidden.
<label for="email">Email Address:</label> <input type="text" id="email" name="email">
<input type="hidden" id="code" name="code" value="42"> <input type="submit" value="Submit1">
Form two will be showing after step 1. In this step, the user will be asked to enter the code in step 1 (which is equal to 42).
<input type="number" id="code2" name="code2"> <input type="submit" value="Submit2">
Form three, will be showing after entering corrected code in step 2.
<input type="number" id="code2" name="code2"> <input type="submit" value="Submit3">
How can I program it?
You could try this approach :
<?php
function getFormContent() {
$email = $_POST['email'] ?? null; //$email equals to null if it is undefined, to prevent errors
if (!$email) {
echo '<input type="text" name="email" placeholder="Email.." />';
echo '<input type="hidden" id="code" name="code" value="42">';
} else {
echo '<input type="hidden" name="email" value="'.$email.'" />'; //keep email set after submitting first step
}
if ($email && $_POST['code']) {
if (isset($_POST['code2']) && $_POST['code2'] == $_POST['code']) {
//final form
}
else { //second step
echo '<input type="number" id="code2" name="code2">';
echo '<input type="hidden" id="code" name="code" value="42">'; //we still need this in case user submitted a wrong code
}
}
}
?>
<form method="post">
<?= getFormContent() ?>
<input type="submit" />
</form>
You need to state the action of the form as the name of the file.
So, if the file you are working on is name example.php it should look like so:
$email = trim(get_variable_value('email'));
$code = trim(get_variable_value('code'));
$code2 = trim(get_variable_value('code2'));
//make sure to validate the input!! if it's not valid send back
<? if(!isset($email)){ //alternatively, you can add a hidden input `stage`. I just don't like it, as it can be bypassed.
?>
<form name="transferToNewForm" action="example.php" method="post">
<label for="email">Email Address:</label> <input type="text" id="email" name="email">
<input type="hidden" id="code" name="code" value="42">
<input type="submit" value="Submit1">
</form>
<? }
if(isset($email) && isset($code) && $code == 42){ ?>
<form name="transferToNewerForm" action="example.php" method="post">
<label for="email">Email Address:</label> <input type="text" id="email" name="email" value="<?= $email ?>" readonly>
<input type="number" id="code2" name="code2">
<input type="submit" value="Submit2">
</form>
<? }
if(isset($email) && isset($code2) && $code2 == 42){ ?>
<form name="finalFrom" action="theActualPageYouWant.php" method="post">
<label for="email">Email Address:</label> <input type="text" id="email" name="email" value="<?= $email ?>" readonly>
<input type="number" id="code2" name="code2">
<input type="submit" value="Submit3">
</form>
<? } ?>

Form Calculation in CodeIgniter

i want to do is after typing quantity, the balance and quantity should do addition and place the answer to balance automatically. this is a piece of codeigniter projet. the balance comes from database.
<form action="addnew" method="post">
<input type="text" name="io" placeholder="IN_OUT"><br>
<input type="date" name="date" placeholder="Date yyyy-mm-dd" value="<?php echo date("Y-m-d") ?>" disabled><br>
<input id="qty" type="number" name="qty" placeholder="Quantity"><?php echo $key->ns_balance; ?><br>
<input type="text" name="breed" placeholder="Breed"><br>
<input type="number" name="es_id" placeholder="Estate"><br>
<input type="number"
name="balance"
placeholder="Balance"
value="" disabled>
<br>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="Reset" value="Reset"
</form>
User interface image
try using this jquery code:
<div id="test"><input id="qty" type="number" name="qty" placeholder="Quantity"><?php echo $key->ns_balance; ?></div>
<input id="balance" type="hidden" value="<?php echo $key->ns_balance; ?>">
$("#qty").on("keyup", function(){
var qty = $("#qty").val();
var balance= parseInt($("#balance").val());
$("#test").text("Balance -"+qty*balance); //you can change the id to place result whereever you want
});

send array via onsubmit form

I have a html form like this :
<form name="form" id="form" method="get" action="www.example.com" enctype="multipart/form-data" onsubmit="window.location.href = 'www.example.com/goods:' + document.getElementsByClassName('goods').serialize; return false;" autocomplete="off">
<input name="goods" type="text" id="<?=$goods['id']?>" class="goods" value="" />
<input name="goods" type="text" id="<?=$goods['id']?>" class="goods" value="" />
<input name="goods" type="text" id="<?=$goods['id']?>" class="goods" value="" />
<input name="goods" type="text" id="<?=$goods['id']?>" class="goods" value="" />
<input name="goods" type="text" id="<?=$goods['id']?>" class="goods" value="" />
<input name="submit" type="submit" class="submit" value="submit" />
</form>
I am trying to pass via onsubmit form an array with the values of the input fields and then redirect to the above url but i cant manage to do it. Is there any way to achieve it?
To define an array in HTML forms you can use [], like this:
<input name="goods[]"/>
I think you are trying to code like this. take name as array
<form name="form" id="form" method="get" action="www.example.com" enctype="multipart/form-data" onsubmit="window.location.href = 'www.example.com/goods:' + document.getElementsByClassName('goods').serialize; return false;" autocomplete="off">
<?php foreach ($goods as $key => $good) { ?>
<input name="goods[]" type="text" id="<?php echo $good['id']; ?>" class="goods" value="" />
<?php } ?>
<input name="submit" type="submit" class="submit" value="submit" />
</form>

Get a value from a different form in javascript and store in a php session

Am trying to get a value from a different form to store in a session. When the user clicks on Calculate on form one it opens form two.In form two the user enters a value in a textfield. Now incase the user presses the calculate button again I would want the page to store the values in form two in a session so that when form two re appears the value is stored.
is there a way to use javascript to store it in a php session
<?php
if(isset($_POST['calculate']))
{
$_SESSION['ss'] = '<script>doument.form[frm2].ss.value</script>';
}
?>
<form action="" method="post" name="frm1" id = "frm1" enctype="multipart/form-data" onkeypress="return event.keyCode != 13;">
<input type="text" name="id" value="<?php echo $id; ?>" />
<input type="submit" name="calculate" id="calculate">
<form>
<?php
if(isset($_POST['calculate'])){
?> ?>
<form action="go.php" method="post" name="frm2" id = "frm1" enctype="multipart/form-data" onkeypress="return event.keyCode != 13;">
<input type="text" name="ss" value="" />
<input type="submit" name="submit" id="submit">
<form>
<?php
}
?>
If you are using jQuery can try this way .
first define a hidden field in form 1
<form action="" method="post" name="frm1" id = "frm1" enctype="multipart/form-data" onkeypress="return event.keyCode != 13;">
<input type="text" name="id" value="<?php echo $id; ?>" />
<input type="hidden" id="hidden_ss" name="hidden_ss" value=""/>
<input type="submit" name="calculate" id="calculate">
</form>
Then in jQuery when you change the frm2 -> ss value add the value to hidden field
$("input[name='ss']").change(function(){
$("#hidden_ss").val($(this).val());
});
then wen you create calculate button
<?php
$ss = trim($_POST['hidden_ss']);
?>
<form action="" method="post" name="frm1" id = "frm1" enctype="multipart/form-data" onkeypress="return event.keyCode != 13;">
<input type="text" name="id" value="<?php echo $id; ?>" />
<input type="hidden" id="hidden_ss" name="hidden_ss" value=""/>
<input type="submit" name="calculate" id="calculate">
</form>
<?php
if(isset($_POST['calculate'])){
?> ?>
<form action="go.php" method="post" name="frm2" id = "frm1" enctype="multipart/form-data" onkeypress="return event.keyCode != 13;">
<input type="text" name="ss" value="<?php echo $ss; ?>" />
<input type="submit" name="submit" id="submit">
</form>
<?php
}
?>
I believe you don't need JavaScript for this.
Just something like this:
<form action="" method="post" name="frm1" id = "frm1" enctype="multipart/form-data" onkeypress="return event.keyCode != 13;">
<input type="text" name="id" value="<?=htmlentities($_SESSION['id'])?>" />
<input type="submit" name="calculate" id="calculate">
</form>
<?php
if(isset($_POST['calculate']))
{
$_SESSION['id'] = $_POST['id'];
?>
<form action="go.php" method="post" name="frm2" id = "frm1" enctype="multipart/form-data" onkeypress="return event.keyCode != 13;">
<input type="text" name="ss" value="<?=htmlentities($_SESSION['id'])?>" />
<input type="submit" name="submit" id="submit">
</form>
<?php
}
?>

Load Div after Submit Required Fields on PHP Form

I have a hidden div I am loading on click of submit button. I also have .notShouldBeBlank on the script for the form. What is the right method so that the php sends results and the hidden div will not load until all required fields are complete? It's currently loading the hidden div and sending results as soon as I click submit. What am I doing wrong?
<?php
$name = $_POST['name'];
$address = $_POST['address'];
$city = $_POST['city'];
$state = $_POST['state'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$name = stripslashes($name);
$address = stripslashes($address);
$city = stripslashes($city);
$state = stripslashes($state);
$phone = stripslashes($phone);
$email = stripslashes($email);
$to = 'myemail#thisismywebsite.com ' . ', ';
$to .= $Email;
$from = "$Email ";
$subject = 'Look and Learn: Applicant';
$message = <<<EOF
<html>
<body bgcolor="#FFFFFF">
<b>Look and Learn: Applicant</b><br /><br />
<b>Name:</b> $name<br />
<b>Address:</b> $address / $city, $state<br />
<b>Phone:</b> $phone<br />
<b>Email:</b> $email<br />
</body>
</html>
EOF;
//end of message
// Additional headers
$headers .= 'From: Razor Chic of Atlanta <info#thebrlab.com>' . "\r\n";
$headers .= "Content-type: text/html\r\n";
$to = "$to";
mail($to, $subject, $message, $headers);
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Sign Up</title>
<link rel="stylesheet" href="css/sign-up.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function() {
$('#thankyou').show();
$("#hidden1").html($("#thankyou").html());
});
});
</script>
<script>
$('#myContact').submit(function () {
$.each($('#myContact .notShouldBeBlank'), function()
{
if($(this).val() == ''){
$(this).after('<span class="error">This field is required.</span>');
}
});
// Other groups validated here
}
</script>
</head>
<body style="overflow: hidden; overflow-x: hidden; overflow-y: hidden;">
<div id="wrap">
<div id="hidden1"></div>
<div style="font-size: 18px; font-weight: bold; font-family: Verdana, Geneva, sans-serif;">
Sign-Up: Look And Learn Class
</div>
<br>
<form id="form" action="" name="myContact" onSubmit="return validateForm()" method="post" enctype="multipart/form-data">
<div>
<label>
<span>Name: *</span><br>
<input name="name" type="text" size="64" placeholder="Name">
</label>
</div>
<div>
<table width="100%" >
<tr>
<td width="230">
<label>
<span>Address: *</span><br>
<input placeholder="Address" size="100" type="text" name="address" maxlength="100">
</label>
</td>
<td width="160">
<label>
<span>City *</span><br>
<input placeholder="City" name="city" type="text" id="city" maxlength="100" />
</label>
</td>
<td width="189">
<label>
<span>State *</span><br>
<input placeholder="State" name="city" type="text" id="city" maxlength="3" />
</label>
</td>
</tr>
</table>
</div>
<div>
<label>
<span>Phone: *</span><br>
<input placeholder="Phone" size="64" type="text" name="phone">
</label>
</div>
<div>
<label>
<span>Email: *</span><br>
<input placeholder="Email address" size="64" type="email" name="email">
</label>
</div>
<div>
<button name="submit" type="submit" id="submit">S I G N U P</button>
</div>
</form>
<p>Note: * Fields are required</p>
</div>
<!---- THANK YOU---->
<?php
if($sent){
echo '<div id="thankyou" style="display:block;">';
}
else{
echo '<div id="thankyou" style="display:none;">';
}
?>
<!---- PAY BEGINS ---->
<div id="paynow1-wrapper">
<div id="paynow1">
<form method="post" action="https://www.paypal.com/cgi-bin/webscr">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<input type="hidden" name="business" value="Razorchicofatlanta#gmail.com">
<input type="hidden" name="item_name" value="Look and Learn: Deposit">
<input type="hidden" name="amount" value="100.00">
<input type="hidden" name="return" value="http://thebrlab.com/razor-chic-of-atlanta/thank-you.html">
<input type="hidden" name="undefined_quantity" value="1">
<input style="background: none" onMouseOver="this.src='images/pay-now-up.png'" onMouseOut="this.src='images/pay-now-down.png'" type="image" src="images/pay-now-down.png" height="41" width="141" border="0" alt="Pay Now" class="button">
</form>
</div>
</div>
<!---- PAY ENDS ---->
<!---- PAY BEGINS ---->
<div id="paynow2-wrapper">
<div id="paynow2">
<form method="post" action="https://www.paypal.com/cgi-bin/webscr">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<input type="hidden" name="business" value="Razorchicofatlanta#gmail.com">
<input type="hidden" name="item_name" value="Look and Learn: Balance">
<input type="hidden" name="amount" value="99.00">
<input type="hidden" name="return" value="http://thebrlab.com/razor-chic-of-atlanta/thank-you.html">
<input type="hidden" name="undefined_quantity" value="1">
<input style="background: none" onMouseOver="this.src='images/pay-now-up.png'" onMouseOut="this.src='images/pay-now-down.png'" type="image" src="images/pay-now-down.png" height="41" width="141" border="0" alt="Pay Now" class="button">
</form>
</div>
</div>
<!---- PAY ENDS ---->
<!---- PAY BEGINS ---->
<div id="paynow3-wrapper">
<div id="paynow3">
<form method="post" action="https://www.paypal.com/cgi-bin/webscr">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<input type="hidden" name="business" value="Razorchicofatlanta#gmail.com">
<input type="hidden" name="item_name" value="Look and Learn: Full Payment">
<input type="hidden" name="amount" value="199.00">
<input type="hidden" name="return" value="http://thebrlab.com/razor-chic-of-atlanta/thank-you.html">
<input type="hidden" name="undefined_quantity" value="1">
<input style="background: none" onMouseOver="this.src='images/pay-now-up.png'" onMouseOut="this.src='images/pay-now-down.png'" type="image" src="images/pay-now-down.png" height="41" width="141" border="0" alt="Pay Now" class="button">
</form>
</div>
</div>
<!---- PAY ENDS ---->
<img src="images/thank-you/look-and-learn1.png" />
</div>
<!---- THANK YOU---->
</body>
</html>
Your form ID is "form", not "myContact". Change form id to myContact.
Then you have 2 "onsubmit" events, one in jQuery and the other inline (onSubmit). Try to merge them into one to avoid unexpected behaviors.
Also, make sure you return false on your submit event function if the validation fails, so the submit is halted.
Update 1
JavaScript:
$('#myContact').submit(function () {
$.each($('#myContact .notShouldBeBlank'), function()
{
if($(this).val() == ''){
$(this).after('<span class="error">This field is required.</span>');
return false;
}
});
/* Uncomment the line below if you really have a validateForm() function */
// return validateForm()
}
HTML:
<form id="myContact" action="" name="myContact" method="post" enctype="multipart/form-data">

Categories

Resources