Year/Month/Date input - focus

I'm looking for some simple code
<input type="text" name="year" maxlength="4">
<input type="text" name="month" maxlength="2">
<input type="text" name="day" maxlength="2">
so when I finish typing the year, it will focus on month then day and stop.
I can't seem to find the right search words in Google. I,m sure this has been done by a 1000 people.

Try this code; I used jQuery to accomplish this. You'll need to include jquery in the same directory and also add the "id" attribute to each of your inputs.
<script src='jquery.js' type="text/javascript"></script>
<input type="text" name="year" id="year" maxlength="4">
<input type="text" name="month" id="month" maxlength="2">
<input type="text" name="day" id="day" maxlength="2">
<script type="text/javascript">
$("#year").bind( 'keypress', function(e) {
if( $("#year").val().length >= 4 )
$("#month").focus();
});
$("#month").bind( 'keypress', function(e) {
if( $("#month").val().length >= 2 )
$("#day").focus();
});
</script>

Related

Get value with $_POST from multiple brackets

<input type="text" class="text" id="attachments-1-vid_id" name="attachments[1][vid_id]" value="1qaq0F-SXpo8">
<input type="text" class="text" id="attachments-2-vid_id" name="attachments[2][vid_id]" value="2qaq0F-SXpo8">
<input type="text" class="text" id="attachments-3-vid_id" name="attachments[3][vid_id]" value="3qaq0F-SXpo8">
<input type="text" class="text" id="attachments-4-vid_id" name="attachments[4][vid_id]" value="4qaq0F-SXpo8">
This is my input. I want to check it with only [vid_id]. Is it possible?
If any input posted
if( isset($_POST['vid_id']) ) {
//do it...
}
You are accessing the vid_id index which isn’t really what is passed in the $_POST superglobal.
The solution is based on two assumptions.
Only that input exist.
This is pretty straight forward:
<?php
if(isset($_POST[‘attachments’][231][‘vid_id’]){}
OR
<?php
if(array_key_exists(“vid_id”, $_POST[‘attachments’][231])){}
Similar inputs also exist and you want to perform for multiple inputs.
By this, I mean..
<input type=text name=attachments[][vid_id] />
.....
<input type=text name=attachments[][vid_id] />
<input type=text name=attachments[][vid_id] />
For this, you have to insert it in a loop.
<?php
foreach($_POST[‘attachments’] as $arr){
if(array_key_exists(“vid_id”, $arr){
// do stuff
}
}

How to submit form with dynamical added textbox in div MVC.?

How to submit form with dynamical added texbox in div MVC.
Hi,
I want to submit a form which a textbox (full name),age ,(Phone no,phonenotype)
User can add n no. of phone no,phonetype eg.
Name -michale
age- 27
Phone:989878767 phonetype - mobile
Phone 022787656 phonetype- office
I want to submit this form to save the data in the database.
But in formcollection phone,phonetype is coming as separate array .
Hence unable to find which phone no. is mobile or office.
A dirty way:
use a name concatenated with a number:
<body> <div id="listPhones">
<div>
<input type="text" name="phone00"/><input type="text" name="phonetype00"/>
</div>
</div>
<bouton onclick="addPhone()">More</bouton>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.3.min.js"> </script>
<script type="text/javascript">
function addPhone() {
var nbr_phone = $("#listPhones").children().length;
$("#listPhones").append("<div><input type='text' name='phone" + nbr_phone + "'/><input type='text' name='phonetype"+ nbr_phone + "'/></div>"); } </script>
</body>
How are you constructing the payload you're submitting?
You can POST JSON - e.g.
{"name":"foo", "age":"123", "phone":[{"type":"mobile", "no":"12345"}, {"type":"home", "no":"345678"}]}
If you're building <input />s, then something like this:
<ul>
<li>Name: <input type="text" name="name" /></li>
<li>Age: <input type="text" name="age" /></li>
<li>Phone type:
<input type="radio" name="phone[0][type]" value="mobile" /> Mobile
<input type="radio" name="phone[0][type]" value="home" /> Home
</li>
<li>Phone: <input type="text" name="phone[0][no]" /></li>
<li>Phone type:
<input type="radio" name="phone[1][type]" value="mobile" /> Mobile
<input type="radio" name="phone[1][type]" value="home" /> Home
</li>
<li>Phone: <input type="text" name="phone[1][no]" /></li>
</ul>
<input type="submit" value="go" />
Hth.

load dynamic values in form elements in jquerymobile

I have one page called index.html.I need to load some values at the time of showing page via jquery mobileevent .
Text and text area values added well.But the filpbox is not updating.Can anyone please to solve this ?
inxedx.html filp box coding
<label for="group_name" class="ui-hidden-accessible"></label>
<input type="text" name="group_name" id="group_name" placeholder="Enter Group Name" />
<label for="group_desc" class="ui-hidden-accessible"></label>
<textarea name="group_desc" id="group_desc" placeholder="Enter Group Decription"></textarea>
<label for="group_published">Published</label>
<select name="group_published" id="group_published" data-role="slider" data-theme="b">
<option value="1" >Yes</option>
<option value="0" >No</option>
</select>
test.js
$('#pg_add-group').on('pageshow', function(event) {
$('input[id=group_name]').val('hello');
$('textarea[id=group_desc]').val('hello desc');
$('select[id=group_published]').selected = false;
$( ".input[id=group_name]" ).textinput( "refresh" );
$( ".textarea[id=group_desc]" ).textinput( "refresh" );
});
You forgot to enhance look of select box, it is done like this:
$('select[id=group_published]').selectmenu('refresh', true);
Read more about it here.
Update:
I didn't look carefully so I didn't so your question was about flipswitch slider.
Working example: http://jsfiddle.net/Gajotres/vds2U/75/
HTML:
<label for="flip-1">Flip switch:</label>
<select name="flip-1" id="flip-1" data-role="slider" data-default-value="off">
<option value="off" defaultSelected>Off</option>
<option value="on">On</option>
</select>
JavaScript:
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#reset', function(){
$("#flip-1").val('off').slider('refresh');
});
});

