Develop Reference

Passing form values through URL to another page using JS

I am currently stuck in this form. What I am trying to do is enter the name and email from the form and redirect the values on another page but the values should be shown in the address bar on the next page and the point is this should be done only within JavaScript.
Here is the form look:
values would be shown like this:
where xxxxx is name or email.
code for the form:
<form method="post" class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" target="_blank">
<input type="hidden" name="redirect" value="https://wanderistlife.typeform.com/to/gNucJF" id="redirect_984cda7485160f2afcf0ac36e7276fca" />
<input type="hidden" name="meta_redirect_onlist" value="https://wanderistlife.typeform.com/to/gNucJF"/>
<input type="hidden" name="meta_adtracking" value="My_Web_Form_2" />
<input type="hidden" name="meta_required" value="name (awf_first),name (awf_last),email" />
<label class="previewLabel" for="awf_field-96665553-first">First Name:</label>
<input id="awf_field-96665553-first" type="text" class="text" name="name (awf_first)" value="" onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " tabindex="500" />
<label class="previewLabel" for="awf_field-96665553-last">Last Name:</label>
<input id="awf_field-96665553-last" class="text" type="text" name="name (awf_last)" value="" onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " tabindex="501" />
<label class="previewLabel" for="awf_field-96665554">Email: </label>
<input class="text" id="awf_field-96665554" type="text" name="email" value="" tabindex="502" onfocus=" if (this.value == '') { this.value = ''; }" onblur="if (this.value == '') { this.value='';} " />
<input name="submit" onclick="HandleSubmit()" class="submit" type="submit" value="Submit" tabindex="503" />
<div class="af-element privacyPolicy" style="text-align: center"><p>We respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></p>
</form>
here is what I have done:
function HandleSubmit() {
var baseUrl = "https://wanderistlife.typeform.com/to/gNucJF?";
baseUrl += "name=" + document.getElementById("awf_field-96665553-first").value +"&email="+ document.getElementById("awf_field-96665554").value;
window.location.href = baseUrl;
}
Now, when I enter the values in Name and email fields and hit the submit button I will redirect to the next page.
Address bar of next page:
nothing happened!
What I want is if I enter name=navjot in form then URL bar will contain https://wanderistlife.typeform.com/to/gNucJF?name=navjot I know it's a simple but I don’t know how to do in javascript any help is appreciated any help or example would help me.

How to make one of three inputs type button requierd required

My problem is that I have one form with some fields and three inputs type button, they all represents one message. I want to make chooseing one of three messages required. My code is bellow:
<input id="poruka1" type="button" class="hm_datumibtn poruka" name="poruka1" value="Pored mene, sve želje " >
<input id="poruka2" type="button" class="hm_datumibtn poruka" name="poruka2" value="Pored sebe, sve želje " >
<input id="poruka3" type="button" class="hm_datumibtn poruka" name="poruka3" value="Pored tebe, sve želje " >
Do you have any idea how can I solve this kind of problem?
<script>
function upis(){
//var datum = $(this).find('.datum').val();
//var poruka = $(this).find('.poruka').val();
//var poruka = $(this).attr('value');
if (poruka_forma.poruka1.value == '' && poruka_forma.poruka2.value == ''&& poruka_forma.poruka3.value == '') {
alert('You have to choose message.');
return false;
}
else {
myForm.submit();
}
var ime = document.getElementById("ime").value;
var ime_slavljenik = document.getElementById("ime_slavljenik").value;
var elementsdate = document.getElementsByClassName("selected_date");
var datum = elementsdate[0].value;
var elements = document.getElementsByClassName("selected");
var poruka = elements[0].value;
//var poruka = document.getElementById("poruka").value;
//var datum = document.getElementById("datum").value;
//var poruka = document.getElementById("poruka").value;
//var email = document.getElementById("email").value;
//var dataString = "ime="+encodeURIComponent(ime)+"&ime_slavljenik="+encodeURIComponent(ime_slavljenik);
$.ajax({
type:"post",
url: "upis.php",
cashe: false,
//data: dataString+'&datum='+datum+'&poruka='+poruka,
data: {ime:ime,ime_slavljenik:ime_slavljenik,datum:datum, poruka:poruka},
success: function(data){
//window.alert(data);
document.getElementById("placefortableanketa").innerHTML = data;
},
error: function (req, status, err) {
console.log('Something went wrong', status, err);
}
})
return false;
}
</script>

