I am trying make a register form adn using jquery validation. I have a problem.
I want only one "warning message" for "birthday select box"..I couldnt manage this and it look terrible when i get 3x warning for each bday select box. How can i give "one" warning message if at least one box not choosed?
And my codes are below, i made it short and working for test:
<script language="JavaScript" type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$.validator.addMethod("username", function(value, element) {
return this.optional(element) || /^[a-z0-9\_]+$/i.test(value);
}, "Username must contain only letters, numbers, or underscore.");
$("#regForm").validate();
});
</script>
</head>
<body>
<div>
<form method="post" id="regForm" action="register.php">
<div>
Name<br>
<input id="user_name" name="name" type="text" minlength="5" class="required username"/><br>
</div>
<div>
E-mail<br>
<input id="usr_email3" name="email" type="text" class="required email"/><br>
</div>
<div>
Password<br>
<input name="pass1" type="password" class="required password" minlength="5" id="pwd" /><br>
</div>
<div>
Confirm Password<br>
<input id="pwd2" name="pass2" class="required password" type="password" minlength="5" equalto="#pwd" /><br>
</div>
<div>
Birthday:
<select name="birthday_day" class="required">
<option value="">Day</option>
<option value="1" >1</option>
<option value="2" >2</option>
</select>
<select name="birthday_month" class="required">
<option value="">Month</option>
<option value="1" >January</option>
</select>
<select name="birthday_year" class="required">
<option value="">Year</option>
<option value="1900" >1900</option>
</select>
</div>
<div>
Gender:
<select name="gender" class="required">
<option value="">Choose</option>
<option value="Male">Male</option>
<option value="Female">Female</option><br /></div>
<br>
<div>
<input id="doRegister" name="doRegister" type="submit" value="Send"/>
</div>
</form>
</div>
Give an id to the div surrounding the birthday tags:
<div id="required">
Birthday:
<select name="birthday_day" class="required">
<option value="">Day</option>
<option value="1" >1</option>
<option value="2" >2</option>
</select>
<select name="birthday_month" class="required">
<option value="">Month</option>
<option value="1" >January</option>
</select>
<select name="birthday_year" class="required">
<option value="">Year</option>
<option value="1900" >1900</option>
</select>
</div>
Use the code below to apply a red border if any of the select tags are not selected:
$('#doRegister').click(function(){
var a = $('select[name="birthday_day"]').val();
var b = $('select[name="birthday_month"]').val();
var c = $('select[name="birthday_year"]').val();
if(a == '' || b == '' || c == '')
{
$('div#required').css('border', '1px solid f60f60');
}
else
{
$('div#required').css('border', 'none');
}
});
This,of course, avoids the use of the validator plugin that you're using
Related
i want to make dynamic form .so for that i tried foreach loop .everything going fine without select options. For making classname or id name unique i want place a index value but cant not place index value.take a look below:
<div class="form-group m-form__group row " v-for="(pack,index) in packs">
<div class="col-lg-3">
<label>SKU: #{{ index }}</label>
<input v-model="pack.sku" type="text" name="name" class="form-control m-input" placeholder="SKU">
</div>
<div class="col-lg-3">
<label>Unit:</label>
<select class="form-control select2 #{{ index }}" name="unit" v-model="pack.unit" >
<option value="0">KG</option>
<option value="1">ML</option>
<option value="2">Liter</option>
</select>
</div>
<div class="col-lg-3">
<label>Size:</label>
<input v-model="pack.size" type="number" name="name" class="form-control m-input" placeholder="Size">
</div>
<div class="col-lg-3">
<label>Barcode:</label>
<input v-model="pack.barcode" type="number" name="barcode" class="form-control m-input" placeholder="Barcode">
</div>
</div>
you need to reload select2.
html markup:
<select class="form-control select2 #{{ index }}" name="unit" v-model="pack.unit" id="unit">
<option value="0">KG</option>
<option value="1">ML</option>
<option value="2">Liter</option>
</select>
Vuejs code:
...
components: {
},
mounted() {
setTimeOut(() => {
let unit = $('#unit'); // or document.querySelector('#unit');
unit.select2();
}, 100);
},
I have a sign-up form which asks users to select a country from a drop down menu.
I have a bit of script that, depending on the country selected by the user, displays a particular Region/State field.
$("#Country").change(function() {
if ( $(this).val() == "GB") {
$("#RegionsUS").hide();
$("#RegionsOTHER").hide();
$("#RegionsUK").show();
}
else if ( $(this).val() == "US") {
$("#RegionsUS").show();
$("#RegionsOTHER").hide();
$("#RegionsUK").hide();
}
else {
$("#RegionsOTHER").show();
$("#RegionsUS").hide();
$("#RegionsUK").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<select name="Country" id="Country" class="form-control" required>
<option selected>Please select</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
<option value="FR">France</option>
</select>
<input type="text" id="RegionsOTHER" name="Region" class="form-control" placeholder="Region/State" maxlength="50">
<select id="RegionsUS" name="Region" class="form-control" style="display:none;">
<option value="Alabama">Alabama</option>
</select>
<select id="RegionsUK" name="Region" class="form-control" style="display:none;">
<option value="England">England</option>
<option value="Scotland">Scotand</option>
</select>
</form>
Problem is, when the form is submitted, all three region fields are submitted despite two of them always being hidden.
How do I prevent the hidden fields from being submitted with the form?
Thank you.
NJ
Sorry, despite searching pretty much all day yesterday and not seeing the following, my question is obviously very similar to this question:
Preventing an HTML form field from being submitted
So I've edited my function and HTML as follows:
$("#Country").change(function() {
if ( $(this).val() == 425) {
$("#RegionsUS").hide();
document.getElementById('RegionsUS').disabled = true;
$("#RegionsOTHER").hide();
document.getElementById('RegionsOTHER').disabled = true;
$("#RegionsUK").show();
document.getElementById('RegionsUK').disabled = false;
}
else if ( $(this).val() == 426) {
$("#RegionsUS").show();
document.getElementById('RegionsUS').disabled = false;
$("#RegionsOTHER").hide();
document.getElementById('RegionsOTHER').disabled = true;
$("#RegionsUK").hide();
document.getElementById('RegionsUK').disabled = true;
}
else {
$("#RegionsOTHER").show();
document.getElementById('RegionsOTHER').disabled = false;
$("#RegionsUS").hide();
document.getElementById('RegionsUS').disabled = true;
$("#RegionsUK").hide();
document.getElementById('RegionsUK').disabled = true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<select name="Country" id="Country" class="form-control" required>
<option selected>Please select</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
<option value="FR">France</option>
</select>
<input type="text" id="RegionsOTHER" name="Region" class="form-control" placeholder="Region/State" maxlength="50">
<select id="RegionsUS" name="Region" class="form-control" style="display:none;" disabled="disabled">
<option value="Alabama">Alabama</option>
</select>
<select id="RegionsUK" name="Region" class="form-control" style="display:none;" disabled="disabled">
<option value="England">England</option>
<option value="Scotland">Scotand</option>
</select>
</form>
Can somebody help me? I have question. I have view, name is pascasarjana.php
<div class="form-group">
<label>Program studi dan konsentrasi yang diminati</label><br/>
<input name="prodis" type="checkbox" value="p1">Program Studi Magister Manajemen<br/>
</div>
<div class="form-group">
<input name="prodis" type="checkbox" value="p2">Program Studi Magister Teknik Sipil
<select name="konsentrasi" class="form-control" id="konsentrasi1">
<option value="">Pilih Konsentrasi</option>
<option value="k1">Manajemen Konstruksi</option>
<option value="k2">Transportasi</option>
<option value="k3">Struktur</option>
</select>
</div>
<div class="form-group">
<input name="prodis" type="checkbox" value="p3">Program Studi Magister Ilmu Hukum
<select name="konsentrasi" class="form-control" id="konsentrasi2">
<option value="">Pilih Konsentrasi</option>
<option value="k4">Hukum Bisnis</option>
<option value="k5">Hukum Ketatanegaraan</option>
<option value="k6">Hukum Agraria</option>
<option value="k7">Litigasi</option>
</select>
</div>
<div class="form-group">
<input name="prodis" type="checkbox" value="p4">Program Studi Magister Teknik Informatika
<select name="konsentrasi" class="form-control" id="konsentrasi3">
<option value="">Pilih Konsentrasi</option>
<option value="k8">Soft Computing</option>
<option value="k9">Enterprise Information System</option>
<option value="k10">Mobile Computing</option>
</select>
</div>
<div class="form-group">
<input name="prodis" type="checkbox" value="p5">Program Studi Magister Teknik Arsitektur
<select name="konsentrasi" class="form-control" id="konsentrasi4">
<option value="">Pilih Konsentrasi</option>
<option value="k11">Arsitektur Digital</option>
</select>
</div>
AND I confused, how to insert multiple checkbox and select option data to database in my controller and model.
Try renaming your HTML entities as arrays
Eg.
input name="prodis" to input name="prodis[]"
select name="konsentrasi" to select name="konsentrasi[]"
Then print $_POST in your controller.
I guess you need to get data from select box on the basis of ticked checkbox.
For getting values from checkbox you need to define checkbox name as an array. In my code I am using exact indexes so we can get select box values accordingly.
I guess below first checkbox there should be another select box. Ignoring this select box (Which is actually not here), I am giving custom indexes here. Instead, we also can use like profis[] which actually auto generate indexes by incrementing it one on each occurrence in HTML
You can implement validation too. Here are modified code:
<div class="form-group">
<label>Program studi dan konsentrasi yang diminati</label><br/>
<input name="prodis[1]" type="checkbox" value="p1">Program Studi Magister Manajemen<br/>
</div>
<div class="form-group">
<input name="prodis[2]" type="checkbox" value="p2">Program Studi Magister Teknik Sipil
<select name="konsentrasi[2]" class="form-control" id="konsentrasi1">
<option value="">Pilih Konsentrasi</option>
<option value="k1">Manajemen Konstruksi</option>
<option value="k2">Transportasi</option>
<option value="k3">Struktur</option>
</select>
</div>
<div class="form-group">
<input name="prodis[3]" type="checkbox" value="p3">Program Studi Magister Ilmu Hukum
<select name="konsentrasi[3]" class="form-control" id="konsentrasi2">
<option value="">Pilih Konsentrasi</option>
<option value="k4">Hukum Bisnis</option>
<option value="k5">Hukum Ketatanegaraan</option>
<option value="k6">Hukum Agraria</option>
<option value="k7">Litigasi</option>
</select>
</div>
<div class="form-group">
<input name="prodis[4]" type="checkbox" value="p4">Program Studi Magister Teknik Informatika
<select name="konsentrasi[4]" class="form-control" id="konsentrasi3">
<option value="">Pilih Konsentrasi</option>
<option value="k8">Soft Computing</option>
<option value="k9">Enterprise Information System</option>
<option value="k10">Mobile Computing</option>
</select>
</div>
<div class="form-group">
<input name="prodis[5]" type="checkbox" value="p5">Program Studi Magister Teknik Arsitektur
<select name="konsentrasi[5]" class="form-control" id="konsentrasi4">
<option value="">Pilih Konsentrasi</option>
<option value="k11">Arsitektur Digital</option>
</select>
At controller end you can just check if index 2 $this->input->post('prodis[2]') then get the value of select box with index 2 $this->input->post('konsentrasi[2]'
You can check it dynamically by keeping code redundancy in your mind. Let me know if you face any issue.
Insert Multiple data using check box or anything on HTML.Just use array "[]".
<input name="checkbox[]" type="checkbox" value="checkbox">
<select name="select[]"></select>
Can also array values like [2],[4],[5] anythings
Thank You
public function insert()
{
//Insert second stage details for employer into database.
$Specilized_category = $this->input->post('spec_cat');
$data=array(
'Specilized_category'=>json_encode(implode(",", $Specilized_category)),
);
$this->db->insert('tbl_employer', $data);
<select name="A">
<option value="1">Volvo</option>
<option value="2">Saab</option>
</select>
<select name="B">
<option value="1">test1</option>
<option value="2">test2</option>
</select>
<input type="Submit" >
After I submit, I want to show result from A and B. For example:
if($_POST['A']==1 && $_POST['B']==2){
echo 'true';
}else{
echo '0';
}
Is it possible to do this in joomla?
you have to enclosed this input fields into form tag. For example
<form method="post">
<select name="A">
<option value="1">Volvo</option>
<option value="2">Saab</option>
</select>
<select name="B">
<option value="1">test1</option>
<option value="2">test2</option>
</select>
<input type="Submit" >
</form>
Hope it will help
I have a simple (naked) MailChimp email signup form that I can't get to work in IE9. Every other browser seems fine. I know this question has been asked before but in various different circumstances. We are using JQuery Form Plugin.
<script type="text/javascript">
$(document).ready(function(){
$("#mc-embedded-subscribe-form").validate({
submitHandler: function(form) {
$(form).ajaxSubmit();
/*DO SOME OTHER STUFF*/
}
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="mc_embed_signup">
<form action="//#####.us3.list-manage.com/subscribe/post?u=#############&id=##########" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe to our mailing list</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name <span class="asterisk">*</span>
</label>
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-MMERGE10">State </label>
<select name="MMERGE10" class="" id="mce-MMERGE10">
<option value=""></option>
<option value="NSW">NSW</option>
<option value="VIC">VIC</option>
<option value="QLD">QLD</option>
<option value="WA">WA</option>
<option value="ACT">ACT</option>
<option value="SA">SA</option>
<option value="NT">NT</option>
<option value="TAS">TAS</option>
</select>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_8bd18de15624fc1fb89b76d51_29d17890f0" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>