iphone web form validation - javascript

I have this form for a dedicated iphone landing page. but cant find anything that will deal with the validation. i only need to validate the number but the name could also be usefull. i cant seem to find anything that will alert the user the field has not been entered.
this is iphone only and is a web form not a app
<form method="post" action="submitquote.php" name="quoteform">
<label>Your Full Name</label>
<input style="outline:none;" id="name" type="text" name="name" size="20" value="" class="elements"/>
<label>Your Email Address</label>
<input style="outline:none;" id="email" type="email" name="email" size="20" value="" class="elements"/>
<label>Your Telephone Number</label>
<input style="outline:none;" id="telephone" type="text" pattern="[0-9]*" name="telephone" size="20" value="" class="elements">
<label>Company Postcode</label>
<input style="outline:none;" id="postcode" type="text" name="postcode" size="20" value="" class="input" />
<div class="saveon">Save on..</div>
<div class="checkboxs">Gas<input type="hidden" name="gasresult" value="no" /><input name="gasresult" type="checkbox" value="yes" checked="checked" /> Electricity<input type="hidden" name="electricresult" value="no" /><input name="electricresult" type="checkbox" value="yes" checked="checked" /></div>
<input type="hidden" value="<?php echo $myid ?>" name="track" />
<input type="hidden" value="<?php echo $_GET['utm_source']; ?>" name="utm_source" />
<input type="hidden" value="<?php echo $_GET['utm_medium']; ?>" name="utm_medium" />
<input type="hidden" value="<?php echo $_GET['utm_term']; ?>" name="utm_term" />
<input type="hidden" value="<?php echo $_GET['utm_content']; ?>" name="utm_content" />
<input type="hidden" value="<?php echo $_GET['utm_campaign']; ?>" name="utm_campaign" />
<input type="submit" value="" class="submit" onclick="pageTracker._trackPageview('/HomePage/ClassicQuoteRequest/Submit')" />
</form>

You can use JavaScript to get the value of an input object of a form.
function nameOK() {
var myForm = document.quoteform; // document.#nameOfForm#
var input = myForm.name;
var content = input.value;
return (content != "");
}
It is untested, but I have recently done something similar to store cookies.
Hope it works,
ief2

Related

Three forms actions in one php page

Assume that I have a PHP page that has three forms.
Form one, it will ask the user to enter the email address while the code is hidden.
<label for="email">Email Address:</label> <input type="text" id="email" name="email">
<input type="hidden" id="code" name="code" value="42"> <input type="submit" value="Submit1">
Form two will be showing after step 1. In this step, the user will be asked to enter the code in step 1 (which is equal to 42).
<input type="number" id="code2" name="code2"> <input type="submit" value="Submit2">
Form three, will be showing after entering corrected code in step 2.
<input type="number" id="code2" name="code2"> <input type="submit" value="Submit3">
How can I program it?
You could try this approach :
<?php
function getFormContent() {
$email = $_POST['email'] ?? null; //$email equals to null if it is undefined, to prevent errors
if (!$email) {
echo '<input type="text" name="email" placeholder="Email.." />';
echo '<input type="hidden" id="code" name="code" value="42">';
} else {
echo '<input type="hidden" name="email" value="'.$email.'" />'; //keep email set after submitting first step
}
if ($email && $_POST['code']) {
if (isset($_POST['code2']) && $_POST['code2'] == $_POST['code']) {
//final form
}
else { //second step
echo '<input type="number" id="code2" name="code2">';
echo '<input type="hidden" id="code" name="code" value="42">'; //we still need this in case user submitted a wrong code
}
}
}
?>
<form method="post">
<?= getFormContent() ?>
<input type="submit" />
</form>
You need to state the action of the form as the name of the file.
So, if the file you are working on is name example.php it should look like so:
$email = trim(get_variable_value('email'));
$code = trim(get_variable_value('code'));
$code2 = trim(get_variable_value('code2'));
//make sure to validate the input!! if it's not valid send back
<? if(!isset($email)){ //alternatively, you can add a hidden input `stage`. I just don't like it, as it can be bypassed.
?>
<form name="transferToNewForm" action="example.php" method="post">
<label for="email">Email Address:</label> <input type="text" id="email" name="email">
<input type="hidden" id="code" name="code" value="42">
<input type="submit" value="Submit1">
</form>
<? }
if(isset($email) && isset($code) && $code == 42){ ?>
<form name="transferToNewerForm" action="example.php" method="post">
<label for="email">Email Address:</label> <input type="text" id="email" name="email" value="<?= $email ?>" readonly>
<input type="number" id="code2" name="code2">
<input type="submit" value="Submit2">
</form>
<? }
if(isset($email) && isset($code2) && $code2 == 42){ ?>
<form name="finalFrom" action="theActualPageYouWant.php" method="post">
<label for="email">Email Address:</label> <input type="text" id="email" name="email" value="<?= $email ?>" readonly>
<input type="number" id="code2" name="code2">
<input type="submit" value="Submit3">
</form>
<? } ?>

