Develop Reference

Delay before submitting form not working

I try to add a delay before submiting my form or wait for ajax request before submitting the form. The goal is to get the geo-data (lat+lng) from google api, write it into a hidden (display:none) input-field and then submit the form.
I try it this way. The delay works but after the 5000 ms the page just reloads and ist not submitting.
$('#orderform').submit(function (event) {
var form = this;
event.preventDefault();
setTimeout(function () {
form.submit();
}, 5000); // in milliseconds
var address = $('#ustreet').val() + " " + $('#ustreetnr').val() + ", " + $('#uplz').val();
$.ajax({
url: 'https://maps.googleapis.com/maps/api/geocode/json?address=' + address + '&key=123456789',
dataType: 'json',
success: function(json) {
geo = json.results[0].geometry.location.lat + ", " + json.results[0].geometry.location.lng;
$('#oxmailcheck').val(geo);
}
});
});
My form is from oxid and looks like this:
<form action="[{ $oViewConf->getSslSelfLink()|oxaddparams:"cl=user" }]" name="order" method="post" id="orderform">
<div>
[{ $oViewConf->getHiddenSid() }]
[{ $oViewConf->getNavFormParams() }]
<input type="hidden" name="option" value="[{$oView->getLoginOption()}]">
<input type="hidden" name="cl" value="user">
<input type="hidden" name="CustomError" value='user'>
<input type="hidden" name="blhideshipaddress" value="0">
[{if !$oxcmp_user->oxuser__oxpassword->value }]
<input type="hidden" name="fnc" value="createuser">
[{else}]
<input type="hidden" name="fnc" value="changeuser">
<input type="hidden" name="lgn_cook" value="0">
[{/if}]
</div>
<input id="ustreet" type="text" class="input-m" size="28" maxlength="255" name="invadr[oxuser__oxstreet]" value="[{if isset( $invadr.oxuser__oxstreet ) }][{$invadr.oxuser__oxstreet }][{else}][{$oxcmp_user->oxuser__oxstreet->value }][{/if}]">
<input id="ustreetnr" type="text" class="input-s" size="5" maxlength="16" name="invadr[oxuser__oxstreetnr]" value="[{if isset( $invadr.oxuser__oxstreetnr ) }][{ $invadr.oxuser__oxstreetnr }][{else}][{ $oxcmp_user->oxuser__oxstreetnr->value }][{/if}]">
<input id="uplz" type="text" class="input-s" size="5" maxlength="16" name="invadr[oxuser__oxzip]" value="[{if isset( $invadr.oxuser__oxzip ) }][{$invadr.oxuser__oxzip }][{else}][{$oxcmp_user->oxuser__oxzip->value }][{/if}]">
<input class="button medium" name="userform" type="submit" value="[{ oxmultilang ident="USER_NEXTSTEP" }]">
</form>
Is there a way to achieve my goal with a delay before submitting the form or maybie submitting the form after the json request wassuccessful and I get my data from google api.
A delay solution would be much better in case the google api is down, then i get no data but the form is still submitting. Or is jquery here the wrong lang?

$('#orderform').submit(callback) the callback will be called after the javascript submit event, i.e. this function would be called after the form is submitted
Rather i would recommend this approach
Use onclick of the submit button rather than $(selector).Submit()
when you get the data from geolocation APIs submit the form using
$('#orderform')[0].submit();
make sure that you change the button type from type="submit" to type="button" otherwise the button will fire the submit event
$(document).ready(function(){
$('#SubmitFormButton').click(function (event) {
var form = this;
event.preventDefault();
setTimeout(function () {
form.submit();
}, 5000); // in milliseconds
var address = $('#ustreet').val() + " " + $('#ustreetnr').val() + ", " + $('#uplz').val();
$.ajax({
url: 'https://maps.googleapis.com/maps/api/geocode/json?address=' + address + '&key=123456789',
dataType: 'json',
success: function(json) {
geo = json.results[0].geometry.location.lat + ", " + json.results[0].geometry.location.lng;
$('#oxmailcheck').val(geo);
$('#orderform')[0].submit();
}
});
});
});
<form action="[{ $oViewConf->getSslSelfLink()|oxaddparams:"cl=user" }]" name="order" method="post" id="orderform">
<div>
[{ $oViewConf->getHiddenSid() }]
[{ $oViewConf->getNavFormParams() }]
<input type="hidden" name="option" value="[{$oView->getLoginOption()}]">
<input type="hidden" name="cl" value="user">
<input type="hidden" name="CustomError" value='user'>
<input type="hidden" name="blhideshipaddress" value="0">
[{if !$oxcmp_user->oxuser__oxpassword->value }]
<input type="hidden" name="fnc" value="createuser">
[{else}]
<input type="hidden" name="fnc" value="changeuser">
<input type="hidden" name="lgn_cook" value="0">
[{/if}]
</div>
<input id="ustreet" type="text" class="input-m" size="28" maxlength="255" name="invadr[oxuser__oxstreet]" value="[{if isset( $invadr.oxuser__oxstreet ) }][{$invadr.oxuser__oxstreet }][{else}][{$oxcmp_user->oxuser__oxstreet->value }][{/if}]">
<input id="ustreetnr" type="text" class="input-s" size="5" maxlength="16" name="invadr[oxuser__oxstreetnr]" value="[{if isset( $invadr.oxuser__oxstreetnr ) }][{ $invadr.oxuser__oxstreetnr }][{else}][{ $oxcmp_user->oxuser__oxstreetnr->value }][{/if}]">
<input id="uplz" type="text" class="input-s" size="5" maxlength="16" name="invadr[oxuser__oxzip]" value="[{if isset( $invadr.oxuser__oxzip ) }][{$invadr.oxuser__oxzip }][{else}][{$oxcmp_user->oxuser__oxzip->value }][{/if}]">
<input id="SubmitFormButton" class="button medium" name="userform" type="button" value="[{ oxmultilang ident="USER_NEXTSTEP" }]">
</form>