I think you might want to use <input type="radio" /> instead. Example:
<form>
<input type="radio" id="radio_btn_1" name="radio_btn" value="choice_1" required="required" checked="checked" /><label for="radio_btn_1">Choice 1</label><br />
<input type="radio" id="radio_btn_2" name="radio_btn" value="choice_2" required="required" /><label for="radio_btn_2">Choice 2</label><br />
<input type="radio" id="radio_btn_3" name="radio_btn" value="choice_3" required="required" /><label for="radio_btn_3">Choice 3</label><br />
</form>
You can add required attributes to make them required. Also, adding checked attributes will make a radio button selected by default.
You can also use <label> with for attribute. When that label is clicked, it selects a radio button that it refers to by id in its for attribute.
Edit: I saw your comment that you don't want to use radio buttons because of the design. You can actually hide the radio buttons, and just use <label> with for attributes. Example:
<style>
#radio_btn_1:checked + label{background-color:red;}
#radio_btn_2:checked + label{background-color:red;}
#radio_btn_3:checked + label{background-color:red;}
</style>
<form>
<input style="display:none;" type="radio" id="radio_btn_1" name="radio_btn" value="choice_1" required="required" checked="checked" /><label for="radio_btn_1">Choice 1</label><br />
<input style="display:none;" type="radio" id="radio_btn_2" name="radio_btn" value="choice_2" required="required" /><label for="radio_btn_2">Choice 2</label><br />
<input style="display:none;" type="radio" id="radio_btn_3" name="radio_btn" value="choice_3" required="required" /><label for="radio_btn_3">Choice 3</label><br />
</form>

Why wont my radio button response respond to my Google Spreadsheet?

I've used the following code as a method to send user input data on my html site to a Google Spreadsheet:
Javascript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
function postContactToGoogle() {
var firstname=$('#firstname').val();
var surname=$('#surname').val();
var dob=$('#dob').val();
var email=$('#email').val();
var option=$('#option').val();
$.ajax({
url:"https://docs.google.com/forms/d/e/1FAIpQLSfe760bJi_65cvSGfu4HckMdmAs1ahBkO7oE6njBTYZh4A/formResponse",
data: {"entry.1012452068":firstname, "entry.1038894874":surname, "entry.1352091133":dob, "entry.1048111489":email, "entry.1786559101":option}, type: "POST", datatype: "xml", statusCode: {0:function() {window.location.replace("thankyou.html");}, 200:function(){window.location.replace("thankyou.html");}}
});
}
</script>
HTML:
<form>
First Name:<br>
<input id="firstname" name="firstname" type="text" placeholder="First Name"/><br>
Surname:<br>
<input id="surname" name="surname" type="text" placeholder="Surname"/><br>
DoB:<br>
<input id="dob" name="dob" type="text" placeholder="DoB"/><br>
Email:<br>
<input id="email" name="email" type="text" placeholder="Email"/><br>
Option Pledge:<br>
<input id="option" name="option" type="radio"/> £49 <br>
<input id="option" name="option" type="radio"/> £69 <br>
<input id="ButtonSubmit" name="" type="button" value="Send" onclick="postContactToGoogle()"/>
</form>
It all works perfectly well except for the last 2 radio button options don't appear on the spreadsheet (shown on the image below). Does anyone have an insight into what I'm doing wrong?

