Develop Reference

How to detect an empty input field on submit and have Jquery replace it with a specific value?

I've seen various similar questions posted, but I can't quite seem to get all the pieces together.
I have a really simple form with an option single input field. I'd like to allow the user to input a value to use, but if they don't I want it to use a default, but only on submit.
Here's the HTML and JS I'm working with. This simply grabs the input value and adds it to the button URL. What I need it to do is see if it's blank on submit only and replace it with "NoName"
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function(e) {
var inputvalue = $("#rep").val();
window.open("https://example.com/"+inputvalue, "_blank");
});
});
</script>
<form id="options">
<p><input type="text" id="rep" name="rep" placeholder="Your Rep ID: " style="width:auto;" value="" /></p>
<p><button type="button" id="button" style="color:white; background-color: blueviolet; border:none; border-radius: 3px;">GO!</button></p>
</form>
The examples and solutions I've seen have it using placeholders, or onBlur events that cause the box to keep changing if they click in or out of it. I'd like this to stay blank, unless they enter something, then the button URL would change based on that alone.
If empty > use default value in the URL and if not empty > use the url+value entered.
The current behavior works fine if something is entered, but if not, it simply goes to the URL (as the current script tells it to)

If I understand you well is as simple as you described: if empty > use default value in the URL and if not empty > use the url+value entered.
just use simple if else, I made small jsfiddle for you.

get the user value
var userValue=$('#rep').val();
then check if user value is null or empty
if(userValue){ }
if it is empty then use default value
$(function(){
$('#button').click(function(){
var myDefault="http://url.com";
var userValue=$('#rep').val();
if(userValue){ location.href=userValue; }
else { //use default
location.href=myDefault; }
});
});

Javascript to "copy in real time" some fields from a form to another form (with different input names)

I'm trying to write a function to copy some fields (in real time) from a specific form, to another form
I try to be more specific:
I have 2 forms
- The first form is the one the user will fill in.
- The other form is hidden.
When the user will fill the first form, the second form (hidden) will be filled by the same informations.
Some fields are automatically filled by some calculations, so I can't use keyup/keypress or "click" to start the function
I wrote something like this, but it doesn't work
$(function(){
var form1 = $('#form1'),
form2 = $('#form2');
$('#fieldname_form1').change(function(){
$('input[name="inputname2"]', form2).val(function(){
return $('input[name="inputname1"]', form1).val();
});
});
});

You can copy in real time using the keyup function, something like this. Otherwise, when you say
Some fields are automatically filled by some calculations
What do you mean? These calculations are made by you using JS or what? Because, if you are using JS you can fill the two fields at the same time when you make the calculations.