How to link webform to Bronto Database list

I have an old Html form already hooked up to Bronto already:
<div id="mc_embed_signup"><form id="lunar-form"><input name="fid" type="hidden" value="3yuzy87x8gjdf73zq9p6lav86dfdw" />
<input name="sid" type="hidden" value="01c3cd9e15ec122d6bada9aeba8dbe44" />
<input name="delid" type="hidden" value="" />
<input name="subid" type="hidden" value="" />
<input name="td" type="hidden" value="" />
<input name="formtype" type="hidden" value="addcontact" />
<input id="field_361909" class="hidden field" name="67765[361909]" type="hidden" value="Weekly" />
<input id="field_361796" class="hidden field" name="67746[361796]" type="hidden" value="Hair Shaman Lunar" />
<script type="text/javascript">
var fieldMaps = {};
</script>
<fieldset id="popupfieldset">
<div class="mc-field-group-email">
<input id="mce-EMAIL" class="text field fb-email" title="7 characters minimum" autocomplete="off" name="74662" pattern=".{7,}" required="" type="email" value="" placeholder="Email" />
i want to add another input for first name, how do I make sure it connects to the bronto database correctly?

Form Calculation in CodeIgniter

i want to do is after typing quantity, the balance and quantity should do addition and place the answer to balance automatically. this is a piece of codeigniter projet. the balance comes from database.
<form action="addnew" method="post">
<input type="text" name="io" placeholder="IN_OUT"><br>
<input type="date" name="date" placeholder="Date yyyy-mm-dd" value="<?php echo date("Y-m-d") ?>" disabled><br>
<input id="qty" type="number" name="qty" placeholder="Quantity"><?php echo $key->ns_balance; ?><br>
<input type="text" name="breed" placeholder="Breed"><br>
<input type="number" name="es_id" placeholder="Estate"><br>
<input type="number"
name="balance"
placeholder="Balance"
value="" disabled>
<br>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="Reset" value="Reset"
</form>
User interface image
try using this jquery code:
<div id="test"><input id="qty" type="number" name="qty" placeholder="Quantity"><?php echo $key->ns_balance; ?></div>
<input id="balance" type="hidden" value="<?php echo $key->ns_balance; ?>">
$("#qty").on("keyup", function(){
var qty = $("#qty").val();
var balance= parseInt($("#balance").val());
$("#test").text("Balance -"+qty*balance); //you can change the id to place result whereever you want
});

submitting forms using jquery mobile navbar links