Get the radio button value through ajax to php file

After clicking the radio button, the value from the radio button is not being passed when the onclick event is triggered. Here is my code:
<form name="Form1" id="color" style="font-size: 100%" action="#">
<input type="radio" name="radio1" id="radio1" onclick = "MyAlert()" value="blue"/>Blue <br /></p>
<p> <input type="radio" name="radio1" id="radio1" onclick = "MyAlert()" value="red"/>Red
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function MyAlert() {
var radio1=$('input[type="radio"]:checked').val();
var pass_data = {
'radio1' : radio1,
};
alert(pass_data);
$.ajax({
url : "",
type : "POST",
data : pass_data,
success : function(data) {
}
});
return false;
}
</script>
<?php
echo $radio1=$_GET['radio1'];
?>
When I click the radio button, I get the error
Undefined index: radio1
I want to display value of the radio button when clicking it within the same page.

Firstly make ajax to separate PHP page where you will access the radio value. Also make alert after you receive the data.
$.ajax({
url : "post.php",
type : "POST",
data: pass_data,
success : function(data) {
// alert radio value here
alert(data);
}
});
Crete a separate PHP file post.php where you access radio input. Since you are making POST request you need to use $_POST instead of $_GET to get radio button value.
<?php
$radio1 = $_POST['radio1'];
echo $radio1;
?>

<input type="radio" id="status" name="status" value="1" /> Mbyllur<br />
<input type="radio" id="status" name="status" value="0" /> Hapur<br />
function MyAlert()
{
var radio1=$('input[type="radio"]:checked').val();
var pass_data = {
'radio1' : $('input[name=status]:checked').val(),
};
alert(pass_data);
$.ajax({
url : "",
type : "POST",
data : pass_data,
success : function(data) {
}
});
return false;
}

I would use a newer version of jquery .
You can't give two elements the same id.
I would rewrite the code as follow :
$(function() {
$(document).on('change', '[name="radio1"]' , function(){
var val = $('[name="radio1"]:checked').val();
alert(val);
/*
Ajax code 1 (GET) :
$.get('/myurl?val=' + val, function(){
});
Ajax code 2 (POST) :
$.post('/myurl', {val : val}, function(){
});
*/
});
});
<form name="Form1" id="color" style="font-size: 100%" action="#" >
<input type="radio" name="radio1" value="blue"/>Blue <br />
<p> <input type="radio" name="radio1" value="red"/>Red
</form>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

Try This -->
<form name="Form1" id="color" style="font-size: 100%" action="#" >
<input type="radio" name="radio1" id="radio1" onclick = "MyAlert()" value="blue"/>Blue <br /></p>
<p> <input type="radio" name="radio1" id="radio1" onclick = "MyAlert()" value="red"/>Red
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function MyAlert()
{
var radio1=$('input[type="radio"]:checked').val();
//alert(radio1);
var pass_data = {
'radio1' : radio1,
};
//alert(pass_data);
$.ajax({
url : "request.php", // create a new php page to handle ajax request
type : "POST",
data : pass_data,
success : function(data) {
}
});
return false;
}
</script>
request.php
<?php
if(isset($_POST['radio1']))
{
echo $radio1=$_POST['radio1'];
}
?>
Above code handle with ajax so, its not refresh the page.