this works for me...
$(function() {
$('#i1').change(function(evt) {
$('#i2').val(evt.target.value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" name="name1" id="i1" />
</form>
<form>
<input type="text" name="name2" id="i2" />
</form>

The change event is fired after the element has lost the focus. For the "user editable" elements you should use keyup (for the textbox) and change for the drop down elements.
On the other hand, for the fields filled automatically, you don't have any nice and clean solutions. I can think in two options:
If the calculations trigger is always the user changing some value, you could copy every form value after that happens.
(very bad option, but it would still work) You could be constantly checking for changes in every element and copying them using setInterval function.
As a side note
As well as your code should work, there is a simpler way to do it:
$('#fieldname_form1').change(function(){
var value = $('input[name="inputname1"]', form1).val();
$('input[name="inputname2"]', form2).val(value);
});

This should work -
$(function() {
var form1 = $('#form1'),
form2 = $('#form2');
$('#fieldname_form1').change(function() {
$('input[name="inputname2"]', form2).val($(this).val());
});
});

Working With Dynamically Created Inputs

I have a dynamic form that you can add elements. Like, you type a name, and then if you have to write a new name, you click on 'Add Name', and another textbox appears.
Their names are names[]. I can process those inputs with PHP on the server-side. However, I want to make a calculation with those inputs, like writing all of them on the page as the user types.
However, because those inputs, those textboxes are created dynamically, Javascript only selects the first textbox with the name name[].
Let me make it clear. This way it'll be better. I got a textbox. I input age in there. If I want to enter a new age, I click 'Add Age' button, and a new input box pops out. I write the new age value. And as I type, on a 3rd textbox, the average of those age values get printed. But because of those input boxes, with names ages[] are created on the execution time (not the compile time, I'm not sure these are the appropriate words for those. Probably not, because nothing is compiling? - or is it?), I can't process them.
What must I do to solve this problem?
I used both
$('input[name=ages\\[\\]]').change(function(){
console.log('1');
});
and
$('input[name=ages\\[\\]]').on('input', function() {
console.log('2');
});
but it didn't work.
Thanks in advance.

There's no need to escape the square brackets (though you should enclose the whole field name in double quotes). This works for me:
$('input[name="names[]"]').on('change', function(){
console.log($(this).val());
});
Here's a jsfiddle demonstrating: http://jsfiddle.net/t7J5t/
Your problem is actually probably related to the fact that you're adding the fields dynamically. The way you're using your selector will only work on the fields that already exist. Fields that are added after that selector will not be picked up. What you want to do, then, is put the selector inside the .on, like this:
$('.container').on('change', 'input[name="names[]"]', function(){
console.log($(this).val());
});
This will bind the listener to the container, not the fields (just make sure your fields get added inside of the container; you can call it whatever you want).
Incidentally, there's no reason you have to restrict yourself from using the name attribute of fields when using jQuery selectors. For example, you could use a class:
<div class="container">
<input class="age" name="ages[]">
<input class="age" name="ages[]">
<!-- ... as many more as needed, added dynamically is OK ... -->
</div>
<script>
$(document).ready(function(){
$('.container').on('change', 'input.age', function(){
console.log($(this).val());
});
});
</script>
Here's a sample of it in action, where you can dynamically add fields, and it calculates the average:
http://jsfiddle.net/t7J5t/1/

Try to use:
$(document).on('change', 'input[name=ages\\[\\]]', function() {
console.log('2');
});

onchange of javascript filled in field issue

I want to use onchange() event on a text field that may be filled in by a date picker using javascript. i tried to use onblur(), onmouseover() and etc but non of them can help me to catch its value just after changing by date picker.
a part of code that defined date picker and fill in text field is like below:
<script type="text/javascript" src="Scripts/cal_.js"></script>
<input type="text" name="receive_date" id="receive_date" style="width:75px" class="cdate" value="" {{attributes}}>
<script type="text/javascript">
new LCalendar('receive_date');
</script>
but when I want to add onchange="_do_something()" in place of {{attributes}} it does not work.

The text input is don't have change event. the event you can use to get the input change is to use 'input'. see sample
inputVar.addEventListener('input', function(){'what you want to do.'});

This is simplistic, but you could try this:
var val;
document.getElementById('receive_date').addEventListener('focus', function() {
// set the value
val = this.value;
});
document.getElementById('receive_date').addEventListener('blur', function() {
if (this.value !== val) {
// val was changed
} else {
// val was not changed
}
});

Thanks for good answers.
After testing so many solutions i changed my calendar library code.
Just after filling in date (text) field in code:
receive_date_field.value=...;
I tried to put:
a.focus();
a.blur();
twice and for catching its value after every filling in (either by another javascript code) i used:
onfocus="_do_something();"
in place of {{attributes}} !!! as you see this is not what i want but just is a temporary way to catch value of field after every filling in.

How to get websites actual HTML code by JS?

I have a website with a form. The form is filled by user with data for example i show to user:
<input type='text' value="" name="dsa" />
And he fills it with value of "3";
And he clicks button "save". Now i want to have the whole HTML of the website including values of fields. So i use:
document.documentElement.innerHTML
But i get:
<input type='text' value="" name="dsa" />
But i want to get this:
<input type='text' value="3" name="dsa" />
NOTICE I want to take the whole HTML of the website, not only one field. I dont know what fields will be on the website so i need a general solution.

AFAIK you can't get this from the HTML code, as the HTML code does not change when the user inputs something in a Input text field.
What you could do is get all input fields on the page and get their values with something like this:
var inputs, index;
inputs = document.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
// deal with inputs[index] element.
}
The code is from this post: https://stackoverflow.com/a/2214077/312312
I was too lazy to write it down my self :P

In jQuery I do
$(function() {
$('input').keyup(function() {
$(this).attr('value', $(this).val());
});
});​
Because the value attribute isn't set after key up

You could try to set a live event on a whole document that will set attribustes to html with values user set in or set them on your submit.
First way for example
$("body").on("change", "select,input,textarea", function(){
$(this).attr("value", $(this).val());
});
But this should not be done so blindly, and you'll get problems with reset. And you should solve problem with selected radio, checkbox and other attributes, not only values.
Second way is to serialize whole page when it really needed.
var serialize = function(el){
$("select, input, textarea").each(function(){
$(this).attr("value", $(this).val()); //the same way as upper
});
}
$(".serialize").click(function(){
var inner = $("body"),
html;
serialize(inner);
html = inner.html(); //here you will get whole html with setted attributes
});
This way seems to be better because there wont be delegation of unnecessary event.
http://jsfiddle.net/CeAXL/2/ - test example.
But in both ways it's not good idea to set permanent values to DOM itself.