Develop Reference

Is this the right way to implement google recpatcha v3?

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?

TypeError: undefined is not a constructor Phantomjs

I'm using
document.querySelector("input[name='txtID']").value = "myid";
document.querySelector("input[name='txtUserName']").value = "myname";
document.querySelector("input[name='txtPassword']").value = "mypassword";
document.querySelector("input[name='txtMode']").value = "1";
document.querySelector("input[name='txtLang']").value = "en";
document.querySelector("input[name='submit']").submit();
but i was got an error TypeError: undefined is not a constructor (evaluating 'document.querySelector("input[name='submit']").
and this is the HTML code :
<div id="myTabContent" class="tab-content">
<div class="set-loginbx-active" id="b2b">
<form name="form1" method="post" onSubmit="return HC.checkMode(this);">
<div id="lyAgent">
<div class="lbl-login" id="dAgentID">Agent Id.</div>
<div class="inp-login"><input name="txtID" id="txtID" type="text"></div>
<div class="clear"></div>
</div>
<div class="lbl-login" id="dUserName">Username</div>
<div class="inp-login"><input name="txtUserName" id="txtUserName" type="text"></div>
<div class="clear"></div>
<div class="lbl-login" id="dPassword">Password</div>
<div class="inp-login">
<input name="txtPassword" id="txtPassword" type="password">
<input type="hidden" name="txtMode" id="txtMode" value="1" />
<input type="hidden" name="txtLang" id="txtLang" value="en" />
</div>
<div class="clear"></div>
<div class="btn-login"><input name="submit" type="submit" value="LOGIN" /></div>
<div class="box-access">
<div class="tt-access">Access Level</div>
<div class="lnk-access"><input type="radio" name="optionsRadios" id="optionsRadios1" onclick="HC.loginMode(1);"> Master Login</div>
<div class="lnk-access"><input type="radio" name="optionsRadios" id="optionsRadios2" checked onclick="HC.loginMode(0);"> Agent Login</div>
</div>
</form>
</div>
can someone explain to me why ?

That should probably be:
document.querySelector("input[name=submit]").click()

The issue is that you can't call submit() on an <input>. That is a method of the <form>. Do this instead
document.querySelector("form[name='form1']").submit();
Edit: you should not have any element with a name 'submit'. In your HTML, your submit input also has the name submit. Remove the name='submit' attribute from the <input> element.

How can I get output in input box or html element with jQuery?

$(document).ready(function() {
$('form').submit(function() {
var principle = $("#principle").val();
var rate = $("#rate").val();
var time = $("#time").val();
var interest = principle * rate * time / 100;
interest = $("p").append(interest);
return false;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="table commonTable">
<div class="row">
<div class="cell">
<label for="P">Principal (P): $</label>
</div>
<div class="cell">
<input name="P" id="principle" value="10,000.00" class="nmbr_real real" type="text" title="positive real number" placeholder="amount" required="" />
</div>
</div>
<div class="row">
<div class="cell">
<label for="R">Rate (R): %<br />
<span class="note small">per year</span></label
>
</div>
<div class="cell">
<input
name="R"
id="rate"
value="3.875"
class="nmbr_real real"
type="text"
title="positive real number"
placeholder="rate"
required=""
/>
</div>
</div>
<div class="row">
<div class="cell">
<label for="t">Time (t):</label>
</div>
<div class="cell">
<input name="t" id="time" value="5" class="nmbr_real real" type="text" title="0 or positive real number" placeholder="#" required="" />
</div>
</div>
</div>
<button>Calculate</button>
</form>

just create inputbox
<input type="text" id="abc" name="price" value="" />
and use below code for insert value in inputbox
jQuery(document).ready(function($) {
$("#abc").val('100');
});

If you want to get the output in input box the use val() function.
$("input").val(interest);
If you want to get the output in HTML element the use html() function.
$("p").html(interest);

For setting a value in textbox use val()
$('#abc').val('13');
For setting a value in 'p' use text()
<p id='p_Id'></p>
$('#p_Id').text('13');

re-adding HTML into a DIV using JavaScript/JQuery

Hi All I have the following Div as seen below:
<div id = '1'>
<div>
<div>
<label class="right inline">Response:</label>
</div>
<div>
<input type="text" name="responseText[]" value="" maxlength="400" />
</div>
<div>
<input type="radio" name="responseRadio[]" value="" />
</div>
</div>
<div>
<input type="button" name="addNewRow" value="Add Row" />
</div>
</div>
when the user clicks on the button, I want to add the following Divs again:
<div>
<div>
<label class="right inline">Response:</label>
</div>
<div>
<input type="text" name="responseText[]" value="" maxlength="400" />
</div>
<div>
<input type="radio" name="responseRadio[]" value="" />
</div>
</div>
Is this possible to achieve with JavaScript or the jQuery onclick function?

You can use clone method with insertAfter:
HTML:
<div id='1'>
<div class="template"> <!-- mark a clone target -->
...
</div>
<div>
<input type="button" name="addNewRow" value="Add Row" />
</div>
</div>
JS:
var $template = $('.template');
$('input[type=button]').click(function() {
$template.clone().insertAfter($template);
});
Demo: http://jsfiddle.net/VcBrz/

Try this:
<script>
$(document).ready(function(){
var divID='abc';
var $mainDiv=$('#'+divID);
$mainDiv.find('input[name="addNewRow"]').eq(0).click(function(){
var $this=$(this);
var $div=$(this).parents('div').eq(0).prev('div').clone();
$this.parents('div').eq(0).prev('div').after($div);
});
});
</script>
Demo: http://jsfiddle.net/xT62m/

The best way is to clone that div which you want to add to div#1.
For easier manipulation, please add classes to div with button and to each div which represents row.
HTML:
<div id = 'id1'>
<div class='row'>
<div>
<label class="right inline">Response:</label>
</div>
<div>
<input type="text" name="responseText[]" value="" maxlength="400" />
</div>
<div>
<input type="radio" name="responseRadio[]" value="" />
</div>
</div>
<div class='buttonHolder'>
<input type="button" name="addNewRow" value="Add Row" />
</div>
</div>
Javascript (with jQuery):
$(document).ready(function(){
$('.buttonHolder input[type=button]').on('click', function(){
//Clone existing row to template.
var row = $('#id1 .row').first().clone();
//Clear template
$('input', row).val('');
$(row).insertBefore('.buttonHolder input[type=button]');
});
});
jsFiddle example: http://jsfiddle.net/9Z2RT/1/

make html like this:
<div id="container">
<div class= 'template'>
<div>
<div>
<label class="right inline">Response:</label>
</div>
<div>
<input type="text" name="responseText[]" value="" maxlength="400" />
</div>
<div>
<input type="radio" name="responseRadio[]" value="" />
</div>
</div>
</div>
</div>
<div>
<input type="button" name="addNewRow" id="btnAddRow" value="Add Row" />
</div>
Click Function:
$('#btnAddRow').click(function(){
var row = $('.template').first().clone();
$('#container').append(row);
});
Here is Fiddle DEMO

The simpliest way will be:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<script>
var m_TextToAdd = '<div> ';
m_TextToAdd += '<div> ';
m_TextToAdd += ' <label class="right inline">Response:</label>';
m_TextToAdd += '</div>';
m_TextToAdd += '<div>';
m_TextToAdd += ' <input type="text" name="responseText[]" value="" maxlength="400" /> ';
m_TextToAdd += '</div>';
m_TextToAdd += ' <div>';
m_TextToAdd += ' <input type="radio" name="responseRadio[]" value="" />';
m_TextToAdd += ' </div>';
m_TextToAdd += '</div>';
function AddContent() {
document.getElementById('div1').innerHTML += m_TextToAdd;
}
</script>
</head>
<body>
<div id = 'div1'>
<div>
<div>
<label class="right inline">Response:</label>
</div>
<div>
<input type="text" name="responseText[]" value="" maxlength="400" />
</div>
<div>
<input type="radio" name="responseRadio[]" value="" />
</div>
</div>
<div>
<input type="button" name="addNewRow" value="Add Row" onclick='AddContent();'/>
</div>
</div>
</body>
</html>
Anyhow, it heart my eyes to see it :-)
I think the next code is more readable:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<script type='text/javascript'>
function AddContent() {
var dest = document.getElementById('div1');
//add label
var lbl = document.createElement('label');
lbl.innerHTML = 'Response:';
lbl.className = 'right inline';
dest.appendChild(lbl);
//add line break
dest.appendChild(document.createElement('br'));
//add text input
var input = document.createElement('input');
input.type = 'text';
input.name = 'responseText[]';
input.maxlength="400";
dest.appendChild(input);
//add line break
dest.appendChild(document.createElement('br'));
//add radio button
input = document.createElement('input');
input.type="radio";
input.name="responseRadio[]";
dest.appendChild(input);
//add line break
dest.appendChild(document.createElement('br'));
}
</script>
</head>
<body>
<div id = 'div1'>
<label class="right inline">Response:</label>
<br>
<input class='nextLine' type="text" name="responseText[]" value="" maxlength="400" />
<br>
<input class='nextLine' type="radio" name="responseRadio[]" value="" />
<br>
<input class='nextLine' type="button" name="addNewRow" value="Add Row" onclick='AddContent();'/>
<br>
</body>
</html>

Yes, use the jquery append functionality https://api.jquery.com/append/
$('#1').append(html);
Here is a working jsfiddle http://jsfiddle.net/ZqQAu/1/

lightbox and ajax form inside

I have problem when using my ajax form inside the lightbox div .
the form worked outside the lightbox .
after submit the form , I cannot recieve the variable from the form , I see it empty .
I am using lightbox from here:
http://www.aerowebstudio.net/codecanyon/jquery.lightbox/
the html example "
<html>
<head>
<script type="text/javascript">
function send_ajax_data() {
var reg_user = document.getElementById('reg_user').value;
reg_user2 = document.getElementById('reg_user2').value;
reg_pass = document.getElementById('reg_pass').value;
reg_pass2 = document.getElementById('reg_pass2').value;
reg_email = document.getElementById('reg_email').value;
alert(reg_user);
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$('div.lightbox').lightbox();
});
</script>
</head>
<body>
<div id="signup" style="width:756px; margin-right:auto;margin-left:auto;">
<div class="light-box">
<div class="center">
<div class="welcome">
<h1>Hello</h1>
</div>
<div id="reg_stats"></div>
<div class="login-form">
<div class="form-container">
<label class="label">xxx</label>
<input id="reg_user" type="text" />
<label class="label">xxx</label>
<input id="reg_user2" type="text" />
<label class="label">xxx</label>
<input id="reg_email" type="text" />
<label class="label">xxx</label>
<input id="reg_pass" type="text" />
<label class="label">xxx</label>
<input id="reg_pass2" type="text" />
<input type="submit" onclick="send_ajax_data();" class="login-btn" value="Done" />
</div>
</div>
</div>
</div>
</div>
new user
</body>
</html>

Try adding in a form tag?
Without a form wrapping the inputs, there is nothing to submit.