Paypal automatic redirect to Store Vendor

I made a e-commerce which handles payments by Paypal, the flow works good although there is a boring thing, when the user finish to pay, to go back to the StoreWebSite has to click to the button which was provided by PayPal page.
there is anyway to make that operation automatic?
there is any flag I can set to force paypal redirect to my StoreWebSite when the user finish to pay?
basically I do that
Basically I do the following:
<html ng-app>
<body data-ng-controller="testController">
<form id="Checkpay" name="Checkpay" style="margin: 0" method="post" action="https://www.sandbox.paypal.com/cgi-bin/webscr" target="_blank" class="ng-pristine ng-valid">
<input type="hidden" id="return_url" name="return_url" value="">
<input type="hidden" name="quantita" id="qtytext" value="0">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="item_name" value="Le Spose di Nika">
<input type="hidden" name="business" value="TEST#TEST.it">
<input type="hidden" name="currency_code" value="EUR">
<input type="hidden" name="cancel_return" id="cancel_return" value="">
<input type="hidden" name="return" id="return" value="">
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" id="H_amount" name="amount" value="719.80">
<input type="hidden" id="H_first_name" name="first_name">
<input type="hidden" id="H_address1" name="address1">
<input type="hidden" id="H_city" name="city">
<input type="hidden" id="H_state" name="state">
<input type="hidden" id="H_zip" name="zip">
<input type="hidden" id="H_email" name="email">
<input type="hidden" id="Country" name="country">
<input type="hidden" id="charset" name="charset" value="utf8">
<input type="hidden" id="rm" name="rm" value="2">
<input type="hidden" id="notify_url" name="notify_url" value="">
<input id="Submit1" type="submit" value="submit_post" />
</form>
<input id="Submit2" type="button" data-ng-click='pay()' value="js_post" />
</body>
</html>
<script src="http://localhost:27433/Scripts/jquery-1.7.1.min.js"></script>
<script src="http://localhost:27433/Scripts/jquery-ui-1.8.20.min.js"></script>
<script src="http://localhost:27433/Scripts/angular.js"></script>
<script>
function test() {
}
function testController($scope, $http) {
var URL = "http://backend.MYSITE.com/";
$scope.payTest = function () {
var PAYPAL_URL_RELEASE = "https://www.paypal.com/cgi-bin/webscr";
$('#return_url').val(URL);
$('#cancel_return').val(URL + '/ErrorPay');
$('#return').val(URL + '/Success');
$('#notify_url').val(URL + '/PayPalReceiverIPN.ashx?idOrder=');
document.forms["Checkpay"].action = PAYPAL_URL_RELEASE;
document.forms["Checkpay"].submit();
}
}
</script>
return_url
The URL to which the sender's browser is redirected after approving a payment on paypal.com.
You can find it here

