We Keep Coding

Jquery- Form doesn't get my input value in first time

I have a form which has 2 inputs, really simple.
<form class="cform">
<input type="text" name="cname" class="cname" id="cname" autofocus placeholder="Firstname Lastname">
<div class="floatl regards"><input type="submit" value="Submit" class="submit" id="submit"></div>
</form>
My JQuery is:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$("#submit").click(function()
{
var CName = $("#cname").val();
console.log(CName);
});
</script>
My problem is when I add a word in textbox and click on submit button it doesn't show anything in console unless I type the same word again and submit it! And it works on second click.
I notice that it doesn't work untile it add that words in the URL and I should write exactly the same word for the second time and click on submit if I want it to work!
How can I fix this error? which part of my code is wrong!?

The click on your button will submit the form using GET method to the current page that why you saw the word on the link after the click, all you need to prevent that is to change the type of button to button instead of submit, that will prevent the page from refresh :
<input type="text" name="cname" class="cname" id="cname" autofocus placeholder="Firstname Lastname">
Or you could add e.preventDefault() or return false; instead in your js code :
$("#submit").click(function(e){
e.preventDefault(); //That will prevent the click from submitting the form
var CName = $("#cname").val();
console.log(CName);
return false; //Also prevent the click from submitting the form
});
Hope this helps.
$("#submit").click(function(){
var CName = $("#cname").val();
console.log(CName);
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="cform">
<input type="text" name="cname" class="cname" id="cname" autofocus placeholder="Firstname Lastname">
<div class="floatl regards"><input type="button" value="Submit" class="submit" id="submit">
</div>
</form>

When you click the submit button the page will reload and your jQuery definition won't be recognized. In order to prevent that use a html button instead of a input submit button.
Or you can use e.preventDefault(); inside your function call that will prevent to submit the form. In order to use that you have to pass the event as parameter using function(e) {}

Javascript function on submit externally?

I'm looking to create a Chrome extension for a new tab page. I've written the page and have it working only I'm having a problem with moving my Javascript from inline to external.
Current index.html is looking like this:
<script>
function process()
{
var url="https://www.google.co.uk/search?q=" + document.getElementById("goog").value;
location.href=url;
return false;
}
</script>
<div class="container">
<form onSubmit="return process();">
<input type="text" class="form-control" id="goog" placeholder="Google Search">
<input type="submit" style="display:none"/>
</form>
I've tried a few different methods of moving this into an external file but I'm not great with Javascript. I'd imagine I would need to use an event listener of some kind. I've tried placing this in search.js:
var form = document.getElementById("search");
form.addEventListener("submit", function() {
var url="https://www.google.co.uk/search?q=" + document.getElementById("goog").value;
location.href=url;
return false;
});
With this amended html:
<form id="search">
<input type="text" class="form-control" id="goog" placeholder="Google Search">
<input type="submit" style="display:none"/>
</form>
But to no avail. Can anyone help?

You are attaching the 'submit' event to the text input element.
You should instead attach it to the form, as it's the form what gets submitted, not only that particular input. (You already do it correctly on your current index.html document).
You can do this adding an id to the form element:
<form id="your-form-id">
and then attaching the event to it like you're already doing:
var form = document.getElementById("your-form-id");
form.addEventListener("submit", function() { ...
Also, note that unless you've changed your html while moving the JS code to an external file, on the 'submit' event callback you're trying to get the search string from an element with id="url" while your text input element has id="goog", so you won't be able to retrieve it.
EDIT:
The issue seems to be that the form submit gets executed and you're redirected to the same page with a new blank input before your code can be run.
You can avoid this calling preventDefault() on the event when receiving it so the form is not submitted and your code is run, instead of returning false at the end.
form.addEventListener("submit", function(event) {
event.preventDefault();
... your code ...

I've noticed that it's possible without any Javascript. I can make a form with a method of GET and pass the contents of the form into the GET request like below:
<form method="GET" action="https://google.co.uk/search">
<input type="text" name="q" class="form-control" placeholder="Google Search">
<input type="Submit" style="display:none">
</form>
The above solution is correct but using this avoids any Javascript whatsoever.

Stop double-clicking of submit button with Javascript

Here's my situation. I have a submit button. When clicked, some backend/database validation takes place and if everything's good, submit the form and disable the button so the form can't be submitted twice. If it does not pass validation, submittal cannot take place and the button stays active, so the user can resubmit the form. It sounds simple but I can't make it work. This is a C# web application.
I have tried to add the code to the button on page load. When the submit button is clicked and if validation fails, remove the code that disables the button. But here is my problem. Since the "disable" code is removed and the user fixes any error and resubmit, the button can be clicked more than one as the code is no longer there.
I do not want to use Ajax for this because the backend check is very complicated. Is there another way to do it? I've tried to add the "disable" code on "load" but it does not work on post back when the validation fails.
if (window.addEventListener)
window.addEventListener("load", lockSubmit, false);
else if (window.attachEvent)
window.attachEvent("onload", lockSubmit);
else window.onload = lockSubmit;
Any help is appreciated.

Try the snippet below
window.onload = function(){
// Insert the following function somewhere in your .js file / section
(function prevent_over_submitting(){
var form = document.forms.theform;
if(form || form.nodeName == 'FORM'){
form.onsubmit = function(){
form.submit.value = 'Proccesing...';
form.submit.disabled = true;
};
}
})();
};
While your form should look something like this one
<form id="theform" method="post" action="">
<input type="text" name="firsname" value="" />
<input type="text" name="lastname" value="" />
<input type="submit" name="submit" value="submit" />
</form>
Here is a working jsBin so you can play around.
Update:
The logic behind the snippet above
// server-side code (rather in pseudo-code this time)
if(form_has_been_submitted){ // check if the form has been submitted
errors[] = validate_data(post_data); // call the method to validate data
if(errors_array_is_empty){ // if everything is fine
submit_data(); // submit data
redirect_or_do_something; // (maybe) do other things
} // otherwise don't do anything
}
// validation method
validate_data(post){ // the only argument here represents all your form data
error = array;
if(post['firstname'] == wrong){ // check for error
error['firstname'] = 'Check your firsname'; // if you found one, push it to the error array
}
if(post['lastname'] == wrong){ // the same as in previous case
error['lastname'] = 'Check your lastname'; // the same as in previous case
}
return error; // return that array, it might be full or empty
}
// client-side code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyApplication</title>
<script type="text/javascript">
// the JavaScript snippet from above
</script>
</head>
<body>
<form id="theform" method="post" action="">
<input type="text" name="firsname" value="" />
<!-- show the error if you found one, otherwise show an empty string -->
<span><% (error['firstname'] ? error['firstname'] : "") %></span>
<input type="text" name="lastname" value="" />
<!-- same as in the previous case -->
<span><% (error['lastname'] ? error['lastname'] : "") %></span>
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>
As you can see, the JavaScript snippet above only disables the submit button onclick to prevent over-submitting; it will be enabled once the page is loaded again. This isn't my favorite way of validation but I followed your logic.

you can add this code in the onclick function:
First, add a global javascript variable, say var click = false;
and add this condition before validation occurs:
if(click){
return false
} else {
your normal validation code
}
if your page reloads each time you submit, then there is no need to add anything further, but if doesn't then add setInterval method which will reset the click variable for next use if validation fails.
The state of the click variable will remain true after first click and will further stop multiple clicks, unless page reloads or we reset the variable manually through code.

Difference between form.submit() and having an input with type of "submit"

I have a HTML page containing a form. I want to make some fields "required". The problem is that I'm not using a <input type="submit"> in my form, instead, I use a Javascript function to submit the form because I need to send a Javascript variable to my server. Here is my code:
<form action="/toServer">
Username: <input type="text" name="usrname" required>
<input type="button" onclick="submitForm(this.form)" value="Submit">
</form>
var submitForm = function(frm){
var qstNbr = document.getElementById('hiddenField');
qstNbr.value = someJsVariable;
frm.submit();
}
So, Even is I have the required attribute in my input but the form is still being submitted even if I don't enter anything in the input.
Here is a JSFiddle of how I want my form to behave when clicking on the button without entering anything.
Anyone knows how form.submit() is different from having an <input> of type="submit" ?
EDIT: After following user2696779's answer and doing a little modification, here's the final working code:
<form action="/toServer">
Username: <input type="text" name="usrname" required>
<input type="submit" onclick="submitForm(this.form)" value="Submit">
</form>
var submitForm = function(frm){
if (frm.checkValidity()) {
var qstNbr = document.getElementById('hiddenField');
qstNbr.value = someJsVariable;
frm.submit();
}
}

Your current HTML input button isn't a submit type, it's a button type. The requred attribute on your input element is therefore ignored. To change this, change your button's type to submit:
<input type="submit" value="Submit">
Browsers which support the required attribute will now display a warning when the button is clicked:
JSFiddle demo.

Submitting using javascript will not trigger any validation. If you want to submit using a regular button + javascript and still have validation, you may use HTML5's checkValidity function to verify form fields, or the entire form.
For example, using JQuery:
if(!$('form')[0].checkValidity()) {
alert('not valid');
}
else {
$('form').submit();
}
See fiddle for working example: http://jsfiddle.net/8Kmck/2/

javascript form submit not working

As according to the advice at Prevent form redirect OR refresh on submit? , I have my form which is
<form id="editingForm">
Line height (between 10 and 60):
<input type="number" id="LineHeightEntry" name="LineHeightEntry" min="10" max="60" value="30">
<input type="submit" id="submitLineChange" value="Submit">
</form>
In a file called test.html. The javascript is
$('#editingForm').submit(function(){
alert("abc");
return false;
});
The intent is to have the function be called, and then javascript can do something to the page, but the page is not reloaded or redirected elsewhere. However, instead what I get is say I set LineHeightEntry to 40 and hit submit. Then it redirects to test.html?LineHeightEntry=40. Why does it do that?
edit - The file is at http://probuling.net/sandbox/test.html

Here is a working example:
<html>
<head>
<script src="jquery-1.9.1.min.js"></script>
</head>
<form id="editingForm" action="toto">
Line height (between 10 and 60):
<input type="number" id="LineHeightEntry" name="LineHeightEntry" min="10" max="60" value="30">
<input type="submit" id="submitLineChange" value="Submit">
</form>
<script>
$('#editingForm').submit(function(event)
{
alert("abc");
event.preventDefault(); // if you want to disable the action
return false;
});
</script>
</html>

Add action attribute to the form or you are just refreshing the page on submit.
<form id="editingForm" action="/another/url">
I would recommend learning how to use normal form submit before even try using Javascript. Any input with name attribute will be appended to the URL since you have no action and default method is set to GET.

remove line return false;
This prevent default event.
Read more detail:
http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

try doing it without jQuery. Also, try using the event.preventDefault
document.querySelector('#editingForm').onsubmit = function(event) {
alert('abc');
event.preventDefault();
return false;
};