Develop Reference

how i can add input type property the same like a name value this input with jquery

I have the following input fields:
<form id="validate">
<input name="name" value="" validate-required />
<input name="email" value="" validate-required validate-email/>
<input name="date" value="" validate-date/>
<input name="ip" value="" validate-regexp="^\d+\.\d+\.\d+\.\d+$" />
<input type="submit" value="Send" />
</form>
And I need to add a type value for every field the same, like a name value, but with jQuery.
So far I've tried this :
$(":not(input[type=submit])").prop("type", ????); I don't know what I must write on ???? place.

$(":not(input[type=submit])").prop("type", function (i, p) { return this.name; });
Note that this doesn't check if the type you're setting it with is valid. See this for more details jQuery.prop().

If you want to make every input of the same type such as : text , use the following code.
$(":not(input[type=submit])").prop("type", $(this).val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="validate">
<input name="name" value="" validate-required />
<input name="email" value="" validate-required validate-email/>
<input name="date" value="" validate-date/>
<input name="ip" value="" validate-regexp="^\d+\.\d+\.\d+\.\d+$" />
<input type="submit" value="Send" />
</form>
For other inputs in your code you could also use the following input types that are supported in HTML5 as well :
text,date,datetime,email,url,datetime-local
A list of all possible input type attribute values is given : here.

jQuery to populate array-named form fields based on first entered text box value

I have a form with variable number of inputs as an array
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>
The idea is when i put some value in the first field (foo[1]) i need the jQuery or Javascript copy the value from #foo[1] into #foo[2], #foo[3], etc depending on the array.

Do you need following behavior :
$(document).ready(function(){
$("input[id^=foo\\[]").prop("disabled",true); //disable all elements first
$("input#foo\\[1\\]").prop("disabled",false); //then enable the first one
$("input#foo\\[1\\]").change(function(){
var source = $(this);
var currentVal = $(source).val();
$("input[id^=foo\\[]").each(function(){
if(!$(this).is(source))
$(this).val(currentVal);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value=""/>
<input type="text" id="foo[3]" name="foo[3]" value=""/>
<input type="text" id="foo[4]" name="foo[4]" value=""/>
<input type="text" id="foo[5]" name="foo[5]" value=""/>
</form>

$('input').on('input', function(){
$(this).siblings().val($(this).val());
});
Couldn't tell if you just wanted the first or all. If just the first, you can target with an id or jQuery.
$('input').eq(0).on('input', function(){});

Something like this
HTML
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>
JavaScript
$("input[id=foo\\[1\\]").on("input", function (){
$(this).siblings().val($(this).val());
});
And if you want the other to be readonly:
$("input[id^=foo\\[]:not([id=foo\\[1\\]])").attr("readonly", "readonly");

only first form is checked by jQuery

i have one form on my page. so i want to check each input with corresponding button. so i wrote smth like this and it only checks first input even if i click on second inputs button.
<form target="myFrame" method="post" id="addProduct">
<fieldset>
<input type="hidden" name="iProductAdd" value="6" />
<input type="number" onkeypress="return isNumberKey(event)" name="aProducts[6]" autocomplete="off" value="" maxlength="4" size="4" onclick="function()" class="quantity" />
<input type="submit" onclick="refreshIframe();" value="" class="addtobasket" id="addtobasket" />
</fieldset>
<fieldset>
<input type="hidden" name="iProductAdd" value="7" />
<input type="number" onkeypress="return isNumberKey(event)" name="aProducts[7]" autocomplete="off" value="" maxlength="4" size="4" onclick="function()" class="quantity" />
<input type="submit" onclick="refreshIframe();" value="" class="addtobasket" id="addtobasket" />
</fieldset>
<fieldset>
<input type="hidden" name="iProductAdd" value="4" />
<input type="number" onkeypress="return isNumberKey(event)" name="aProducts[4]" autocomplete="off" value="" maxlength="4" size="4" onclick="function()" class="quantity" />
<input type="submit" onclick="refreshIframe();" value="" class="addtobasket" id="addtobasket" />
</fieldset>
</form>
and i have jQuery Code:
$(document).ready(function(){
$("form").submit(function(){
// Get the Login Name value and trim it
var name = $.trim($('.quantity').val());
// Check if empty of not
if (name === '') {
$("#addtobasket").css("background-image", "url('http://restorani.weby.biz/templates/default/img/tick-red.png')");
return false;
} else {
$('input[type="submit"]').each(function(){
$("#addtobasket").css("background-image", "url('http://restorani.weby.biz/templates/default/img/tick-green.png')");
});
}
});
});

Your problem is that you are using ids as it were classes. An id should be unique in a document. So defining multiple objects with the same id is an error. And all functions will apply only the first they encounter. To do what you want, you have to use classes, so change your code in this way:
$(".addtobasket").css("background-image", "url('http://restorani.weby.biz/templates/default/img/tick-green.png')");
To look for all elements of that class.

How to clone/copy the value of several input inside in one single input

Hello I need this for my school project.
I want JAVASCRIPT to copy/Clone the values of 4 or 5 input fields, when typing content inside of them into one single input.
this is the input that must collect all values:
<input type="hidden" id="mainInput" name="main" value="" />
This is the rest inputs
<input type="text" id="input1" name="input1" value="info1" />
<input type="text" id="input2" name="input2" value="hello World" />
<input type="text" id="input3" name="input3" value="my SECOND" />
<input type="text" id="input4" name="input4" value="sure!" />
So in the final step, the result must be this:
<input type="hidden" id="mainInput" name="main" value="info1hello Worldmy SECONDsure!" />
PS this must happen without any submit buttons... There is a option called onFocus in JS.
So any ideas?

$('input[type="text"]').keydown(function () {
$('#mainInput').val($('#input1').val() + $('#input2').val() + $('#input3').val() + $('#input4').val())
})
jsFiddle example

You can try this method and works fine jsfiddle
<input type="text" class="testvalues" id="input1" name="input1" value="info1" />
<input type="text" class="testvalues" id="input2" name="input2" value="hello World" />
<input type="text" class="testvalues" id="input3" name="input3" value="my SECOND" />
<input type="text" class="testvalues" id="input4" name="input4" value="sure!" />
<input type="hidden" id="mainInput" name="main" value="" />
$('.testvalues').on('keyup',function(){
var txtfirst=$('#input1').val();
var txtsecond=$('#input2').val();
var txtthird=$('#input3').val();
var txtfourth=$('#input4').val();
$('#mainInput').val(txtfirst +" "+ txtsecond +" "+ txtthird +" "+ txtfourth );
});
Look at fiddle at http://jsfiddle.net/HGu5M/22/

$('input[type="text"]').change(function () {
$('#mainInput').val($('#input1').val() + $('#input2').val() + $('#input3').val() + $('#input4').val());
})

radio button hide and show form content

I would like create registration form based on which country.
default address form is the default visible input
when customer click on the non-uk radio button then automatically hide uk form and oppen non-uk address form
I think I need to use javascript or JQuery for this function.
could any one give me an advice for this function.
if you think my question is not acceptable could you please don't decrease my rate.
I can remove my question if u don't like.
here is my form code
<form action="sent.php" name="form1" method="post">
Name
<input type="text" name="name" />
<br />UK
<input type="radio" name="from" value="UK">
<br />Address Line 1
<input type="text" name="ad1" />
<br />Address Line 2
<input type="text" name="ad2" />
<br />Town
<input type="text" name="town" />
<br />Post Code
<input type="text" name="post_code" />
<br />EU
<input type="radio" name="from" value="UK">
<br />Address Line 1
<input type="text" name="ad1" />
<br />Address Line 2
<input type="text" name="ad2" />
<br />Town
<input type="text" name="town" />
<br />Post Code
<input type="text" name="post_code" />
<br />Country
<input type="text" name="post_code" />
<br />
</form>

You can wrap all the input elements except the radiobuttons in two different divs so you can catch the change event for the radio buttons and show and hide two divs accordingly.

You can either add a class to represent which elements are UK address elements and which are EU or, as Élodie Petit, answered wrap them in a div and then either show or hide them depending on which radion button was selected.
Here is a JSFiddle using the latter option.

I don't think you need to show or hide the elements necessarily as the form elements seem to be the same on both 'forms', consider :
<form action="sent.php" name="form1" method="post">
Name <input type="text" name="name" /><br/>
UK <input type="radio" name="from" value="UK" > / EU <input type="radio" name="from" value="EU" ><br />
Address Line 1 <input type="text" name="ad1" /> <br />
Address Line 2 <input type="text" name="ad2" /> <br />
Town <input type="text" name="town" /> <br />
Post Code <input type="text" name="post_code" /> <br />
</form>
And then when you request the "from" parameter, you'll know which country they're from?

I found simple solution for it with JQuery
With JQuery support
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
Here is the javascript code
$(document).ready(function() {
$("input[name$='from']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#c" + test).show();
});
});
</script>
here is the html code suppurated with div
<form action="sent.php" name="form1" method="post">
<label>UK <input type="radio" name="from" value="1" ></label><br />
<label>EU <input type="radio" name="from" value="2" ></label><br />
<div id="c1" class="desc">
Name <input type="text" name="name" /> <br />
Address Line 1 <input type="text" name="ad1" /> <br />
Address Line 2 <input type="text" name="ad2" /> <br />
Town <input type="text" name="town" /> <br />
Post Code <input type="text" name="post_code" /> <br />
</div>
<div id="c2" class="desc" style="display:none;">
Address Line 1 <input type="text" name="ad1" /> <br />
Address Line 2 <input type="text" name="ad2" /> <br />
Town <input type="text" name="town" /> <br />
Post Code <input type="text" name="post_code" /> <br />
Country <input type="text" name="post_code" /> <br />
</div>
</form>