Develop Reference

Multiple inputs type date put into a href using jQuery

Can someone help me? I want to use <input type="date"> and insert the value inserted into <a href=""> using jQuery. I have tried my best but I can't solve it please help.
HTML markup:
<input type="date" class="inpDate" value="">
<input type="date" class="inpDate" value="">
Search
Script code :
<script>
$(".inpDate").on("keyup",function(e){
if(e. keyCode === 13){
var address = $('#getDate').attr('href');
window.location = address;
}
$('#getDate').attr("href","?page=d_jurnal_laporan/&date1="+$(".inpDate").val()+"&date2="+$(this).val());
})
</script>
Notes:
Actually it works if the input type is text, but here I want to make the input type date, and here I do more than one input

Since there are multiple targets with same class, you have to use $(".inpDate")[0].value and $(".inpDate")[1].value OR $("inpDate:nth-child(1)").val() and $("inpDate:nth-child(2)").val() combination.
Edit
keyup works only for key events. For the calender pick event this wont trigger. For that use change event rather than keyup so that it triggers for both input methods.
$(".inpDate").on("change",function(e){
if(e. keyCode === 13){
var address = $('#getDate').attr('href');
window.location = address;
}
const url = "?page=d_jurnal_laporan/&date1=" + $(".inpDate:nth-child(1)").val()+"&date2="+$(".inpDate:nth-child(2)").val();
console.log(url);
$('#getDate').attr("href", url);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="date" class="inpDate" value="">
<input type="date" class="inpDate" value="">
Search

Disable and enable a form text input depending on value form select..?

I'm making a website and there's a form in it... now what im trying to do is very simple but i just dont know how anymore so im asking you guys. In this form you can select whether or not you want custom text on the clothing you buy. you can select yes and no with the select statement. and next to it there's a input text where you can fill in this text. What i want to do is that when the value of the select is no or still default, the input text gets disabled and when the value is yes it gets enabled.
Screenshot of output
http://prntscr.com/4ym079
My Code:
<div class="form-group col-md-6" style="margin-bottom: 25px; padding:0;">
<label class="col-md-12 control-label" for="producttext">Eigen text op product *</label>
<div class="col-md-12">
<select id="producttext" name="producttext" class="form-control" required="">
<option class="active" value="default" selected disabled>Eigen text op product</option>
<option value="nee">Nee</option>
<option value="Ja">Ja(+€3,50)</option>
</select>
</div>
</div>
<script>
</script>
<div class="form-group col-md-6" style="margin-bottom:0;">
<label class="control-label" for="product_text">Uw eigen text*</label>
<input id="product_text" name="product_text" placeholder="Indien Ja" class="form-control input-md" type="text">
</div>
If you still have any questions, please ask me.
DeusGladio

Attach a onchange function and enable/disable the input:
document.getElementById("producttext").onchange = function() {
document.getElementById("product_text").disabled = (this.value == "nee" || this.value == "default");
}
document.getElementById("producttext").change(); //to trigger on load
Or with jQuery:
$("#producttext").change(function() {
var disabled = (this.value == "nee" || this.value == "default");
$("#product_text").prop("disabled", disabled);
}).change(); //to trigger on load
Fiddle: http://jsfiddle.net/covq84f7/

Using jQuery:
$('#producttext').change(function () {
if ($(this).find('option:selected').text() != 'nee') {
$('#product_text').prop('disabled', false);
} else {
$('#product_text').prop('disabled', true)
}
});

Please write onchange javascript event on select option and try below code to get value
var e = document.getElementById("selectId");
var selectedValue = e.options[e.selectedIndex].value;
if(selectedValue == "yes")
{
//ur code
}else
{
//ur code
}

DEMO
Here is the jQuery code you need. You can listen to the change event and change the state of the input based on the value of the select. In order for this to work when the page loads, trigger the change event using, .change().
$(function() {
$('#producttext').on('change', function() {
$('#product_text').prop('disabled', this.value != 'Ja');
})
.change();
});

FORM won't submit even though input fields are not empty

it wont submit even though the fields are not empty
here's the form:
<form id="form" role="form" method='POST' action="user_add-post.php">
<div class="form-group">
<p><label class="control-label">Title</label><br />
<input style="width: 40%" class="form-control" type="text" name="postTitle"/>
</div>
<div class="form-group">
<p><label lass="control-label">Description</label><br />
<textarea name="postDesc" cols="60" rows="10"></textarea>
</div>
<div class="form-group">
<p><label>Content</label></p>
<textarea name="postCont" cols="60" rows="10"></textarea>
</div>
<input type='submit' name="submit" class='btn btn-primary' value='Submit'></form>
and here's my jquery to check if the input fields are empty:
$('#form').submit(function() {
if ($.trim($("#postTitle").val()) === "" || $.trim($("#postDesc").val()) === "" || $.trim($("#postCont").val()) === "") {
alert('All fields required');
return false;
} });
now why won't it submit? it keeps on saying that all fields are required even though I already fill up the fields.

You have missed to add id in input boxes,
<input style="width: 40%" class="form-control" type="text" name="postTitle"/>
Change it to
<input style="width: 40%" class="form-control" type="text" id="postTitle" name="postTitle"/>
for next text box aswell ,Please Refer

you do not have define the ids so change the condition to
if ($.trim($('[name="postTitle"]').val()) === "" || $.trim($('[name="postDesc"]').val()) === "" || $.trim($('[name="postCont"]').val()) === "")

You have not given the ids to any of your form field, use global selector with condition
here is the working fiddle of your task
`$("input[name=postTitle]").val()` //name selector instead of id

If condition should be like this:
if ($("#postTitle").val().trim() == "" || $("#postDesc").val().trim() == "" || $("#postCont").val().trim() == "") {

See for any JS errors if you are getting. Also , try it on various browsers. You are not using ID attribute, but Name attritute, so it may not work on Firefox,Chrome and may work on IE7 and below. Hope this helps you

Provide Id to input element in html code.
Jquery code is fine
here is the correct code of html
<input style="width: 40%" class="form-control" type="text" name="postTitle" id="postTitle"/>

Yes like everyone else is saying if you are going to use selectors then you need those id's on the form fields. Or you can use the names like this:
$("[name=postTitle]").val()
$("[name=postDesc]").val()
$("[name=postCont]").val()
Here is your jquery with the above:
$('#form').submit(function() {
if ($("[name=postTitle]").val().trim() == "" || $("[name=postDesc]").val().trim() == "" || $("[name=postCont]").val().trim() == "") {
alert('All fields required');
return false;
} });

As others have said, the selectors are based on ID but using name attribute values. So you can add ID attributes, change the selector or use a different strategy.
Since the listener is on the form, this within the function references the form and all form controls with a name are available as named properties of the form. So you can easily test the value contains something other than whitespace with a regular expression, so consider:
var form = this;
var re = /^\s*$/;
if (re.test(form.postTitle.value) || re.test(form.postDesc.value) || re.test(form.postCont.value) {
/* form is not valid */
}
which is a lot more efficient than the OP.
Given the above, a form control with a name of submit will mask the form's submit method so you can't call form.submit() or $('#formID').submit().

Put label next to the input

I have a simple case. I want two things.
Put label next to the input.
Some sort of validation, only digit number for the text box.
The corresponding link is here.
Now the input is below the label.
My code:
<div id="generatePinsDialog" title="Generate New PINs">
<label style="display: inline-block; width: 400px;">
How many?</label>
<input id="newInmateCount" type="text" size="25" value="Enter the number!" />
<br />
<select>
<option value="sameAsID">Same as ID</option>
<option value="appendID">AppendID</option>
</select>

Demo: http://jsfiddle.net/GCtPE/25/
label, input { display: inline-block; }
For verification you will have to use javascript since HTML5 isn't fully supported by all browsers. HTML5 is pretty cool though.

First, remove the "inline-block" from your label and add the for attribute like so:
<label for="newInmateCount" style="width: 400px;">How many?</label>
As for the input, do this for numeric only:
$("#newInmateCount").keydown(function(e) {
if (e.which == 8 || e.which == 46) return true; // for backspace and delete
if (e.which < 48 || (e.which > 57 && e.which < 96) || e.which > 105) return false;
});
See your jsFiddle Updated

Remove the display: inline-block. That is causing the input filed to go to new line.
You this js function to validate just digits, call it onkeypress event of the input field or bind it with onkeydown event
function onlyNumbers(evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode( key );
var regex = /[0-9]|\./;
if( !regex.test(key) ) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
}
}
jsFiddle demo

to put the label next to the input, change display:inline-block; to display:inline, or decrease the width:400px to a lower value until you acheive the positioning you want. for validation you need to do some reading on regular expressions

jsfiddle here
The input was so far to the right because you set the width of the label to 400px, I just removed that and it looks fine now. Also added some quick validation, you'd obviously have to run the validation when the form is submitted.
<div id="generatePinsDialog" title="Generate New PINs">
<label style="display: inline-block;">
How many?</label>
<input id="newInmateCount" type="text" size="25" value="Enter the number!" />
<br />
<select>
<option value="sameAsID">Same as ID</option>
<option value="appendID">AppendID</option>
</select>
</div>​
And the JS is below:
if($('#newInmateCount').val() != "") {
var value = $('#newInmateCount').val().replace(/^\s\s*/, '').replace(/\s\s*$/, '');
var intRegex = /^\d+$/;
if(!intRegex.test(value)) {
errors += "Field must be numeric.<br/>";
success = false;
}
} else {
errors += "Field is blank.</br />";
success = false;
}​

On-submit validation is pretty easy with jQuery. Here's an example. If you want to keep it from ever having something other than numbers in it, you can go with an onchange or onkeyup event and simply strip the numbers from the input.
For the positioning, try inline instead of inline-block.

Javascript: enter in input element with strange behaviour on firefox

I have a html form with a select, button and an input element.
<form action="">
<button>innocent button</button>
<select multiple name="multiple">
<option selected value="a">A</option>
<option value="b">B</option>
</select>
<input style="width:300px" type="text" value="press here enter and look at the multiple select" name="" />
</form>
and some jquery javascript
$(document).ready(function(){
console.log('hi');
var $button = $('button');
$button.on('click',function(e){
$('select option').first().attr('selected',false);
e.preventDefault();
});
Demo: try it here:
http://jsfiddle.net/3Rjdh/
On Chrome everything is okay.
But on Firefox:
If you press ENTER in the input field, the select element loses it's selected.
What is wrong with Firefox?

When you press enter on the input, you are effectively firing the click event of the button, trying putting a conole.log in there and you'd see it fire
You can stop the submission by doing something this
function stopSubmit(e){
e = e || event;
return (e.keyCode || event.which || event.charCode || 0) !== 13;
}
Then in your form add the event for keypress
<form onkeypress="return stopSubmit(event)">
See the updated fiddle

I think, I fixed it by adding the attribute type with value button
http://jsfiddle.net/3Rjdh/2/