How to fix conflict with jQuery UI and jQuery? Datepicker giving error

I am trying to use the jQuery datepicker for a form on a site that uses jQuery 1.3.2 but it's not working. I have to reference a newer jQuery library for some of my form functionality, and also the jQuery ui for datepicker to work. I have used noConflict for the newer jquery library but it's still not working. I get Uncaught TypeError: Cannot read property 'document' of null in the console. Updating/removing the 1.3.2 reference is not an option.
Here is my fiddle, which works. but i get the error above in Chrome (not FF) and the datepicker will not work on my site. http://jsfiddle.net/pnA33/
Can anyone help? It works locally but not on the server (which is a dev enviornment so I can't share a link). I found this but as I am relatively new to jQuery it is over my head.
jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript">
var jQuery_1_9_1 = jQuery.noConflict(true);
jQuery_1_9_1(document).ready(function() {
jQuery_1_9_1( "#datepicker" ).datepicker({ minDate: -1, maxDate: "+24D" });
jQuery_1_9_1('#pancettaForm').change(function () {
jQuery_1_9_1('.address,#new-ship-date').hide();
if (jQuery_1_9_1('#ship-address').prop('checked')) {
jQuery_1_9_1('.address').show();
}
else if (jQuery_1_9_1('#ship-date').prop('checked')) {
jQuery_1_9_1('#new-ship-date').show();
}
else if (jQuery_1_9_1('#ship-both').prop('checked')) {
jQuery_1_9_1('.address, #new-ship-date').show();
}
});
});
function validateForm()
{
var x=document.forms["pancettaForm"]["order-number"].value;
if (x==null || x=="")
{
alert("Please provide your order number from the confirmation email sent immediately after placing your order.");
return false;
}
}
</script>
HTML:
<form name="pancettaForm" method="post" action="http://lizlantz.com/lcform.php" id="pancettaForm" onsubmit="return validateForm()">
<input type="hidden" value="Pancetta Order Update" name="subject">
<input type="hidden" value="cookware/partners_10151_-1_20002" name="redirect">
<ol>
<li>
<label for="update-ship">I'd like to:</label>
<input id="ship-address" name="update-ship" type="radio" value="update-ship-address"/> Have pancetta shipped to a different address than my skillet<br />
<input id="ship-date" name="update-ship" type="radio" value="update-ship-date" /> Have pancetta shipped sooner than June 14, 2013 <br />
<input id="ship-both" name="update-ship" type="radio" value="update-both" /> Make changes to both the shipping address and shipping date
</li>
<li>
<label for="order-number"><em>*</em>Order Number (available in order confirmation email):</label>
<input type="text" name="order-number">
</li>
<li>
<label for="full-name"><em>*</em>Recipient Full Name:</label>
<input type="text" name="full-name">
</li>
<li class="address" style="display: none;">
<label for="address">
<em>*</em>Address
</label>
<input type="text" name="address">
<label for="address2">
Address Line 2
</label>
<input type="text" name="address2">
</li>
<li class="address" style="display: none;">
<label for="city">
<em>*</em>City
</label>
<input type="text" name="city">
<label for="state">
<em>*</em>State
</label>
<select name="state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
</select>
<label for="zip">
<em>*</em>Zip Code
</label>
<input type="text" name="zip">
</li>
<li id="new-ship-date" style="display: none;">
<em>*</em><label for="updated-ship-date">New Ship Date:</label>
<input type="text" id="datepicker" name="updated-ship-date" value="Update Your Ship Date" />
</li>
<li>
<label for="phone">
<em>*</em>Phone (for delivery questions)
</label>
<input type="text" name="phone">
</li>
</ol>
<input type="submit" id="button" name="submit" value="Update Pancetta">
</form>
Ah ha! You actually cannot run two versions of jQuery on the same document instance at one time...hence the issue here. This solution comes directly from Splendìd Angst's answer in this thread Can I use multiple versions of jQuery on the same page?
Basically you must declare your noConflict version prior to entering the document "main loop" I suppose you can call it.
Declare your noConflict variable outside the document.ready call...use the standard $(document).ready() syntax, then use (and ONLY use) your noconflict variable within the ready closure. That should do it.
I haven't tested this mind you but it makes sense and it won't take you much tweaking of your code to try it out.
TIL something new about jQuery :)

Resources