i want to parse input data to razorpay script. i am new in php because basically i am mobile app developer. this is my first try in php. i tried post methode also. i donot know where i do mistake in this code. i want to pass email to razorpay script field
<div class="form-filde">
<form action="contact_us.php" method="post" >
<div class="row">
<div class="col-sm-6">
<div class="input-box">
<input type="text" placeholder="Name" data-validation="required" name="name" >
</div>
<div class="input-box">
<input type="text" placeholder="Email" data-validation="required" name="email" >
</div>
<div class="input-box">
<input type="text" placeholder="Subject" data-validation="required" name="subject" >
</div>
</div>
<div class="col-sm-6">
<div class="input-box">
<textarea placeholder="Message" name="message"></textarea>
</div>
</div>
<div class="col-sm-12">
<div class="submit-box">
<input type="submit" value="SEND" class="btn">
</div>
</div>
</div>
<script
src="https://checkout.razorpay.com/v1/checkout.js"
data-key="my key"
data-amount="100000"
data-buttontext="Enrol Now to Get 10% Spot Registration Discount"
data-name="ssss.com"
data-description="Android Training Courses"
data-image="https://some.com/itrain/images/logo.png"
data-theme.color="#3276B1"
data-prefill.email=document.getElementById('email').value
></script>
</form>
</div>
Someone help me on how to work on this.
Change :
<input type="text" placeholder="Email" data-validation="required" name="email" >
With
<input type="text" placeholder="Email" data-validation="required" name="email" id="email" >
Update -
Try with below one -
<div class="form-filde">
<form action="contact_us.php" method="post" id="frm_container">
<div class="row">
<div class="col-sm-6">
<div class="input-box">
<input type="text" placeholder="Name" data-validation="required" name="name" >
</div>
<div class="input-box">
<input type="text" placeholder="Email" data-validation="required" name="email" id="email">
</div>
<div class="input-box">
<input type="text" placeholder="Subject" data-validation="required" name="subject" >
</div>
</div>
<div class="col-sm-6">
<div class="input-box">
<textarea placeholder="Message" name="message"></textarea>
</div>
</div>
<div class="col-sm-12">
<div class="submit-box">
<input type="submit" value="SEND" class="btn">
</div>
</div>
</div>
<script>
var email_val = document.getElementById('email').value;
document.querySelector("#email").addEventListener("change",setEmail);
function setEmail(e){
try{
var elem = document.getElementById("razorpay_script");
var elem2 = document.querySelector(".razorpay-payment-button");
document.querySelector("#frm_container").removeChild(elem);
document.querySelector("#frm_container").removeChild(elem2);
}catch(err){
console.log(err);
}
email_val = e.target.value;
addScript(email_val);
//
}
function addScript(email_val) {
var s = document.createElement( 'script' );
s.setAttribute( 'src', "https://checkout.razorpay.com/v1/checkout.js" );
s.setAttribute( 'id', "razorpay_script" );
s.setAttribute( 'data-key', "my key" );
s.setAttribute( 'data-amount', "100000" );
s.setAttribute( 'data-buttontext', "Enrol Now to Get 10% Spot Registration Discount" );
s.setAttribute( 'data-name', "ssss.com" );
s.setAttribute( 'data-description', "Android Training Courses" );
s.setAttribute( 'data-image', "https://some.com/itrain/images/logo.png" );
s.setAttribute( 'data-theme.color', "#3276B1" );
s.setAttribute( 'data-prefill.email', email_val );
document.querySelector("#frm_container").appendChild( s );
}
</script>
<!-- <script
src="https://checkout.razorpay.com/v1/checkout.js"
data-key="my key"
data-amount="100000"
data-buttontext="Enrol Now to Get 10% Spot Registration Discount"
data-name="ssss.com"
data-description="Android Training Courses"
data-image="https://some.com/itrain/images/logo.png"
data-theme.color="#3276B1"
data-prefill.email= email_val
></script> -->
</form>
</div>
hope it helps :)
Related
I have a form that posts using Ajax, I also want to set an HTML5 required attribute on some input fields, but this stops working as expected with Ajax.
So I did the following:
$("body").on("click",".register-button",function(e){
e.preventDefault();
if($('#registerform')[0].checkValidity()){
registerform = $(".register-form").serialize();
$.ajax({
type:'post',
url:"includes/registreren.php",
data:({registerform: registerform}),
success:function(data){
var content = $( $.parseHTML(data) );
$( "#registerresult" ).empty().append( content );
}
});
}else{
}
});
This way the form is not posted when empty, but I also don't get any notifications that fields are empty like I would get when only using HTML to post.
I also tried logging the validity like so:
$("body").on("click",".register-button",function(e){
e.preventDefault();
$check = $('#registerform')[0].checkValidity();
console.log($check);
registerform = $(".register-form").serialize();
$.ajax({
type:'post',
url:"includes/registreren.php",
data:({registerform: registerform}),
success:function(data){
var content = $( $.parseHTML(data) );
$( "#registerresult" ).empty().append( content );
}
});
});
Which shows false in my console when empty. So the code works, why are the HTML5 notifications not shown? I remember doing something similar in the past and I didn't have to add any custom error messages then, it just worked.
This is my HTML markup:
<form id="registerform" class="register-form" method="post">
<div class="row">
<div class="col-md-6">
<input type="text" name="voornaam" placeholder="Voornaam" required>
</div>
<div class="col-md-6">
<input type="text" name="achternaam" placeholder="Achternaam" required>
</div>
<div class="col-md-12">
<input type="text" name="bedrijf" placeholder="Bedrijfsnaam (optioneel)">
</div>
<div class="col-md-6">
<input type="text" name="telefoon" placeholder="Telefoonnummer" required>
</div>
<div class="col-md-6">
<input type="text" name="email" placeholder="E-mail" required>
</div>
<div class="col-md-3">
<input type="text" name="huisnummer" id="billing_streetnumber" placeholder="Huisnummer" required>
</div>
<div class="col-md-3">
<input type="text" name="tussenvoegsel" placeholder="Tussenvoegsel" required>
</div>
<div class="col-md-6">
<input type="text" name="postcode" id="billing_postcode" placeholder="Postcode" required>
</div>
<div id="postcoderesult" class="col-lg-12">
<div class="row">
<div class="col-md-6">
<input type="text" name="straat" placeholder="Straatnaam" readonly required>
</div>
<div class="col-md-6">
<input type="text" name="woonplaats" placeholder="Woonplaats" readonly required>
</div>
</div>
</div>
<div class="col-md-6">
<input type="password" name="password" placeholder="Wachtwoord (minimaal 6 tekens)" required>
</div>
<div class="col-md-6">
<input type="password" name="confirmpassword"placeholder="Herhaal wachtwoord" required>
</div>
<div id="registerresult">
</div>
</div>
<button type="button" name="submit" class="register-button">Account aanmaken</button>
</form>
What am I missing?
I've added the snippet inside the tag:
<script src='https://www.google.com/recaptcha/api.js?render=EXAMPLE123456789-_987654321'></script>
After that, I added this javascript callback inside each form on the site: (grecaptcha above the submit button).
<form accept-charset="UTF-8" target="_blank" action="https://website.infusionsoft.com/app/form/process/1234567890" class="infusion-form" id="inf_form_1234567890" method="POST">
<input name="inf_form_xid" type="hidden" value="1234567890" />
<input name="inf_form_name" type="hidden" value="First Last.com&#a;Web Form submitted&#a;HOME PAGE&#a;First / Last" />
<input name="infusionsoft_version" type="hidden" value="1.00.00.1" />
<div>
<div>
<p class ="white">Register Now</p>
</div>
</div>
<div>
<div> </div>
</div>
<div class="user-fields">
<div class="infusion-field">
<label for="inf_field_FirstName_home">First Name *</label>
<input class="infusion-field-input" id="inf_field_FirstName" name="inf_field_FirstName" placeholder="First Name *" type="text" required />
</div>
<div class="infusion-field">
<label for="inf_field_Email_home">Email *</label>
<input class="infusion-field-input" id="inf_field_Email" name="inf_field_Email" placeholder="Email *" type="text" required />
</div>
</div>
<div>
<div> </div>
</div>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('EXAMPLE123456789-_987654321', {action: 'homepage'})
.then(function(token) {
// Verify the token on the server.
});
});
</script>
<div class="infusion-submit">
<button class="infusion-btn" type="submit">Submit!</button>
</div>
</form>
<script type="text/javascript" src="https://website.infusionsoft.com/app/webTracking/getTrackingCode"></script>
<script type="text/javascript" src="https://website.infusionsoft.com/app/timezone/timezoneInputJs?xid=12345678900987654321"></script>
Is this the correct way?
I'm trying to post a pseudo with ajax like in the title , i think actually with my code i send no informations to my php file.
so this is the code :
$('#send').click(function(){
var pseudo = $('#psd').val();
});
function recuppoint() {
$.post('point.php',{pseudo: pseudo} ,function(data) {
console.log('['+data + ']');
$('.infos2').html(data);
});
}
setInterval(recuppoint, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="logForm" action="">
<div class="field">
<label class="field-label" for="mailconnect">Votre mail</label>
<input class="field-input"type="email" name="mailconnect" id="email" />
</div>
<div class="field" id="psd">
<label class="field-label" for="client">pseudo client</label>
<input class="field-input" type="text" name="pseudo" id="pseudo" />
</div>
<div class="field">
<label class="field-label" for="mdpconnect">mdp</label>
<input class="field-input" type="password" name="mdpconnect" id="password" />
</div>
<button id="send" class="send"name="formsubscribe">begin</button>
</form>
<div>
<div id="infos" class="infos" align="center"> </div>
<div id="infos2" class="infos2" align="center"> </div>
</div>
So guys how can i solve the problem with the var pseudo ?
thank you
Your div element with id "psd", doesnt have value. If you want to send html use .html(); If you want to get only input values so try some like this:
var x = $('input[name=nameOfInput]').val();
Then you should send it with ajax.
your ajax call should be like this .
you can not access the input field with its parent id as you did $('#psd').val();
but you can access it value with its id itself like this
<input class="field-input" type="text" name="pseudo" id="pseudo" />
$('#send').on('click', function(){
var pseudo = $('#pseudo').val();
$.ajax({
url:'point.php',
type:'POST',
data:{ ele: pseudo},
success:function(data){
$('.infos2').html(data);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="logForm" action="">
<div class="field">
<label class="field-label" for="mailconnect">Votre mail</label>
<input class="field-input"type="email" name="mailconnect" id="email" />
</div>
<div class="field" id="psd">
<label class="field-label" for="client">pseudo client</label>
<input class="field-input" type="text" name="pseudo" id="pseudo" />
</div>
<div class="field">
<label class="field-label" for="mdpconnect">mdp</label>
<input class="field-input" type="password" name="mdpconnect" id="password" />
</div>
<button id="send" class="send"name="formsubscribe">begin</button>
</form>
<div>
<div id="infos" class="infos" align="center"> </div>
<div id="infos2" class="infos2" align="center"> </div>
</div>
I'm trying to code this form in sharing.html so that when one is done putting in information and want to add more contacts, they can click on "add another contact" but when I tried to write out the code, the dreamweaver I was using said that there's a error in Javascript. I don't know how I can fix this error: (the script is almost at the bottom)
<div class="recordsbox">
<h1>Sharing Center</h1>
<p>Please enter the contact information that you want to share.</p>
<div id="shareform">
<form id="share" method="POST">
<div class="notifyfield">
<label>Who is this person?</label>
<input type="text">
</div>
<div class="notifyfield">
<label>Email Address:</label>
<input type="email" >
</div>
<div class="notifyfield">
<label>Phone Number:</label>
<input type="tel" >
</div>
</form>
</div>
<div class="addcontact">
<input type="button" value="Add another contact?" onClick="addForm('shareform');">
</div>
<script>
var shareform = 0;
function addForm(divName) {
shareform++;
var newform = document.createElement('div');
newform.innerHTML = '<div id="shareform'+shareform+'">
<form id="share" method="POST">
<div class="notifyfield">
<label>Who is this person?</label>
<input type="text">
</div>
<div class="notifyfield">
<label>Email Address:</label>
<input type="email" >
</div>
<div class="notifyfield">
<label>Phone Number:</label>
<input type="tel" >
</div>
</form>
</div>
';
document.getElementById(divName).appendChild(newform);
shareform++;
}
</script>
<div class="nextbutton">
Next
</div>
</div>
I based this code on that tutorial: http://www.randomsnippets.com/2008/02/21/how-to-dynamically-add-form-elements-via-javascript/.
Also you can check out full code at http://hamzakhan.name/dev/eric/options_innerpage/sharing.html
For a quicker look, here is the script in question:
<script>
var shareform = 0;
function addForm(divName) {
shareform++;
var newform = document.createElement('div');
newform.innerHTML = '<div id="shareform'+shareform+'">
<form id="share" method="POST">
<div class="notifyfield">
<label>Who is this person?</label>
<input type="text">
</div>
<div class="notifyfield">
<label>Email Address:</label>
<input type="email" >
</div>
<div class="notifyfield">
<label>Phone Number:</label>
<input type="tel" >
</div>
</form>
</div>
';
document.getElementById(divName).appendChild(newform);
shareform++;
}
</script>
Here is the new code:
var shareform = 0;
function addForm(divName) {
shareform++;
var newform = document.createElement('div');
newform.innerHTML = '<div id="shareform'+shareform+'"><form id="share" method="POST"><div class="notifyfield2"><div class="sharefield"><label>Who is this person?</label><input type="text"></div></div><div class="notifyfield"><label>Email Address:</label><input type="email" ></div><div class="notifyfield"><label>Phone Number:</label><input type="tel" ></div></form><hr class="greenline"></div>';
document.getElementById(divName).appendChild(newform);
shareform++;
}
You need to delete all invisible characters. You can't "newline" string.
I have to create 3 input text boxes for getting user input about names and email addresses.
I have to create it dynamically, i.e. as the user clicks on the email input field a new line of all the three element supposed to be created.
This is the code for one line with the 3 inputs:
<div class='row' id="inputcontainer">
<div class="form-group clearfix" >
<div class="col-md-2 col-md-offset-2">
<div class="form-text-field first-name">
<label>First name</label>
<input type="text" id="firstName10" class="signup-input" name="" placeholder="">
</div>
</div>
<div class="col-md-2">
<div class="form-text-field last-name">
<label>Last name</label>
<input type="text" id="lastName0" class="signup-input" name="" placeholder="optional">
</div>
</div>
<div class="col-md-4">
<div class="form-text-field email">
<div>
<label>Email</label>
<input type="text" data-index="0" id="inputMail0" class="signup-input text-value " name="email[0]" placeholder="e.g. example#url.com"/>
<span class="common-sprite disNone sign-up-cross first"></span>
</div>
</div>
</div>
</div>
</div>
How to create it dynamically ?
I'm using the following code for cloning and it's clone it several times instead 1
maxIndex = 0;
$('form').on('input','.email',function(){
$(this).parent().find('.common-sprite').removeClass('disNone');
var lastmail = $(this); if(($(this).val().length > 0)&&(lastmail.data('index') == maxIndex)) {
var count = $('.row.inputcontainer').length;
console.log(count);
maxIndex++;
var clone = $('#template').clone(true).attr('id', '');
clone.find('.firstName[id=firstName'+(maxIndex-1)+']').attr('id', 'firstName' + maxIndex).attr('name', 'first[' + maxIndex +']').addClass('signup-input firstName').val('');
clone.find('.lastName[id=lastName'+(maxIndex-1)+']').attr('id', 'lastName' + maxIndex).attr('name', 'last[' + maxIndex +']').addClass('signup-input lastName').val('');
clone.find('.email[id=inputMail'+(maxIndex-1)+']').attr('id', 'inputMail' + maxIndex).attr('name', 'email[' + maxIndex +']').data('index', maxIndex).addClass('signup-input text-value email').val('');
$('.inputcontainer').append(clone);
}
something like this? i used .blur() to trigger the dynamic adding so that if you type something in the email input and you click outside of it, then the next 3 lines of information will show up. i also added some classes to help jquery find elements faster and more reliably. i used clone() to recreate the same structure of the 3 lines every time.
$(document).ready(function() {
$('.email').on('blur', function() {
if($(this).val().length > 0) {
var count = $('.row').length;
console.log(count);
var clone = $('#template').clone(true).attr('id', '');
clone.find('.firstName').attr('id', 'firstName' + count).val('');
clone.find('.lastName').attr('id', 'lastName' + count).val('');
clone.find('.email').attr('id', 'inputMail' + count).val('');
$('body').append(clone);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='row inputcontainer' id="template">
<div class="form-group clearfix" >
<div class="col-md-2 col-md-offset-2">
<div class="form-text-field first-name">
<label>First name</label>
<input type="text" id="firstName0" class="signup-input firstName" name="" placeholder=""/>
</div>
</div>
<div class="col-md-2">
<div class="form-text-field last-name">
<label>Last name</label>
<input type="text" id="lastName0" class="signup-input lastName" name="" placeholder="optional"/>
</div>
</div>
<div class="col-md-4">
<div class="form-text-field email">
<div>
<label>Email</label>
<input type="text" data-index="0" id="inputMail0" class="signup-input text-value email" name="email[0]" placeholder="e.g. example#url.com"/>
<span class="common-sprite disNone sign-up-cross first"></span>
</div>
</div>
</div>
</div>
</div>
hope this helps!
Is this something similar to what you would like?
$(document).on("blur",".add",function()
{
$("#inputcontainer").append("<br />");
$("#inputcontainer").append("First Name <input type='text' class='signup-input' name='' placeholder='' /><br />");
$("#inputcontainer").append("last Name <input type='text' class='signup-input' name='' placeholder='optional' /><br />");
$("#inputcontainer").append("Email Address <input type='text' data-index='0' class='signup-input text-value add' name='email[0]' placeholder='e.g. example#url.com' /><br />");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='row' id="inputcontainer">
<div class="form-group clearfix t" >
<div class="col-md-2 col-md-offset-2">
<div class="form-text-field first-name">
<label>First name</label>
<input type="text" id="firstName10" class="signup-input" name="" placeholder="">
</div>
</div>
<div class="col-md-2">
<div class="form-text-field last-name">
<label>Last name</label>
<input type="text" id="lastName0" class="signup-input" name="" placeholder="optional">
</div>
</div>
<div class="col-md-4">
<div class="form-text-field email">
<div>
<label>Email</label>
<input type="text" data-index="0" id="inputMail0" class="signup-input text-value add" name="email[0]" placeholder="e.g. example#url.com"/>
<span class="common-sprite disNone sign-up-cross first"></span>
</div>
</div>
</div>
</div>
</div>
Type into the email textbox then leave to create the new textboxes.