I have an input field
<input id='spe_count' type="text" placeholder="number" class="form-control" data-original-title="" title="">
and as I need it to be by default with value -1 I am assigning it with jQuery
$("#spe_count").val('-1');
And I get this input field and see this value -1 inside it, but what I want is that this input is with value -1, but on the page it would be empty or with placeholder.
And when I am changing values, I'd like to do so, that deleting value, emptying the box means that it is default value -1 (not typing minus one , but simply deleting all the values mean this is minus one)
Is this possible?
#("#spe_count").click(function(){
var value= $(this).val();
if(value.length < 1){
$(this).attr("value", -1);
}
});
The above code will serve your purpose.
Related
I have three user inputs which take any number. If a user leaves an input empty then clicks the submit button I would like that input to return 0.
What would be the best way to handle this?
I have created an if statement that individually looks for if input 1 or input 2 or input 3 is empty, but what if input 1 and 2 are empty or if input 3 and 1 are empty, this will lead to quite a long if statement
I wanted to know what would be the best way to go about solving this?
*.js
If( hours === 0 ){
hours = 0
}else if ( minutes === 0 ){
minutes = 0
}else if ( seconds === 0 ){
seconds = 0
}
// more if statement with different combination of minutes seconds and hours being 0
Create a function that does that work and then pass the input value to the function. Call the function for each input.
function checkInput(input){
if(!input.value){
input.value = 0;
}
}
// Find all the <input> elements and loop thorugh them
document.querySelectorAll("input").forEach(function(element){
checkInput(element); // Call the checkInput function and pass the current input
});
<input>
<input>
<input>
You can also avoid the JavaScript completely by using more precise HTML:
<input type="number" required value="0">
<input type="number" required value="0">
<input type="number" required value="0">
First off, You can make sure the user enters a value in the input using the required attribute.
<input type="text" required>
Also If it's inserting into the database, you just need to change the column data type which the value is inserting, to a data type of INT. That way the default is always going to be zero.
But if you still need to check...
if(#inputid.value === ""){
#inputid.value = 0;}
Also remember to get all the inputid using querySelectorAll("#inputid")
Then make it an array using var id = Array.from();
Then loop through id using foreach to check the if statement.
In my app I have few forms where users can pick the value and that value will show in text input field. These values are usually one to three characters. Once I pick the value my input field extends (changed the width). Input field has enough space (size set to 10) and there is no reason to be extended. I have checked if my values are trimmed and nothing is odd with the value. I'm wondering if this is related to JQuery .val() that I use or something else? Here is example of my code.
HTML:
<div class="formItem">
<label for="status">Status:</label>
<input type="text" name="status" id="status" value="" data-master="SS_STATUS" size="10" maxlength="10" readonly />
<img src="Images/add.png" alt="Click to add value" class="masterRecords" />
</div>
JQuery:
//Looping through the table with the records where users choose desired code/value for their input field
$('#searchTbl tbody tr').on('click', function(){
var codeVal = $.trim($(this).find('td:eq(0)').text()); //Here I grab the value from the table
$('#status').val(codeVal).css('font-weight','bold'); //Here input field is populated
});
I have attached image where you can see input field before and after user selects the value. There is obvious difference in field size. Nothing changed in HTML structure (I monitored in my dev tools after value is set).
If I'm correct, you're not only setting a value, but also applying a style: .css('font-weight','bold');, I suspect it's the reason you have a change of your input's width...
Try removing this call to .css() to check, and if it confirms, try applying your style once on rendering the page...
When I have HTML input fields and a change them by direct input they should actually change there value attribute. But when I try to get the whole HTML record it just shows the old value attributes.
Somehow this is clear to me, couse the HTML is not overwritten, but I need the HTML containing the changed input values. How can I approach it?
Example:
$('input').addEvent('blur', function(){
alert($('adiv').get('html'));
});
<div id="adiv">Enter something in input box and press tab<div>....<input id="input" type="text" value="1">the mootools will grep the old value of 1 again....</div></div>
http://jsfiddle.net/hJtzc/1/
alerts allways:
> Enter something in input box and press tab<div>....<input id="input"
> type="text" value="1">the mootools will grep the old value of 1
> again....</div>
but what I need to get is:
> Enter something in input box and press tab<div>....<input id="input"
> type="text" value="[VALUE FROM USER]">the mootools will grep the old
> value of 1 again....</div>
Attribute value in HTML sets initial, default value of the element, DOM property value contains the actual, real value of the element . To change the default value of input element change defaultValue property:
$('input').addEvent('blur', function(){
this.defaultValue = this.value;
alert($('adiv').get('html'));
});
This is normal behavior that is not related to mootools framework
I have several field that just get number, I want if user typed be identical value in two or more field empty value the last field that is identical by jQuery.keyup?
For Example:
<input name="num[]" value="11111">
<input name="num[]" value="33333">
<input name="num[]" value="11111"> // in this input should empty value it.
How can fix it?
$(function(){
$("input").blur(function(){
var _val = $(this).val();
var change = false;
$("input").each(function(){
if($(this).val() == _val){
if(change) $(this).val("");
else change = true;
}
})
})
})
What happens if I had 12345 in a box, then I went back to an earlier box and typed 123456? The 12345 would be cleared. I suggest:
Bind the check to onchange, NOT onkeyup.
Instead of clearing the value, change the background colour to red and disable the submit button.
Adjust Yorgo's code to achieve this end, because it seems to do what you asked.
So I have an input field, if it's blank, I want its value to be the words "empty", but if there is any value inputted, I want the value to be the inputted value. I want to use javascript for this, any idea how this can be done?
UPDATE: Sorry, I don't think I explained it too well. I don't mean placeholder text. I mean the captured value of it. So if it's blank, the captured val() for it should be "empty", if it's filled, the captured val() for it should be that val()
If you're using pure JS you can simply do it like:
var input = document.getElementById('myInput');
if(input.value.length == 0)
input.value = "Empty";
Here's a demo: http://jsfiddle.net/nYtm8/
I'm guessing this is what you want...
When the form is submitted, check if the value is empty and if so, send a value = empty.
If so, you could do the following with jQuery.
$('form').submit(function(){
var input = $('#test').val();
if(input == ''){
$('#test').val('empty');
}
});
HTML
<form>
<input id="test" type="text" />
</form>
http://jsfiddle.net/jasongennaro/NS6Ca/
Click your cursor in the box and then hit enter to see the form submit the value.
This can be done using HTML5's placeHolder or using JavaScript.
Checkout this post.
You can set a callback function for the onSubmit event of the form and check the contents of each field. If it contains nothing you can then fill it with the string "empty":
<form name="my_form" action="validate.php" onsubmit="check()">
<input type="text" name="text1" />
<input type="submit" value="submit" />
</form>
and in your js:
function check() {
if(document.forms["my_form"]["text1"].value == "")
document.forms["my_form"]["text1"].value = "empty";
}
You can do this:
var getValue = function (input, defaultValue) {
return input.value || defaultValue;
};
I think the easiest way to solve this issue, if you only need it on 1 or 2 boxes is by using the HTML input's "onsubmit" function.
Check this out and i will explain what it does:
<input type="text" name="val" onsubmit="if(this == ''){$this.val('empty');}" />
So we have created the HTML text box, assigned it a name ("val" in this case) and then we added the onsubmit code, this code checks to see if the current input box is empty and if it is, then, upon form submit it will fill it with the words empty.
Please note, this code should also function perfectly when using the HTML "Placeholder" tag as the placeholder tag doesn't actually assign a value to the input box.