this question has been asked but I haven't found a working solution.
I have 2 forms. The first is sending datas to the database (form2). The second one is uploading a photo (form1).
I would need to save the path of the uploaded picture and store it in a text input in form1 and after send it with the form2 datas. Do you have any tips? It is possible without JQuery using just Php?
I have a solution with JQuery but it is not working.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
function submitform()
{
var name=$('#name').val();
$('#variable').val(name); // set the value of name field to the hidden field
$('form#form1').submit(); // submit the form
}
</script>
Create a new product
<form action="../handlers/processNewProduct.php" id="form2">
<div class="mb-3">
<label for="productname" class="form-label">Product Name</label>
<input type="text" class="form-control" id="productname" name="productname" placeholder="Product Name">
</div>
<div class="mb-3">
<label for="description" class="form-label">Description</label>
<input type="text" class="form-control" id="description" value="xxxxxxxxx" name="description" placeholder="Description">
</div>
<div class="mb-3">
<label for="pricelist" class="form-label">Price list</label>
<input type="number" class="form-control" id="pricelist" name="pricelist" placeholder="Price">
</div>
<input type='text' name='variable' id='variable' value=''>
<button type="" class="btn btn-primary">Insert data</button>
</form>
<form action="../handlers/processUploadProductPicture.php" method="post" enctype="multipart/form-data" id="form1" onsubmit="submitform()">
Select image to upload:
<input type='file' name='fileToUpload' id='name'>
<input type='submit' value='Upload Image' id='upload'>
</form>
Related
I am using a jQuery function which work to hide placeholder text on form focus, this functions works perfectly on the form in main page (Index.php), however it is not working on other forms which are designed using bootstrap (Members.php) as an example. I have tried to see where is the issue but it seems not working. I don't know if version incompatibility of both Bootstrap and jQuery caused this issue?!
I am using
- jquery-3.4.1.min.js
- bootstrap-3.3.7
=========================Backend.js=================================
// here is the jQuery function
$(function(){
'use strict';
// Hide Placeholder On Form Focus
$('[placeholder]').focus(function (){
$(this).attr('data-text',$(this).attr('placeholder'));
$(this).attr('placeholder', '');
}).blur(function (){
$(this).attr('placeholder',$(this).attr('data-text'));
});
});
==============================Index.php=====================================
// Here is the form where the jQuery function works fine
<form class="login" action="<?php echo $_SERVER['PHP_SELF']?>" method = "POST">
<h4 class="text-center">Admin Login</h4>
<input class = "form-control input-lg" type="text" name="user" placeholder="Username" autocomplete="off"/>
<input class = "form-control input-lg" type="password" name="pass" placeholder="Password" autocomplete="new-password"/>
<input class = "btn btn-lg btn-primary btn-block" type="submit" value="Login" />
</form>
===============================Members.php===================================
// Function doesn't work on this form
<div class="container">
<form class="form-horizontal" action="?do=Insert" method="POST">
<!-- start username field -->
<div class="form-group">
<label class="col-sm-2 control-label" >Username</label>
<div class="col-sm-8">
<input type="text" name="username" class="form-control" autocomplete="off" required = "required" placeholder="Enter User Name" />
</div>
</div>
</form>
</div>
var input = $("input");
input.focus(function(){
$(this).attr("placeholder", " ")
});
input.blur(function(){
$(this).attr("placeholder", "example")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="example">
I'm trying to duplicate 4 input text. For example I want to duplicate 'Produk Simpanan Saham', then only 4 input on 'Produk Simpanan Saham' div will be duplicated. I already tried a few methods using jQuery but it seem doesn't work.
<form action="" method="post" class="form-horizontal">
<br><br>
<div class="form-group">
Upload File :
<input type="file" name="file">
</div>
<div class="saham">
<div class="w3-container w3-black">
<h3>
<center>Produk Simpanan Saham</center>
</h3>
</div>
<label for="kp_produk">Kode Produk :</label>
<input type="text" name="kp_produk" class="form-control">
<br>
<label for="produk_saham">Produk :</label>
<input type="text" name="produk_saham" class="form-control">
<br>
<label for="bunga_saham">Bunga :</label>
<input type="text" name="bunga_saham" class="form-control">
<br>
<label for="ket_saham">Keterangan :</label>
<input type="text" name="ket_saham" class="form-control">
</div>
<div class="harian">
<div class="w3-container w3-black">
<h3>
<center>Produk Simpanan Harian</center>
</h3>
</div>
<label for="kp_harian">Kode Produk :</label>
<input type="text" name="kp_harian" class="form-control">
<br>
<label for="produk_harian">Produk :</label>
<input type="text" name="produk_harian" class="form-control">
<br>
<label for="bunga_harian">Bunga :</label>
<input type="text" name="bunga_harian" class="form-control">
<br>
<label for="ket_harian">Keterangan :</label>
<input type="text" name="ket_harian" class="form-control">
</div>
you mush have blueprint of field first like
var blueprint= '<div class="saham">'+
'<div class="w3-container w3-black">'+
'<h3>'+
'<center>Produk Simpanan Saham</center>'+
'</h3>'+
'</div>'+
'<label for="kp_produk">Kode Produk :</label>'+
'<input type="text" name="kp_produk[]" class="form-control">'+
'<br>'+
......
used [] for all name field to get array request when you send form to server
example :
'<input type="text" name="kp_produk[]" class="form-control">'+
and make button add like (jquery) example
<button onclick="$('form').append(blueprint)">add</button>
just use
var dom=$($('.saham')[0]).clone();
//copy dom
$('.form-horizontal').html(dom):
//paste dom
dont forget to add [] on name tag dom input to set data send to array, because if you not set. data with key kp_produk value is last tag name with name kp_produk
if you use [] (kp_product[]) data will set to array
kp_product=['anu1',anu2];
I have a HTML registration form, that adds users to the content management system using PHP. I need to integrate this into my a Customer Relationship Management tool (AgileCRM).
This code here will allow a user to register, which will submit the form and create the user using PHP.
<?php
if ($input->post->submit) {
//create user
}
?>
<form action='./' accept-charset='UTF-8' autocomplete='off' method='post'>
<input type='text' name='username' placeholder='Username'>
<input type='text' name='email' placeholder='Email'>
<input type='password' name='password' placeholder='Password'>
<button type='submit' name='submit' value='register'>Register</button>
</form>
Then this code will do what I want in the CRM
<link href="https://s3.amazonaws.com/agilecrm/forms/v1/agile-form-min.css" rel="stylesheet">
<form class="form-view " id="agile-form" action="https://agiledomain.agilecrm.com/formsubmit" style="max-width:450px;" method="post">
<fieldset>
<!-- Form Name -->
<legend class="agile-hide-formname">Registration Form</legend>
<p class="agile-form-description"></p>
<div style="display: none; height: 0px; width: 0px;">
<input type="hidden" id="_agile_form_name" name="_agile_form_name" value="Registration Form">
<input type="hidden" id="_agile_domain" name="_agile_domain" value="AGILECRMDOMAIN">
<input type="hidden" id="_agile_api" name="_agile_api" value="AGILECRMAPIKEY">
<input type="hidden" id="_agile_redirect_url" name="_agile_redirect_url" value="#">
<input type="hidden" id="_agile_document_url" name="_agile_document_url" value="">
<input type="hidden" id="_agile_confirmation_msg" name="_agile_confirmation_msg" value="Thank you for signing up!">
<input type="hidden" id="_agile_form_id_tags" name="tags" value="">
<input type="hidden" id="_agile_form_id" name="_agile_form_id" value="AGILECRMID">
</div>
<!-- Text input-->
<div class="agile-group required-control">
<label class="agile-label" for="username">Username<span class="agile-span-asterisk"> *</span></label>
<div class="agile-field-xlarge agile-field">
<input maxlength="250" id="username" name="Username" type="text" placeholder="" class="agile-height-default" required="">
</div>
<div class="agile-custom-clear"></div>
</div>
<!-- Text input-->
<div class="agile-group required-control">
<label class="agile-label" for="email">Email<span class="agile-span-asterisk"> *</span></label>
<div class="agile-field-xlarge agile-field">
<input maxlength="250" id="email" name="email" type="email" placeholder="" class="agile-height-default" required="">
</div>
<div class="agile-custom-clear"></div>
</div>
<!-- Password input-->
<div class="agile-group required-control">
<label class="agile-label" for="password">Password Input<span class="agile-span-asterisk"> *</span></label>
<div class="agile-field-xlarge agile-field">
<input maxlength="250" id="password" name="password" type="password" placeholder="" class="agile-height-default" required="">
</div>
<div class="agile-custom-clear"></div>
</div>
<!--recaptcha aglignment-->
<!-- Button -->
<div class="agile-group">
<label class="agile-label"> </label>
<div class="agile-field agile-button-field">
<button type="submit" class="agile-button">Submit</button>
<br><span id="agile-error-msg"></span>
</div>
</div>
</fieldset>
</form>
<script type="text/javascript">
(function(a){var b=a.onload,p=true;isCaptcha=false;if(p){a.onload="function"!=typeof b?function(){try{_agile_load_form_fields()}catch(a){}}:function(){b();try{_agile_load_form_fields()}catch(a){}}};var formLen=document.forms.length;for(i=0;i<formLen;i++){if(document.forms.item(i).getAttribute("id")== "agile-form"){a.document.forms.item(i).onsubmit=function(a){a.preventDefault();try{_agile_synch_form_v5(this)}catch(b){this.submit()}}}}})(window);
</script>
So basically I'd like to join the functionality of these two forms together, so submit the form to AgileCRM and also run the PHP code.
You can do this with jQuery ajax
and give your first form an id then it will be submitted after agile form.
$('#agile-form').submit(function(){
// show that something is loading
$('#response').html("<b>Loading response...</b>");
/*
* 'post_receiver.php' - where you will pass the form data
* $(this).serialize() - to easily read form data
* function(data){... - data contains the response from post_receiver.php
*/
$.ajax({
type :'POST',
url : "https://agiledomain.agilecrm.com/formsubmit",
async: false,
data: $(this).serialize()
})
.done(function(data){
//give your first form an id and submit it for eg:firsForm
$('#firstForm').submit();
})
.fail(function() {
// just in case posting your form failed
alert( "Posting failed." );
});
// to prevent refreshing the whole page page
return false;
});
I am building a simple form script that collects a users email and returns a PIN.
The input sits in standard HTML below:
<p>
<form class="form-inline" role="form" method="POST">
<div class="form-group">
<label class="sr-only" for="srEmail">Email address</label>
<input type="email" name="srEmail" class="form-control input-lg" id="srEmail" placeholder="Enter email">
</div>
<button type="submit" name="srSubmit" class="btn btn-default btn-lg">Generate PIN</button>
</form>
</p>
I have the following if statement that checks the database to see if the email already exists, and if the user would like a PIN reminder.
if($num_rows != 0) {//if email found in table
?>
Email already registered, would you like a PIN reminder?
<form method="POST" action="">
<input type="submit" name="srSend" value="Click here to get pin reminder" />
<input type="hidden" name="srEmail" value="<?php echo strtolower($email);?>" />
</form>
<?php
exit;
}
At the moment, this returns the result to the user as a new page; how do I put this in the actual HTML of the body page, so it would actually appear below the original form input in a new <p> element?
This is a piece of cake with jquery.post
include the jquery library in your html head and you'll need a short script to get the php content by ajax
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$('#yourForm').submit(function(e){
e.preventDefault();
var data=$('#yourForm').serialize();
$.post('yourphp.php',data,function(html){
$(body).append(html);
});
});
});
</script>
</head>
<body>
<p>
<form id="yourForm" class="form-inline" role="form" method="POST">
<div class="form-group">
<label class="sr-only" for="srEmail">Email address</label>
<input type="email" name="srEmail" class="form-control input-lg" id="srEmail" placeholder="Enter email">
</div>
<button type="submit" name="srSubmit" class="btn btn-default btn-lg">Generate PIN</button>
</form>
</p>
</body>
You could able to achieve that without ajax too. Simply use a hidden iframe in your main page, then set the target attribute of your form to the iframe as follows:
<form method="post" action="page.php" target="myIframe">
.....
</form>
<p id="theResultP"></p>
<iframe src="#" name="myIframe" style="visibility: hidden"></iframe>
The question now, How could you make the page loaded in the iframe "page.php" to interact with the opener page to update the p. This may be done as follow:
//page.php
<script>
result = parent.document.getElementById('theResultP');
result.innerHtml = "<b>The message you want</b>"
</script>
I dont know if I get what you asking for,but this is my solution :
<p>
<form class="form-inline" role="form" method="POST">
<div class="form-group">
<label class="sr-only" for="srEmail">Email address</label>
<input type="email" name="srEmail" class="form-control input-lg" id="srEmail" placeholder="Enter email">
</div>
<button type="submit" name="srSubmit" class="btn btn-default btn-lg">Generate PIN</button>
</form>
</p>
<?php
if (isset($message)){
<p><?php print $message ?></p>
?>
<?php
}
?>
and in top of your file write something like this :
<?php
if($_post['srSend']){
$message='write your message here';
}
?>
i do have multiple text boxes called first name,last name,phone no and so on.. and i want to clear/refresh the input typed in it on button click called as refresh or clear.the problem is that the input in these text boxes are not getting refreshed because the data in it is coming from other page and it is getting refreshed when we type some thing in it
my code is as follows:
<div class="control-group">
<input value="<?php echo $model['pros']['oppid'] ?>" name="oppid" type="hidden" id="prospectid" />
<label class="control-label">First Name </label>
<div class="controls">
<input type="text" name="f_name" pattern="[-a-zA-Z]+" required="" title="First Name is required" value="<?php echo $model['pros']["f_name"]; ?>" />
</div>
</div>
<div class="control-group">
<label class="control-label">Last Name </label>
<div class="controls">
<input type="text" name="l_name" pattern="[-a-zA-Z]+" required="" title="Last Name is required" value="<?php echo $model['pros']["l_name"];?>" />
</div>
</div>
<div class="control-group">
<label class="control-label">Primary phone </label>
<div class="controls">
<input type="tel" required="" pattern="[-0-9]+" title="Please Enter correct phone" name="pri_phone" value="<?php echo $model['pros']["pri_phone"];?>" />
</div>
</div>
and the button as
<button class="btn">New</button>
please suggest me on this...
use the following code:
$("#elementid").live('click',function(){
$(this).parents('form').find('input[type="text"]').val('');
});
Assuming that your input elements are inside of a form, and so too is your button, you can do this using jQuery:
$('button.btn').click(function(e) {
e.preventDefault();
$(this).parents('form').find('input[type="text"], input[type="tel"]').val('');
});
you can write code in jquery as:
$('#new').live('click',function(){
$('#fname').val('');
$('#lname').val('');
$('#tel').val('');
});
If your button is not within the form you can use the following
$('button.btn').click(function() {
$('.control-group input:not(:submit)').val('');
});
This will reset any type of input within the control-group divs except for submit inputs
If your reset button is within the form then BenM's answer is what you want.
$(".clearform").live('click',function(){
$(this).parents('form').find('input[type="text"], input[type="tel"],input[type="time"],input[type="email"],input[type="number"],input[type="date"],select').val('');
});