You have 2 issues:
Your radio inputs have the same id="option" and id's should be unique .
Your radio inputs haven't value attribute to send like value="your value".
So this example should work
function postContactToGoogle() {
var firstname = $('#firstname').val();
var surname = $('#surname').val();
var dob = $('#dob').val();
var email = $('#email').val();
var option = $("[name='option']").val();
console.log({
"entry.1012452068": firstname,
"entry.1038894874": surname,
"entry.1352091133": dob,
"entry.1048111489": email,
"entry.1786559101": option
});
alert("your radio button value: " + option);
//it's working..
//then validate your data before sending
$.ajax({
url: "https://docs.google.com/forms/d/e/1FAIpQLSfe760bJi_65cvSGfu4HckMdmAs1ahBkO7oE6njBTYZh4A/formResponse",
data: {
"entry.1012452068": firstname,
"entry.1038894874": surname,
"entry.1352091133": dob,
"entry.1048111489": email,
"entry.1786559101": option
},
type: "POST",
datatype: "xml",
statusCode: {
0: function() {
alert("status:0, thank you");
window.location.replace("thankyou.html");
},
200: function() {
alert("status:200, thank you");
window.location.replace("thankyou.html");
}
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<form>
First Name:
<br>
<input id="firstname" name="firstname" type="text" placeholder="First Name" />
<br>Surname:
<br>
<input id="surname" name="surname" type="text" placeholder="Surname" />
<br>DoB:
<br>
<input id="dob" name="dob" type="text" placeholder="DoB" />
<br>Email:
<br>
<input id="email" name="email" type="text" placeholder="Email" />
<br>Option Pledge:
<br>
<input id="option1" value="Black Ballad Membership - £49" name="option" type="radio" />£49
<br>
<input id="option2" value="Premium Black Ballad Membership - £69" name="option" type="radio" />£69
<br>
<input id="ButtonSubmit" name="" type="button" value="Send" onclick="postContactToGoogle()" />
</form>

Do following change in your code,
var option = $('input[name=option]:checked').val()
Note: There should not be the same id for two different element, you have used id "option" for both radio.

Ajax script receiving user string input text and Posting in JSON format

I have a function ipcfg_set that will set the IP address and it takes the user input variable and sends it in JSON format back to the function. Having issue with constructing the script that takes the IP,mask,gateway entered by user and upon clicking the button will send the value in JSON back.
function ipcfg_set ()
{
$.ajax({
type: 'POST',
url: 'ipcfg_set.cgi',
dataType : "json",
data: { ipv4_addr: $('#ip1').val() + '.' + $('#ip2').val() + '.' + $('#ip3').val() + '.' + $('#ip4').val(),
gw_addr: $('#gw1').val() + '.' + $('#gw2').val() + '.' + $('#gw3').val() + '.' + $('#ip4').val(),
ipv4_mask: $('#nm1').val() + '.' + $('#nm2').val() + '.' + $('#nm3').val() + '.' + $('#nm4').val()
}
success: function(data) {
});
}
$(function() {
$('#btnreset').on('click', ipcfg_get);
$('#btnapply').on('click', ipcfg_set);
ipcfg_get();
});
HTML code
<section>
<h2>IP Configuration</h2>
<p>Please fill in the form and press <b>Apply</b> to save settings.</p>
<p>Press <b>Reset</b> to revert settings.</p>
<section>
<table class="formgrid">
<tr><th>IP Address:</th><td><input type="text" name="a1" id="ip1" size="3" value="0">.
<input type="text" name="a2" size="3" id="ip2" value="0">.
<input type="text" name="a3" size="3" id="ip3" value="0">.
<input type="text" name="a4" size="3" id="ip4" value="0"></td></tr>
<tr><th>Network mask:</th><td><input type="text" name="m1" id="nm1" size="3" value="0">.
<input type="text" name="m2" size="3" id="nm2" value="0">.
<input type="text" name="m3" size="3" id="nm3" value="0">.
<input type="text" name="m4" size="3" id="nm4" value="0"></td></tr>
<tr><th>Gateway:</th><td><input type="text" name="g1" id="gw1" size="3" value="0">.
<input type="text" name="g2" size="3" id="gw2" value="0">.
<input type="text" name="g3" size="3" id="gw3" value="0">.
<input type="text" name="g4" size="3" id="gw4" value="0"></td></tr>
</table>
</section>
<section>
<input id="btnreset" type="button" class="button" value="Reset" />
<input id="btnapply" type="button" class="button" value="Apply..." />
</section>

You can get the values from inputs using function like this, just to reduce typing. You have four inputs per IP address, the function will combine values into the single string:
function formatIP(id) {
return $(id+'1').val() + '.' + $(id+'2').val() + '.' +
$(id+'3').val() + '.' + $(id+'4').val()
}
And the data parameter should be a javascript object like this:
data: {
ipv4_addr: formatIP('#ip'),
gw_addr: formatIP('#nm'),
ipv4_mask: formatIP('#gw')
}

Javascript form submission

I have a form that posts its data to Sugar CRM. The data is being successfully submited in Firefox but not redirecting correctly. In Chrome the data is not being submitted but is redirecting correctly.
<form method="POST" class="brochurelead webtoleadform" name="WebToLeadForm" id="WebToLeadForm">
<fieldset>
<label for="firstname">First name*:</label>
<input type="text" name="first_name" id="first_name" />
<br />
<label for="lastname">Last name*:</label>
<input type="text" name="last_name" id="last_name" />
<br />
<label for="phone_work">Primary phone*:</label>
<input type="text" name="phone_work" id="phone_work" onchange="validateHuman();"/>
<br />
<label for="email">Email*:</label>
<input type="text" name="email1" id="email1" onchange="validateEmailAdd();" />
<span style="padding-left:268px"><input type="submit" value="Download" name="Submit" class="button" onclick="submit_form();" />
</fieldset1>
<input type="hidden" name="lead_source" id="lead_source" value="Brochure Download" />
<input type="hidden" name="user" id="user" value="lead_capture_form" />
<input type="hidden" value="dbce057c" name="campaign_id" id="campaign_id" />
<input type="hidden" value="http://www.somewebsite.com/somearticle" name="redirect" id="redirect" />
<input type="hidden" value="blahblah" name="assigned_user_id" id="assigned_user_id" />
<input type="hidden" value="first_name;last_name;phone_work;email1;" name="req_id" id="req_id" />
<input type="hidden" value="<?php echo $article->category; ?>" name="area_of_interest_c" id="area_of_interest_c">
<input type="hidden" name="probability_c" id="probability_c" value="1" />
<input type="hidden" id="human" name="human" value="0">
</form>
This is my javascript for handling the form:
function submit_form(){
if(typeof(validateCaptchaAndSubmit)!='undefined'){
validateCaptchaAndSubmit();
}else{
check_webtolead_fields();
}
}
function check_webtolead_fields(){
if(document.getElementById('req_id') != null){
var reqs=document.getElementById('req_id').value;
reqs = reqs.substring(0,reqs.lastIndexOf(';'));
var req_fields = new Array();
var req_fields = reqs.split(';');
nbr_fields = req_fields.length;
var req = true;
for(var i=0;i<nbr_fields;i++){
if(document.getElementById(req_fields[i]).value.length <=0 || document.getElementById(req_fields[i]).value==0){
req = false;
break;
}
}
if(req && document.getElementById('human').value == '50'){
document.WebToLeadForm.action = "http://crm.somewebsite.com/index.php?entryPoint=WebToLeadCapture";
document.WebToLeadForm.submit();
window.location = document.getElementById('redirect').value;
return true;
}
else{
alert('Please provide all the required fields');
return false;
}
return false
}
else{
document.WebToLeadForm.action = "http://crm.somewebsite.com/index.php?entryPoint=WebToLeadCapture";
document.WebToLeadForm.submit();
window.location = document.getElementById('redirect').value;
}
}
function validateEmailAdd(){
if(document.getElementById('email1').value.length >0) {
if(document.getElementById('email1').value.match(/^\w+(['\.\-\+]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,})+$/) == null){
alert('Not a valid email address');
}
}
}
function validateHuman(){
document.getElementById('human').value = "50";
}

Because you are submitting a form and trying to set the page's location at the same time. That is not going to happen. It is a race condition!
Either you will have to submit the form with Ajax can on the response you redirect OR you need the serverside to actually do the redirection!