<script>
$(document).ready(function() {
$("#Enviar").click(function (e) {
var cedula = document.getElementById("Cedula").value;
var Nombre = document.getElementById("Nombre").value;
var Apellido = document.getElementById("Apellido").value;
var Sexo = $('input:radio[name=SexoC]:checked').val();
var Edad = document.getElementById("Edad").value;
var FechaN = document.getElementById("date").value;
var Tele = document.getElementById("tel").value;
var Direccion = document.getElementById("Direccion").value;
var Invitacion = document.getElementById("Invitacion").value;
var CasaG = document.getElementById("CasaG").value;
var Rango = document.getElementById("Rango").value;
var cadena = "Cedula="+cedula+"&Nombre="+Nombre+"&Apellido="+Apellido+"&Sexo="+Sexo+"&Edad="+Edad+"&Fecha="+FechaN+"&Tele="+Tele+"&Direccion="+Direccion+"&Invitacion="+Invitacion+"&CasaG="+CasaG+"&Rango="+Rango;
$.ajax({
type:'POST',
url:'datos/Registrar.php',
data: cadena,
beforeSend: function(){
console.log(cadena);
},
success:function(Resp){
alert(Resp);
}
});
return false;
});
});
</script>

Submit value of a checkbox through javascript

I am trying to submit values of a form through javascript it contains both text and two checkboxes.
<script>
function SubmitFormData2() {
var preffered_loc = $("#preffered_loc").val();
var relocation = $(".relocation").val();
$.post("r_two.php", { preffered_loc: preffered_loc,relocation: relocation },
function(data) {
$('#results').html(data);
$('#myForm2')[0].reset();
});
}
</script>
<form id="myForm2" method="post" style="margin-left: -10%;">
<input type="text" class="form-control" id="preffered_loc" name="preffered_loc">
<input type="checkbox" name="relocation[]" class="relocation[]" value="Yes">
<input type="checkbox" name="relocation[]" class="relocation[]" value="No" >
<input type="button" id="submitFormData2" onclick="SubmitFormData2();" value="Submit" />
</form>
r_two.php
<?
$preffered_loc = $_POST['preffered_loc'];
$relocation = $_POST['relocation'];
?>
i am able to save the first value but i am not able to save relocation value, can anyone tell how i can save relocation. Important point here is that user can select both checkboxes also
The issue is that $relocation is picking only value yes even if i select 2nd selectbox. can anyone please correct my code

