So ive been trying to calculate automatically exchange rates with a rate i get from php and send it to a js script. Unfortunates the first field is calculated correctly but the second stops at a limit. ive tried this approach
<fieldset>
<div class="col-12" style="margin-left: -1rem !important;">
<h6 class="py-50" for="paypal">Choose What You Sell</h6>
</div>
<div class="row mb-75">
<div class="col-12 d-flex">
<div class="cursor-pointer d-flex align-items-center">
<label class="btn btn-outline-primary">
<img src="../app-assets/images/pages/btc.png" alt="BTC Logo">
<input type="radio" name="option" onchange="hideB(this)" id="btc" value="BTC" checked>
</label>
</div>
<div class="cursor-pointer pl-1 d-flex align-items-center">
<label class="btn btn-outline-primary">
<img src="../app-assets/images/pages/eth.png" height="30" alt="ETH Logo">
<input type="radio" name="option" onchange="hideA(this)" id="eth" value="ETH">
</label>
</div>
</div>
<hr>
</div>
<div class="row" id="A">
<div class="col-sm-4">
<div class="form-group">
<label for="value_n">Enter Your amount in USD </label>
<input type="text" id="value_btc" name="value_btc" class="form-control required" onkeyup="mult(this.value);" data-validation-regex-regex="([^a-z]*[A-Z]*)*" data-validation-containsnumber-regex="([^0-9]*[0-9]+)+" min="50" max="100000" data-validation-containsnumber-message="Min. $50 Max. $100,000" required placeholder="Enter Number of Your Value">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName12">Amount in BTC</label>
<input type="text" class="form-control" id="btc_rate" name="btc_rate" readonly="readonly" placeholder="Amount in BTC" >
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName12">Amount You will Receive (BTC - ₦ NAIRA)</label>
<input type="text" class="form-control" id="receive_btc" name="receive_btc" readonly="readonly" placeholder="Amount in Naira" >
</div>
</div>
</div>
<div class="row" id="B" style="display:none">
<div class="col-sm-4">
<div class="form-group">
<label for="firstName13">Enter Your amount in USD </label>
<input type="text" id="value_eth" name="value_eth" class="form-control required" onkeyup="mult2(this.value);" data-validation-regex-regex="([^a-z]*[A-Z]*)*" data-validation-containsnumber-regex="([^0-9]*[0-9]+)+" min="50" max="100000" data-validation-containsnumber-message="Min. $50 Max. $100,000" required placeholder="Enter Number of Your Value">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName12">Amount in ETH</label>
<input type="text" class="form-control" id="eth_rate" name="eth_rate" name="eth_rate" readonly="readonly" placeholder="Amount in BTC" >
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="lastName12">Amount You will Receive (ETH - ₦ NAIRA)</label>
<input type="text" class="form-control" id="receive_eth" name="receive_eth" readonly="readonly" placeholder="Amount in BTC" >
</div>
</div>
</div>
im using the js below to calculate the field value for btc and how much the client will recieve:
<script>
function mult(value_btc) {
var btc_rate = "<?php echo $btc_rate; ?>";
<!-- END: Theme JS-->
var x, y ;
x = value_btc / btc_rate ;
y = btc_rate * 4 ;
document.getElementById('btc_rate').value = x;
document.getElementById('receive_btc').value = y;
}
</script>
<script>
function mult2(value_eth) {
var eth_rate = "<?php echo $eth_rate; ?>";
var x, y ;
x = value_eth / eth_rate ;
y = eth_rate * 4 ;
document.getElementById('eth_rate').value = x;
document.getElementById('receive_eth').value = y;
}
</script>
the x values work correctly but the y value stops at a limit.
will really appreciate if someone can help out. thanks in advance
Related
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> Address</label>
<div class="col-sm-3">
<input id="address" class="address" type="text" name="address"
onchange="IsValidAddress(this.form.address.value)" required="required" >
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> Zip Code :</label>
<div class="col-sm-3">
<input id="zipcode" class="zipcode" type="text" name="zipcode" onchange="IsValidZipCode(this.form.zipcode.value)" required="required" >
<br />
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> City</label>
<div class="col-sm-3">
<input class="form-control" name="city" type="text" id="city" required="required" value="">
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> State</label>
<div class="col-sm-3">
<input class="form-control" name="state" type="text" id="state" value="" required ="required">
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> Country</label>
<div class="col-sm-3">
<input class="form-control" name="country" type="text" id="country" value="" required="required">
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"> Fax</label>
<div class="col-sm-3">
<input class="form-control" name="fax" type="text" id="fax" value="" required ="required">
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-6"><i>*</i> Captcha</label>
<div class="col-sm-2">
</div>
<div class="col-sm-3">
<form name="review" ACTION="playing-cards-quote.php" METHOD="POST" onsubmit="return checkform(this);">
<font color="#DD0000"></font> <span id="txtCaptchaDiv" style="background-color:#A51D22;color:#FFF;padding:5px"></span>
<input type="hidden" id="txtCaptcha" />
<input type="text" name="txtInput" id="txtInput" size="15" />
<input type="submit" value="Submit" class="btn1" name="submit" id="send">
</form>
<script type="text/javascript">
function checkform(theform){
var why = "";
if(theform.txtInput.value == ""){
why += "- Security code should not be empty.\n";
}
if(theform.txtInput.value != ""){
if(ValidCaptcha(theform.txtInput.value) == false){
why += "- Security code did not match.\n";
}
}
if(why != ""){
alert(why);
return false;
}
}
//Generates the captcha function
var a = Math.ceil(Math.random() * 9)+ '';
var b = Math.ceil(Math.random() * 9)+ '';
var c = Math.ceil(Math.random() * 9)+ '';
var d = Math.ceil(Math.random() * 9)+ '';
var e = Math.ceil(Math.random() * 9)+ '';
var code = a + b + c + d + e;
document.getElementById("txtCaptcha").value = code;
document.getElementById("txtCaptchaDiv").innerHTML = code;
// Validate the Entered input aganist the generated security code function
function ValidCaptcha(){
var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
var str2 = removeSpaces(document.getElementById('txtInput').value);
if (str1 == str2){
return true;
}else{
return false;
}
}
// Remove the spaces from the entered and generated code
function removeSpaces(string){
return string.split(' ').join('');
}
</script>
</div>
<div class="col-sm-3">
</div>
</div>
<div> </div>
<div class="row">
<div class="form-group">
<div class="col-sm-12">
<center>
</center>
</div>
</div>
</div>
<div> </div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<!---footer---><?php include("include files/footer.php");?>
</body>
</html>
my javascript code is written above html code but in this code i m writing below html code ......
does it effect my calling my function of captcha
does not show me error like security does not match?
if i click n submit button it redirect me to the thank you page
what is the problem with captcha validation
why it is not validation the match not done correctly
why it is directly accepting the form without validating the capctha?
what is the problem n the code?
cannot identify the error pease help me
I've been trying to solve this one for several days now and it's driving me nuts. I have some data that needs to be submitted by Ajax. It is dynamic, so I don't know how many fields it has. On top of that the names of the fields are multidimensional and also dynamic. For example one might have inputs with the name data[name] and data[title] whilst another larger one might have data[images][0][src], data[images][0][alt], data[images][0][description], data[images][1][src], data[images][1][alt], data[images][1][description] with an unknown number of elements to the array. My problem is that I need to get an object I can submit via Ajax whilst maintaining the structure of the data.
I've tried serialising the data, but that just comes up with a string of name = value. I've tried serialise array as well, but that just gives me an array of [name, value]. I've managed to generate the object manually using a regex to split it up, but I can't find a way to merge the resultant objects together. The latest version of my code is:
$('.modal-content').find('input[name^="data"]').each(function () {
var found = $(this).attr('name').match(re).reverse();
var temp = $(this).val();
$.each(found, function ()
{
str = this.substr(1, this.length - 2);
var t = {};
t[str] = temp;
temp = t;
});
data = $.each({}, data, temp);
});
Unfortunately it doesn't merge them, it overwrites what is in data with what is in temp. If data has data.images[0].src = "mysrc" and temp has data.images[0].alt = "myalt" then I just end up with data.images[0].alt = "myalt" and src is no longer there.
There has to be a simple way to do this, hell at this point I'd even take a complicated way to do this. Can someone please help me with this?
Although there is already an accepted answer. Here are my 5 cents:
IMHO working with regex should be avoided when possible. So my suggestion would be to change the HTML a bit, adding some classes to the div that contain the image and change the name attribute of the inputs:
<li class="col-xs-12 col-sm-6 col-md-4 col-lg-3 gallery-image ui-sortable-handle">
<div class="my-image">
<img src="http://localhost:8000/img/example.jpg">
<input type="hidden" name="src" value="img/example.jpg">
<div class="form-group">
<label for="title-0">Title:</label>
<input type="text" name="title" class="form-control" id="title-0" value="Default Example Image 1" placeholder="Title">
</div>
<div class="form-group">
<label for="description-0">Description:</label>
<input type="text" name="description" class="form-control" id="description-0" value="A default example image." placeholder="Description">
</div>
<div class="form-group">
<label for="alt-0">Alt tag (SEO):</label>
<input type="text" name="alt" class="form-control" id="alt-0" value="fluid gallery example image" placeholder="Alt tag">
</div>
<div class="form-group">
<label for="order-0">Order:</label>
<input type="number" name="order" class="form-control image-order" id="order-0" value="0">
</div>
<button type="button" class="btn btn-danger remove-gallery-image-btn">× Delete</button>
</div>
</li>
<li class="col-xs-12 col-sm-6 col-md-4 col-lg-3 gallery-image ui-sortable-handle">
<div class="my-image">
<img src="http://localhost:8000/img/example.jpg">
<input type="hidden" name="src" value="img/example.jpg">
<div class="form-group">
<label for="title-1">Title:</label>
<input type="text" name="title" class="form-control" id="title-1" value="Default Example Image 2" placeholder="Title">
</div>
<div class="form-group">
<label for="description-1">Description:</label>
<input type="text" name="description" class="form-control" id="description-1" value="A default example image." placeholder="Description">
</div>
<div class="form-group">
<label for="alt-1">Alt tag (SEO):</label>
<input type="text" name="alt" class="form-control" id="alt-1" value="fluid gallery example image" placeholder="Alt tag">
</div>
<div class="form-group">
<label for="order-1">Order:</label>
<input type="number" name="order" class="form-control image-order" id="order-1" value="1">
</div>
<button type="button" class="btn btn-danger remove-gallery-image-btn">× Delete</button>
</div>
</li>
Then build the object matching this class:
var obj = {
data: {
images: []
}
}
var groups = $('.my-image');
groups.each(function(idx, el) {
var child = {}
$(el).find('input').each(function(jdx, info){
var $info = $(info);
child[$info.attr('name')] = $info.val();
});
obj.data.images.push(child);
});
We would have the same result, but it might be less error prone. Here is a plunker.
You can loop all inputs with each() loop, create array from name attributes using split() and then use reduce to add to object
var result = {}
$('input').each(function() {
var name = $(this).attr('name');
var val = $(this).val();
var ar = name.split(/\[(.*?)\]/gi).filter(e => e != '');
ar.reduce(function(a, b, i) {
return (i != (ar.length - 1)) ? a[b] || (a[b] = {}) : a[b] = val;
}, result)
})
console.log(result)
.as-console-wrapper { max-height: 100% !important; top: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="gallery-images" class="ui-sortable">
<li class="col-xs-12 col-sm-6 col-md-4 col-lg-3 gallery-image ui-sortable-handle">
<div>
<img src="http://localhost:8000/img/example.jpg">
<input type="hidden" name="data[images][0][src]" value="img/example.jpg">
<div class="form-group">
<label for="title-0">Title:</label>
<input type="text" name="data[images][0][title]" class="form-control" id="title-0" value="Default Example Image 1" placeholder="Title">
</div>
<div class="form-group">
<label for="description-0">Description:</label>
<input type="text" name="data[images][0][description]" class="form-control" id="description-0" value="A default example image." placeholder="Description">
</div>
<div class="form-group">
<label for="alt-0">Alt tag (SEO):</label>
<input type="text" name="data[images][0][alt]" class="form-control" id="alt-0" value="fluid gallery example image" placeholder="Alt tag">
</div>
<div class="form-group">
<label for="order-0">Order:</label>
<input type="number" name="data[images][0][order]" class="form-control image-order" id="order-0" value="0">
</div>
<button type="button" class="btn btn-danger remove-gallery-image-btn">× Delete</button>
</div>
</li>
<li class="col-xs-12 col-sm-6 col-md-4 col-lg-3 gallery-image ui-sortable-handle">
<div>
<img src="http://localhost:8000/img/example.jpg">
<input type="hidden" name="data[images][1][src]" value="img/example.jpg">
<div class="form-group">
<label for="title-1">Title:</label>
<input type="text" name="data[images][1][title]" class="form-control" id="title-1" value="Default Example Image 2" placeholder="Title">
</div>
<div class="form-group">
<label for="description-1">Description:</label>
<input type="text" name="data[images][1][description]" class="form-control" id="description-1" value="A default example image." placeholder="Description">
</div>
<div class="form-group">
<label for="alt-1">Alt tag (SEO):</label>
<input type="text" name="data[images][1][alt]" class="form-control" id="alt-1" value="fluid gallery example image" placeholder="Alt tag">
</div>
<div class="form-group">
<label for="order-1">Order:</label>
<input type="number" name="data[images][1][order]" class="form-control image-order" id="order-1" value="1">
</div>
<button type="button" class="btn btn-danger remove-gallery-image-btn">× Delete</button>
</div>
</li>
<li class="col-xs-12 col-sm-6 col-md-4 col-lg-3 gallery-image ui-sortable-handle">
<div>
<img src="http://localhost:8000/uploads/galleries\21\4-tux-30.jpg">
<input type="hidden" name="data[images][2][src]" value="uploads/galleries\21\4-tux-30.jpg">
<div class="form-group">
<label for="title-2">Title:</label>
<input type="text" name="data[images][2][title]" class="form-control" id="title-2" value="" placeholder="Title">
</div>
<div class="form-group">
<label for="description-2">Description:</label>
<input type="text" name="data[images][2][description]" class="form-control" id="description-2" value="" placeholder="Description">
</div>
<div class="form-group">
<label for="alt-2">Alt tag (SEO):</label>
<input type="text" name="data[images][2][alt]" class="form-control" id="alt-2" value="" placeholder="Alt tag">
</div>
<div class="form-group">
<label for="order-2">Order:</label>
<input type="number" name="data[images][2][order]" class="form-control image-order" id="order-2" value="2">
</div>
<button type="button" class="btn btn-danger remove-gallery-image-btn">× Delete</button>
</div>
</li>
<li class="col-xs-12 col-sm-6 col-md-4 col-lg-3 gallery-image ui-sortable-handle">
<div>
<img src="http://localhost:8000/uploads/galleries\21\all-free-backgrounds-simple-style-darkblue-18.jpg">
<input type="hidden" name="data[images][3][src]" value="uploads/galleries\21\all-free-backgrounds-simple-style-darkblue-18.jpg">
<div class="form-group">
<label for="title-3">Title:</label>
<input type="text" name="data[images][3][title]" class="form-control" id="title-3" value="" placeholder="Title">
</div>
<div class="form-group">
<label for="description-3">Description:</label>
<input type="text" name="data[images][3][description]" class="form-control" id="description-3" value="" placeholder="Description">
</div>
<div class="form-group">
<label for="alt-3">Alt tag (SEO):</label>
<input type="text" name="data[images][3][alt]" class="form-control" id="alt-3" value="" placeholder="Alt tag">
</div>
<div class="form-group">
<label for="order-3">Order:</label>
<input type="number" name="data[images][3][order]" class="form-control image-order" id="order-3" value="3">
</div>
<button type="button" class="btn btn-danger remove-gallery-image-btn">× Delete</button>
</div>
</li>
</ul>
$(documnet).ready(function(){
$('#more_finance').click(function(){
var add_new ='<div class="form-group finance-contact" id="finance_3"><div class="col-sm-9"><label for="firstName" class="control-label">Finance Contact#</label></div><div class="col-sm-9"><input type="text" id="finance" name="finance[]"placeholder="Finance Contact" class="form-control" autofocus></div>\n\
<img src="/img/deleted-box.png"></div>';
$(add_new).insertAfter( "#finance_1");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group finance-contact" id="finance_1">
<div class="col-sm-12">
<label for="firstName" class="control-label">Finance Contact</label>
</div>
<div class="col-sm-12">
<input type="text" id="finance1" name="finance[]" placeholder="Finance Contact" class="form-control" autofocus>
</div>
</div>
<div class="col-sm-12">
<input type="button" id="more_finance" value="Add More">
</div>
I want This Code insert multiple when click Add More Button And Also remove repeated fields
I Find Answer
jQuery(document).ready(function(){
jQuery('#more_senior').click(function(){
var finance_cont1=jQuery('.senior-contact').length;
var finance_cont=finance_cont1+1;
var add_new ='<div class="form-group senior-contact" id="senior_'+finance_cont+'"><div class="col-sm-9"><label for="firstName" class="control-label">Senior Mgmt. Contact#</label></div><div class="col-sm-9"><input type="text" id="seniormgmt'+finance_cont+'" name="seniormgmt[]"placeholder="Senior Mgmt. Contact" class="form-control" autofocus></div>\n\
Remove</div>';
jQuery(add_new).insertAfter( "#senior_"+finance_cont1 );
delete_fields();
});
function delete_fields(){
$('.delete_png').on("click",function(){
var class_name=jQuery(this).parent().attr('class');
class_name=class_name.split(' ');
var id_name=jQuery(this).parent().attr('id');
var finance_cont2=jQuery('.'+class_name[1]).length;
var finance_cont3=finance_cont2-1;
var id_first=id_name.split('_');
$('#'+id_name).remove();
delete_fields();
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4">
<h4><strong>Senior Mgmt. Contacts</strong></h4>
<div class="form-group senior-contact" id="senior_1">
<div class="col-sm-12">
<label for="firstName" class="control-label">Senior Mgmt. Contact</label>
</div>
<div class="col-sm-12">
<input type="text" id="seniormgmt1" value="" name="seniormgm[]" placeholder="Senior Mgmt. Contact" class="form-control" autofocus>
</div>
</div>
<div class="col-sm-12">
<input type="button" id="more_senior" value="Add More">
</div>
</div>
I'm using the jQuery UI Slider in a form that should submit the information to Velocify.
Everything gets sent correctly but the slider's value stays blank. Here is my code:
<form id="short-form" name="short-form" method="post" data-toggle="validator" role="form"
action="https://secure.velocify.com/Import.aspx?Provider=XXXXX&Client=XXXXX&CampaignId=XXXXX&URL=https://example.com/confirmation.php">
<input type="hidden" name="keyword" id="keyword" />
<div class="form-group">
<label class="loan-amount-label" for="_Requested_loan_amount">I'd like to borrow:</label>
<input type="text" id="_Requested_loan_amount" name="_Requested_loan_amount" class="loan-amount" readonly>
<p class="small">Drag the slider below to the amount you'd like to borrow</p>
<div id="slider"></div>
<div class="row slider-minmax">
<div class="col-xs-6 col-sm-6 col-md-6 text-left min">$2,501</div>
<div class="col-xs-6 col-sm-6 col-md-6 text-right max">$50,000</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-6 form-group">
<label for="_First_name" class="hidden">First Name</label>
<input type="text" class="form-control" id="_First_name" name="_First_name"
placeholder="First Name *" data-error="Please enter your first name." required>
</div>
<div class="col-sm-6 col-md-6 form-group">
<label for="_Last_name" class="hidden">Last Name</label>
<input type="text" class="form-control" id="_Last_name" name="_Last_name"
placeholder="Last Name *" data-error="Please enter your last name." required>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-6 form-group">
<label for="_Home_Phone" class="hidden">Phone Number</label>
<input type="text" class="form-control" id="_Home_Phone" name="_Home_Phone"
placeholder="Your Phone Number *" data-error="Please enter a valid phone number." required>
</div>
<div class="col-sm-6 col-md-6 form-group">
<label for="_Email_Address" class="hidden">Email</label>
<input type="email" class="form-control" id="_Email_Address" name="_Email_Address"
placeholder="Your Email *" data-error="Please enter a valid email address." required>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-6 form-group">
<label for="_Auto_year">Vehicle Year:</label>
<select class="form-control" id="_Auto_year" name="_Auto_year"
data-error="Please choose a vehicle year." required>
</select>
</div>
<div class="col-sm-6 col-md-6 form-group">
<label for="_Auto_make">Vehicle Make:</label>
<select class="form-control" id="_Auto_make" name="_Auto_make"
data-error="Please choose a vehicle make." required>
</select>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
<div class="row">
<div class="col-xs-7 col-sm-8 col-md-8 form-group">
<button type="submit" class="btn btn-primary btn-lg btn-block">
Get Started
</button>
</div>
<div class="col-xs-5 col-sm-4 col-md-4">
<div class="verify pull-right text-right">
</div>
</div>
</div>
</form>
The javascript:
<script>
$(function () {
$("#slider").slider({
value: 6500,
min: 2501,
max: 50500,
step: 500,
range: "min",
slide: function(event, ui) {
var x = Number(ui.value);
if (x > 2501) {
x = x - (x % 500);
}
$("#_Requested_loan_amount").val('$' + addCommas(x));
}
});
$("#_Requested_loan_amount").val('$' + addCommas($("#slider").slider("value")));
function addCommas(nStr) {
var x = Number(nStr);
if (x > 2501) {
x = x - (x % 500);
}
nStr = x.toString();
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
});
</script>
When I submit the form to my test page using
<?php echo $_POST["_Requested_loan_amount"]; ?>
I see the field value generates correctly so I'm not sure why it isn't sending that value to Velocify.
Thanks!
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.