I have two forms on a single page and I want to submit the forms individually using the corresponding links from a query mobile navbar. The forms submit fine but the content portion of the page goes blank (I believe the jquery mobile ajax is trying to transition to a page that is not specified). Is there a way to stop it trying to transition and just submit the form data?
HTML:
<div class="ui-grid-a">
<div class="ui-block-a">
<form name="adminform" id="adminform">
<legend>Administrator</legend>
<input type="text" name="user_id" id="user_id" value="<?php echo $user_data['user_id'];?>" />
<label for="first_name">First name*:</label>
<input type="text" name="first_name" id="first_name" value="<?php echo $user_data['first_name'];?>" placeholder="First name" />
<label for="last_name">Last Name*:</label>
<input type="text" name="last_name" id="last_name" value="<?php echo $user_data['last_name'];?>" placeholder="Last Name" />
<label for="email">E-Mail*:</label>
<input type="email" name="email" id="email" value="<?php echo $user_data['email'];?>" placeholder="E-Mail" />
</form>
</div><!--end block a-->
<div class="ui-block-b">
<form name="companyform" id="companyform" action="" method="post">
<legend>Billing Address</legend>
<!--<label for="companyid">Company Id:</label>-->
<input type="hidden" name="companyid" id="companyid" value="<?php echo $company_data['company_id'];?>" />
<label for="company_name">Company Name*:</label>
<input type="text" name="company_name" id="company_name" value="<?php echo $company_data['company_name'];?>" />
<label for="company_website">Website:</label>
<input type="text" name="company_website" id="company_website" value="<?php echo $company_data['company_website'];?>" />
<label for="company_address">Address*:</label>
<input type="text" name="company_address" id="company_address" value="<?php echo $company_data['company_address'];?>" />
<label for="company_suite">Suite:</label>
<input type="text" name="company_suite" id="company_suite" value="<?php echo $company_data['company_suite'];?>" />
<label for="company_city">City*:</label>
<input type="text" name="company_city" id="company_city" value="<?php echo $company_data['company_city'];?>" />
<label for="company_state">State*:</label>
<input type="text" name="company_state" id="company_state" value="<?php echo $company_data['company_state'];?>" />
<label for="company_postal_code">Postal Code*:</label>
<input type="text" name="company_postal_code" id="company_postal_code" value="<?php echo $company_data['company_postal_code'];?>" />
<label for="company_telephone">Telephone*:</label>
<input type="text" name="company_telephone" id="company_telephone" value="<?php echo $company_data['company_telephone'];?>" />
<label for="company_fax">Fax:</label>
<input type="text" name="company_fax" id="company_fax" value="<?php echo $company_data['company_fax'];?>" />
</form>
<div id="companyupdatestatus"></div>
</div><!--end block b-->
</div><!--end grid a-->
<div data-role="navbar">
<ul>
<li><a id="updateadmin" data-icon="check" data-ajax="false">Update Admin</a></li>
<li><a id="updatecompany" data-icon="check" data-ajax="false">Update Company Info</a></li>
<li>Change Password</li>
</ul>
</div>
</div>
Javascript:
$('#updatecompany').click(function() {
var company = $('#companyform').serializeArray();
/*$('#companyupdatestatus').html(company);*/
$.ajax({
type: "POST",
url: 'companyupdate.php',
data: company,
success: function(company) {
$('#companyupdatestatus').html(company);
}
});
});
Thanks in advanced, would really appreciate the help!!! Adam
Try return false like this:
$('#updatecompany').click(function() {
var company = $('#companyform').serializeArray();
/*$('#companyupdatestatus').html(company);*/
$.ajax({
type: "POST",
url: 'companyupdate.php',
data: company,
success: function(company) {
$('#companyupdatestatus').html(company);
}
});
return false;
});

get id from radio input by clicking a link (siblings?)

so i have a list of addresses each with edit links and i want to grab the ID of the input within the list item
<li class="last">
<div class="checkout-select-address"><input type="radio" name="checkout_selected_address" id="checkout_selected_address_3" value="" /></div>
<div class="checkout-select-address-details">
<p><label for="checkout_selected_address_3">(Mothers)</label> Edit Address</p>
<input type="hidden" id="checkout_selected_address_3_name" value="" />
<input type="hidden" id="checkout_selected_address_3_title" value="" />
<input type="hidden" id="checkout_selected_address_3_first_name" value="" />
<input type="hidden" id="checkout_selected_address_3_last_name" value="" />
<input type="hidden" id="checkout_selected_address_3_address_line_1" value="" />
<input type="hidden" id="checkout_selected_address_3_address_line_2" value="" />
<input type="hidden" id="checkout_selected_address_3_address_line_3" value="" />
<input type="hidden" id="checkout_selected_address_3_town_city" value="" />
<input type="hidden" id="checkout_selected_address_3_county" value="" />
<input type="hidden" id="checkout_selected_address_3_postcode" value="" />
<input type="hidden" id="checkout_selected_address_3_country" value="" />
</div>
<div class="clear"></div>
so clicking on the link with class "edit-link" it will get the ID for the radio input within the li
Thanks in advance
try this :
$(".edit-link").click(function(){
alert($(this).closest("li").find("input[type=radio]").attr("id"));
});
demo : http://jsfiddle.net/ZABBS/

Categories

Resources