We Keep Coding

Why isn't my JS pulling the value from the form properly?

HTML in question is pretty simple:
<form>
<input type="text" name="locSearch" id="locSearch" />
<button id="locSearchBtn"><i class="fa fa-search" id="search-icon"></i></button>
</form>
js:
$(document).ready(function() {
getsWeather('seattle, wa', 'f');
$("#locSearchBtn").click(function() {
getsWeather(document.getElementById('locSearch').value, 'f');
});
When I submit the form (either by pressing enter or by clicking the submit icon, the page reloads but with the default setting (i.e with 'Seattle, wa as the default argument for the getsWeather function). I need it to pull whatever is in the input box and use that as the argument in the getsWeather function but that currently isn't working.
Any ideas? Let me know if you need more of the code to understand it

If you want to modify the page, you need to prevent the form from being submitted when you click the button. Two ways to do that:
Add return false to the end of your click handler for the button. This will prevent form submission (if JavaScript is enabled on the client).
Add type="button" to the button so it's not a submit button anymore.
Ideally, you'd combine #1 with handling a form submission if the client doesn't have JavaScript enabled, to handle the small number of people who surf with JavaScript disabled via the form submission while handling JavaScript-enabled clients with the in-page update.

Stopping unnecessary button form submits html js

This may be too short and sweet, but this is all I have to ask. When I have two buttons in HTML, I use one button for form submission, and another to trigger a javascript event. However, what is happening is that both buttons perform form submits. I want to use the other button for submits without making it unusable by javascript. WHat are the possible methods I can do this?

To expand on what Saravanan Sachi and aladin8848 already said:
If you are using <input> for your buttons, type="submit" will always submit your form and type="button" will be a plain, non-form submitting button.
If though you are using <button></button> tags for your buttons (as I tend to do), they have a 'default' type of submit, so you have to explicitly set their type to button ex. <button type="button">Do JS click things</button> to prevent it from submitting your form.

Use
<input type="submit">
to submit the form and
<input type="button">
to call JavaScript method

Use
<input type='button' onclick='....'>
instead of what you are probably using
<input type='submit'>

you can do the next:
var buttonList = document.getElelmentsByTagName('button');
buttonList[2].addEventListener('click', function(event){
event.preventDefault();
this.removeEventListener("click", this, false);
//do something, like add your own event
});
you should be more specific getting the buttons, and i don't test the code, but the idea is that, remove events and default behaviour of the second button.
i hope this helps you.

Onclick to submit a form

There is a PHP-generated HTML 4 transitional page that is used to edit data from a database of a single record. The user has two options: to store changes or delete the record. I use a form with controls (some of them are hidden):
<form method="post" action="object_mod.php"><!-- this is another file -->
<!-- inputs follow -->
As I want to process two actions ie. delete or save a record I put two submit buttons on the form, before </FORM> tag:
<input type="submit" id="btnSubmit" value="Save">
<input type="submit" id="btnDelete" value="Delete">
</form>
Because the user should confirm deletion I added the following onclick event:
<input type="submit" id="btnDelete" value="Delete" onclick="javascript:deleteRecordConfirm();">
(I also tried without javascript: and onclick="javascript:deleteRecordConfirm(); return true;"), but it doesn't submit a form.
The JS function is
function deleteRecordConfirm(){
if(confirm('Are you sure to delete?')){
document.getElementById("field_action").value=-1;
//document.forms[0].submit();
return true;
}
}
This field_action is set to -1 so I know in object_mod.php that I want to delete record rather than save it.
Here go question, why this form doesn't submit on deletion?
I think it would be good if a user has Javascript disabled to submit a form anyway, even without confirmation so that is why I use <INPUT TYPE="submit"> for deletion. Is it a good idea? I was thinking about giving two independent forms (in fact deletion should have only one hidden field with record id) with their own submit buttons, one for deletion and the other for saving.
In fact the page will work in some kind of intranet, with users who I trust and I'm not afraid of hacking or something, but any security remarks are also welcome.
(I tested it on Firefox 19.0 and Javascript console shows no errors, w3c validator says it's a valid page).

The form should submit according to your code. The only thing I spot is that you should terminate the input tags with />.
BUT... this way, even if the the confirm is cancelled, the form will be submitted. Use the form.onsubmit handler and if that returns false, the form will not submit.
I dont think #B3aT's answer is right in that not unconditionally the best way to "externalise" so to say. Many the the simplest is the best.

I think the best way is to "externalize" the actual form posting.
//make regular buttons (not submit)
//call your own functions (save and delete)
//after you have done your logic do document.forms["myform"].submit();
Another solution is to add a checkbox named "delete" and rename the "save" button to "Done or do". And on server side, if "delete" is activated, then ..delete it.
Usually the "delete" is required "per entry" level (same user have multiple records), so you will have to make a separate button/link and eventually do an ajax request/access an URL with ?delete=1&id=3.
You need to make custom yes/no windows or use a jQuery plugin for it, the only browser standard is "confirm".

OK, it worked, and this was in fact very stupid mistake. The problem was with this button as it was outside the form. I was so sure that I have it inside that I did not review PHP code but copied all from script not the HTML output as I should have done.
As I understand this correctly the line document.forms[0].submit(); worked but it was not because it was button who submitted the form but document.form[0] object itself.
Thank you for all your answers. I will try this form.onsubmit hint from Marcell.

HTML button to submit a form elsewhere on the page

I want to have a form on the main section of my webpage with buttons along the bottom of this section to submit it.
I also want to have a side bar with links to other pages, but make it so that whenever a link is clicked it acts as a button to submit the form too. (ie in the HTML, the code for these links will be outside of the form tags, but I would like them to still act as buttons for the form)
Is this possible?

You can solve this very easy without JavaScript in HTML5:
<input type="submit" form="id_of_the_form" value="Submit">
<form id="id_of_the_form" action method></form>
And you can style those buttons as you like. As in the example, the button can be placed at any point within the dom - no need to put it into the form.

Use the following onclick handler in your link, replacing formId with the ID for the form you want to submit...
onclick="document.getElementById('formId').submit();return false;"
Update
As #Juan (and others, especially #JoeTaylor) have mentioned, the above will not fire any client-side validation code associated with the form. The easiest way that I'm aware of to make it do so is to fire the click event of a submit button within the form. For instance, this could be used on your link...
onclick="document.getElementById('formSubmitButton').click();return false;"
Although you don't mention anything to do with server-side processing, I will take the assumption that is the point of your form. One additional thing I would say on the back of this is that you should ALWAYS replicate the validation back on the server. JavaScript is very easy to bypass, and so you should make sure the values reaching your server are correct, and never assume the JavaScript has done it's job.

The easiest way to ensure your form is submitted and validated by whatever function you've attached is not to call the form's submit() method, but to call its submit button's click() method instead.
Consider the following form:
<form id="bar" method="post" action="/echo/html/">
<input type="text" id="foo" name="foo">
<input type="submit" value="Submit">
</form>
Right now, clicking submit doesn't do anything special. But what if you wanted to ensure the text input had a value before sending anything off to the server? You might accomplish that as follows:
function validateBarForm() {
var txt = this.querySelector("input[type=text]");
if (txt.value == "") {
txt.style.outline = "solid red 2px";
return false;
}
}
document.getElementById("bar").onsubmit = validateBarForm;
Now if you click submit the form won't be submitted with a blank text input. But what if you submit the form programmatically? Let's add a link first...
submit form
Note that this link is outside of the form tag. We can trivially attach a submission function:
function submitBarForm() {
document.getElementById("bar").submit();
}
document.getElementById("submit-bar").onclick = submitBarForm;
We click "submit form" and... Whoops! The validation function is not performed! There are a few ways to skirt this issue, but my favourite is to simply have JavaScript simulate a click to the submit button. I find this holds up to changes a lot better than hardcoding a call to the validation function.
function submitBarForm() {
document.querySelector("#bar input[type=submit]").click();
}
Now when you click the link, the form is validated, and if everything checks out it's submitted too. But don't take my word for it--head on over to jsfiddle.net and see for yourself.

By adding an onclick javascript function to your form.
document.forms["myform"].submit();
Where "myform" is the id of your form. Here's a nice walkthrough: http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml
For example, the button might be:
<button onclick="document.forms['myform'].submit();">Hi</button>

Yes the button's click event add document.getElementById('formId').submit();

<form name="myform" action="action.php">
// Your form
</form>
Submit form
Or you can use jQuery:
<form name="myform" action="action.php">
// Your form
</form>
Your text

I do this myself with hidden submit buttons in the actual form, and outside of the form - anywhere else on the page - labels that reference the submit button and fire it.
In the form:
<input type='submit' id='hiddenSubmit'>
And anywhere else:
<label for='hiddenSubmit'>click me!</label>
Seems to do the job.

.click() function stops working after form submit on the same page

I have a page which has a form with 10 fields including select boxes, radio fields and text boxes. It takes the parameters, queries the database and prints the results on the same page.
I am also using $_POST[''] on the same page to hold on to the form values and not lose it.
I have many methods which use the .click function in this page. They all work fine before the first submit. After the first submit with all the parameters, the .click function stops working. None of the jquery code with .click function work.
Does this have anything to do with the server returning information on the same page or with the way im holding on to the form information using $_POST[''] ?
Here is a piece of code that uses .click function.
<!-- Clear form data after form submission -->
<script language="Javascript">
function resetForm($form) {
alert("resetting form");
$form.find('input:text, input:password, input:file, select, textarea').val('');
$form.find('input:radio, input:checkbox')
.removeAttr('checked').removeAttr('selected');
}
</script>
<script language="Javascript">
$(document).ready(function() {
$("#clear_form").click(function(){
alert("clear form button clicked");
resetForm($('#search_query'));
});
});
</script>
The form is submitted in the following manner.
<form method="POST" action="samepage.php" name="form1" id="formid" onsubmit="return validate_Form()">
# Bunch of text fields, select boxes, radio buttons,
<input type="submit" value="Submit" id="submit">
At the very beginning of the page I collect the form data to automatically fill in the form fields after the submit to retain the form data.
$x = $_POST['x'];
And if the form submit is succesfull (.ie passing all the form validation ) i collect the data again to query the database and print the results on the same page.
$xx = $_POST['x]
I have a custom validation funciton that i wrote which basically just checks if the fields are empty or not, nothing fancy. Its setup in such a way that atleast one field must be entered in order for the form to be submitted to the server.

After researching more on this problem, i finally found a solution.
$('#buttonid').live('click', function () {
#Your code here
});
I still need to understand why this is happening. I'll re edit the answer when I find the root cause to the problem.