Jquery / Html form

Question

reaching a point of confusion

I am creating a couple of input elements and a button to search. From using HTML previously, I am lead to believe that i should create a and contain my elements and

But the data is not to be sent anywhere apart from to the javascript to show the correct place in the google map.

I've managed to confuse myself; do i need a element to contain and s ? The problem is when i press a whether it be a test or a search button the page reloads.

I do not want the page to reload. The only way for me not to get this to happen is by removing element, this does not feel right, I am concerned with using good practice if possible.

This is my code:

       <form id="maps_form">
         <fieldset id="search_maps">
           <label for="marker">Search Shop: </label>
    <input name="searchName" id="searchName" type="text" placeholder="Enter Shop Name">

         </fieldset>
         <fieldset id="map_buttons">
            <button id="test"> test</button>
                <button id="searchSomething">Search</button>
          </fieldset> 
    </form>

I feel like, whilst am learning this javascript, dipping into jquery and learning xml, I am forgetting the basics of html :s is this normally to lose touch whilst learning new languages?

after reading this me too got confused what actually you need.can you be more clear in one or two lines. — coder
– coder, Commented Apr 28, 2012 at 9:25
I don't really get your question, sorry. You don't need a form when not submitting data. You can bind a eventhandler to the button and modify the DOM via JS/jQuery. Does this help? — Smamatti
– Smamatti, Commented Apr 28, 2012 at 9:25
it sounds like technically i do not need a form but just the input elements, is that ok to use without the form element? I guess that's my question simplified. Been a long day, 10,30am and still no sleep yet( hence making little sense) — Renai
– Renai, Commented Apr 28, 2012 at 9:31

Lycha · Accepted Answer · 2012-04-28 09:28:25Z

2

The page will reload if your your click/submit handler doesn't return false. So page will refresh if:

If your Javascript listener isn't registered correctly
Your Javascript handler returns true
Your Javascript handler causes an error (check dev console for errors)

answered Apr 28, 2012 at 9:28

Lycha

10.2k3 gold badges40 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Renai Over a year ago

is it good practice to just not use the <form> element and still use <input> elements and <buttons> to communicate with j/s ?

Lycha Over a year ago

@Renai I don't think there is anything in the spec preventing using them without form. If it is not logically a form (input + button), I will just skip the form element.

robrich Over a year ago

If you only handle the button click or you have no form and the user pushes enter inside the text box, your function won't get called. Handle the form submit instead and you get both button push and enter typed in the box.

robrich · Accepted Answer · 2012-04-28 09:31:21Z

0

$("#maps_form").submit(function () {
    // do stuff

    return false; // Don't submit the form
});

answered Apr 28, 2012 at 9:31

robrich

13.3k7 gold badges39 silver badges63 bronze badges

1 Comment

Renai Over a year ago

not sure what am doing wrong with this, but it still reloads the page :s

Eraden · Accepted Answer · 2012-04-28 09:41:36Z

0

Never do that! Wouldn't prevent go to next page if too many action after return false.

$("#maps_form").submit(function () {

    // do stuff

    return false; // Don't submit the form
});

This is correct form:

$("#maps_form").submit(function (event) {
    event.preventDefault();

    ... 
});

answered Apr 28, 2012 at 9:41

Eraden

2,8581 gold badge20 silver badges17 bronze badges

Collectives™ on Stack Overflow

Jquery / Html form

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related