try this.
function SubmitFormData2() {
var preffered_loc = $("#preffered_loc").val();
var relocation = $("#relocation").is(":checked");
var relyn = "";
if(relocation){
relyn = "Yes";
}else{
relyn = "No";
}
$.post("r_two.php", { preffered_loc: preffered_loc,relocation: relyn },
function(data) {
$('#results').html(data);
$('#myForm2')[0].reset();
});
alert("{ preffered_loc: "+preffered_loc+",relocation: "+relyn+" }");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm2" method="post" style="margin-left: -10%;">
<input type="text" class="form-control" id="preffered_loc" name="preffered_loc">
<input type="checkbox" name="relocation[]" id="relocation" />
<input type="button" id="submitFormData2" onclick="SubmitFormData2();" value="Submit" />
</form>
As Satpal said:
You don't need two checkbox, maybe you want a radio button, but one checkbox can be checked = yes, not checked = no. I removed one of them.
You don't have an ID relocation. I changed it.
With the jQuery is(":checked") you get a true or false so I parse it to a Yes or No, following your code.

Since its a checkbox and not a radio user can have multiple selections, for eg:
<input type="checkbox" name="relocation[]" class="relocation" value="Yes">
<input type="checkbox" name="relocation[]" class="relocation" value="No" >
<input type="checkbox" name="relocation[]" class="relocation" value="Both" >
try using the :checked selector,
$( ".relocation:checked" ).each(function(i,v){
alert(v.value)
});
Demo here

I think you should use class for the check-boxes instead of id, because id must be unique for each field. You should try this:
<form id="myForm2" method="post" style="margin-left: -10%;">
<input type="text" class="form-control" id="preffered_loc" name="preffered_loc">
<input type="checkbox" name="relocation[]" class="relocation" value="Yes">
<input type="checkbox" name="relocation[]" class="relocation" value="No" >
<input type="button" id="submitFormData2" onclick="SubmitFormData2();" value="Submit" />
</form>
<script>
function SubmitFormData2() {
var preffered_loc = $("#preffered_loc").val();
var relocation = '';
var sap = '';
$( ".relocation" ).each(function() {
if($( this ).is(':checked')){
relocation = relocation+''+sap+''+$( this ).val();
sap = ',';
}
});
alert(rel);
$.post("r_two.php", { preffered_loc: preffered_loc,relocation: relocation },
function(data) {
$('#results').html(data);
$('#myForm2')[0].reset();
});
}
</script>

Here is a sample code for your reference
<form id="myForm" method="post">
Name: <input name="name" id="name" type="text" /><br />
Email: <input name="email" id="email" type="text" /><br />
Phone No:<input name="phone" id="phone" type="text" /><br />
Gender: <input name="gender" type="radio" value="male">Male
<input name="gender" type="radio" value="female">Female<br />
<input type="button" id="submitFormData" onclick="SubmitFormData();" value="Submit" />
</form>
function SubmitFormData() {
var name = $("#name").val();
var email = $("#email").val();
var phone = $("#phone").val();
var gender = $("input[type=radio]:checked").val();
$.post("submit.php", { name: name, email: email, phone: phone, gender: gender },
function(data) {
$('#results').html(data);
$('#myForm')[0].reset();
});
}

You couldn't select the checkbox elements at all because you weren't including the [] in the selector. You can either escape the brackets as described in this SO Q/A or simply remove the brackets (the example code below does the latter)
I'd suggest using radio buttons as the user can immediately see what the options are. (Have a third option for both)
The code below uses checkboxes and puts all selected options into an array that gets passed along. This will allow the user to use both options
<script>
function SubmitFormData2() {
var preffered_loc = $("#preffered_loc").val();
var relocation = [];
$(".relocation:checked").each(function () {
relocation.push ($this.vak ();
}); // :checked is provided by jquery and will only select a checkbox/radio button that is checked
$.post("r_two.php", { preffered_loc: preffered_loc,relocation: relocation },
function(data) {
$('#results').html(data);
$('#myForm2')[0].reset();
});
}
And don't forget to remove [] from the checkboxes class.

<script>
function SubmitFormData2() {
var preffered_loc = $("#preffered_loc").val();
var relocation = {};
$('.relocation').each(function(index) {
if ($(this).is(':checked')) {
relocation[index] = $(this).val();
}
});
relocation = JSON.stringify(relocation);
$.post("r_two.php", { preffered_loc: preffered_loc, relocation: relocation }, function(data) {
$('#results').html(data);
$('#myForm2')[0].reset();
});
}
</script>
Variable 'relocation' must be an object to contain multiple values, like you said a user can select both YES and NO. And change the checkbox class from relocation[] to relocation.

Form submit values not recognized in jQuery code

I have this form:
<form name="form" method="post">
<div>
<p>
Problem Name: <input type="text" size="20" name="problem_name"></input>
</p>
<p>
Explain the problem
</p>
<p>
<textarea name="problem_blurb" cols=60 rows=6 ></textarea>
</p>
</div>
<div>
<span class="error" style="display:none"> Please Enter Valid Data</span>
<span class="success" style="display:none"> Registration Successfully</span>
<input type="submit" class="button" value="Add Problem"></input>
</div>
<form>
and here is my JS:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" >
$(function()
{
$("input[type=submit]").click(function()
{
var name = $("#problem_name").val();
var problem_blurb = $("#problem_blurb").val();
alert ("name: " + name);
alert ("problem_blurb: " + problem_blurb);
var dataString = 'name='+ name + '&username=' + username + '&password=' + password + '&gender=' + gender;
if(name=='' || username=='' || password=='' || gender=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "join.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
});
</script>
I went through the basic jQuery tutorials, but still confused with their syntax. For some reason, these variables show up as undefined:
var name = $("#problem_name").val();
var problem_blurb = $("#problem_blurb").val();
alert ("name: " + name);
alert ("problem_blurb: " + problem_blurb);
Any idea what I am doing wrong?

# refers to id attributes, rather than names.
Use $('input[name="problem_name"]') to refer to the elements.

Add id="problem_name" and id="problem_blurb" respectively. The jQuery '#' selector looks for id attributes.
You can have both id and name attributes. id is the DOM identifier while name is the form input identifier.

The hash-tag selector tells it to look for that ID. In your HTML you only have those tags with a name attribute. Put the same value in the id attribute and you will be all set.
<input id="problem_name" type="text" size="20" name="problem_name"></input>
<textarea id="problem_blurb" name="problem_blurb" cols=60 rows=6 ></textarea>

You would also try ID in your elements, which is the identifier for # in jQuery.
<input type="text" size="20" id="problem_name">
Which also go for your Button.
If you have <input type="button" ... id="bn"> you can replace "input[type=submit]" (which in your case will activate ALL submit buttons on the page) with $("#bn").click(function() { .. });.

jQuery val() failing on dynamically generated input

I have the following dynamically created HTML block:
<form class="standard settingsPage" method="post" enctype="multipart/form-data" name="account" style="background-color: rgb(61, 80, 133);">
<h2>Add New Account</h2>
<p>
<label class="" disabled="true">E-mail address:</label>
<input id="accountEmailAddress" class="" type="text" value="" name="accountEmailAddress"/>
</p>
<p>
<label class="" for="accountEmailPassword">Password:</label>
<input id="accountEmailPassword" type="password" name="accountEmailPassword"/>
</p>
<p class="submit">
<input type="button" onclick="checkEmailSettings();" value="Send" name="submit"/>
</p>
<p>
<label>Mail Server:</label>
<input id="mail2server" type="text" name="mail2server"/>
</p>
<p>
<label>Mail Type:</label>
<select id="mail2type" name="mail2type">
</select>
</p>
<p>
<label>Mail Security:</label>
<select id="mail2security" name="mail2security">
</select>
</p>
<p>
<label>Mail Server Port:</label>
<input id="mail2port" type="text" name="mail2port"/>
</p>
<p>
<label>Mail Username:</label>
<input id="mail2username" type="text" name="mail2username"/>
</p>
<p class="submit">
<input id="mailsend" type="button" name="mailsend" onclick="checkEmailSettings();" value="Send"/>
</p>
</form>
Which is appended to an existing form.
However when I do $('#mail2server').val() it returns blank, even if there is something in the box. If I do $('#mail2server').attr('name') it returns the name, so it definitely recognizes that the element exists. Any ideas why this would be failing?
Cheers,
Gazler.
EDIT
function checkEmailSettings()
{
var emailAddress=$("#accountEmailAddress").val();
var emailPassword=$("#accountEmailPassword").val();
var datastring = "emailaddress="+emailAddress+"&emailpassword="+emailPassword;
if (additionalInfo == 1)
{
var mailserver = $("#mail2server").val();
var mailtype = $("#mail2type").val();
var mailsecurity = $("#mail2security").val();
var mailport = $("#mail2port").val();
var mailusername = $("#mail2username").val();
alert($("#mail2server").val());
datastring += "&mailserver="+mailserver+"&mailtype="+mailtype+"&mailsecurity="+mailsecurity+"&mailport="&mailport+"&mailusername="+mailusername;
}
$('input[type=text]').attr('disabled', 'disabled');
$('input[type=password]').attr('disabled', 'disabled');
$('input[type=button]').attr('disabled', 'disabled');
$.ajax({
type: "GET",
url: "checkemailsettings.php",
data: datastring,
async: true,
cache: false,
timeout:50000,
success: function(data){
switch(parseInt(data))
{
//SNIPPED
case 4:
alert("More information needed.");
if (additionalInfo == 0)
{
var string = addTextToForm("Mail Server","mail2server");
string += addOptionsToForm("Mail Type","mail2type", new Array("IMAP", "POP3"));
string += addOptionsToForm("Mail Security","mail2security", new Array("NOTLS", "TLS", "SSL"));
string += addTextToForm("Mail Server Port","mail2port");
string += addTextToForm("Mail Username","mail2username");
string += addButtonToForm("Send","mailsend", "checkEmailSettings();");
alert(string);
$('form[name=account]').append(string);
additionalInfo = 1;
}
break;
}
},
});
}
function addTextToForm(strLabel, strID, strVal)
{
if (!strVal) {return "<p><label>"+strLabel+":</label><input id=\""+strID+"\" type=\"text\" name=\""+strID+"\" /></p>";}
return "<p><label>"+strLabel+":</label><input id=\""+strID+"\" type=\"text\" name=\""+strID+"\" value=\""+strVal+"\"/></p>";
}
function addButtonToForm(strLabel, strID, functionName)
{
return "<p class=\"submit\"><input id=\""+strID+"\" value=\""+strLabel+"\" onclick=\""+functionName+"\" type=\"button\" name=\""+strID+"\"/></p>";
}
function addOptionsToForm(strLabel, strID, optionsArr)
{
var returnstring="<p><label>"+strLabel+":</label><select id=\""+strID+"\" name=\""+strID+"\">";
for (i=0; i<optionsArr.length; i++)
{
returnstring += "<option>"+optionsArr[i]+"</option>";
}
returnstring += "</select></p>";
return returnstring;
}

The "alert" call says $('#mailserver'), not $('#mail2server')

I created a sample page that dynamically added the code you had above and everything worked just fine. There must be something else going on, perhaps in the function that your submit button is calling?

I think it's good to add "return false;" at the end of the onclick attribute in the input buttons.