Submit Form

[The Magnet]

Hi,

I want to be able to submit a form, but I do not want to use a button
or anything. I want them to click on a certain location 'on the
page'. Can anyone show me how to do this?

 

[Ciaran]

Hi,

I want to be able to submit a form, but I do not want to use a button
or anything.  I want them to click on a certain location 'on the
page'.  Can anyone show me how to do this?

It's quite straight forward:
<a href="#" onclick="document.getElementById('yourFormsIDhere').submit
();return(false)">Click here to submit the form</a>

Hope this helps!
Ciarán

 

[The Magnet]

It's quite straight forward:
<a href="#" onclick="document.getElementById('yourFormsIDhere').submit
();return(false)">Click here to submit the form</a>

Hope this helps!
Ciarán

Thanks, but I need it to be in a certain location on the page only,
so, I think I need CSS?

 

[Thomas 'PointedEars' Lahn]

I want to be able to submit a form, but I do not want to use a button
or anything.

In Web development, no effect without a cause.

I want them to click on a certain location 'on the page'. Can anyone
show me how to do this?

Yes. But show us what you tried and where you failed first, please.

<http://jibbering.com/faq/#posting>


PointedEars

 

[The Magnet]

It's quite straight forward:
<a href="#" onclick="document.getElementById('yourFormsIDhere').submit
();return(false)">Click here to submit the form</a>

Hope this helps!
Ciarán

Thanks, but I need it to be in a certain location on the page only,
so, I think I need CSS?

 

[Ciaran]

Thanks, but I need it to be in a certain location on the page only,
so, I think I need CSS?

Yes, you need to put the link where you want it in the document and
style it with CSS. You can use CSS margins or position:absolute for
this. Google them.

Ciarán

 

[SAM]

Le 10/30/09 9:06 PM, The Magnet a écrit :

Thanks, but I need it to be in a certain location on the page only,
so, I think I need CSS?

I do not understand where you expect the "certain location" will be on
"my" screen (on the window where web files are opened) ?

Maybe I am displaying web pages in double size zoomed ?
So you can't use positioning by pixels.

You must at least have the "certain location" defined somewhere in a div
(an html element) styled in relative, then try to fix the "location"
proportionally to that container.

The easiest way could be to attribute an onclick to an empty span


CSS:
====
#certain_location { position: relative; width: 178px; height: 50px; }
#certain_location span { display: block; position: absolute;
top: 5%; left: 50%; width: 40%; height: 30%;cursor: pointer}

HTML:
=====

<div id="certain_location">
<span onclick="document.forms[0].submit()"></span>
</div>

 

[The Magnet]

Le 10/30/09 9:06 PM, The Magnet a écrit :

Thanks, but I need it to be in a certain location on the page only,
so, I think I need CSS?

I do not understand where you expect the "certain location" will be on
"my" screen (on the window where web files are opened) ?

Maybe I am displaying web pages in double size zoomed ?
So you can't use positioning by pixels.

You must at least have the "certain location" defined somewhere in a div
(an html element) styled in relative, then try to fix the "location"
proportionally to that container.

The easiest way could be to attribute an onclick to an empty span

CSS:
====
#certain_location { position: relative; width: 178px; height: 50px; }
#certain_location span { display: block; position: absolute;
        top: 5%; left: 50%; width: 40%; height: 30%;cursor: pointer}

HTML:
=====

<div id="certain_location">
   <span onclick="document.forms[0].submit()"></span>
</div>

Basically the web page has a background, and I want the link to be on
the background of the page. So, the user clicks this area of the
background, the links calls some javascript validation, then processes
the form.

Thanks!

 

[Evertjan.]

The Magnet wrote on 02 nov 2009 in comp.lang.javascript:

Basically the web page has a background, and I want the link to be on
the background of the page. So, the user clicks this area of the
background, the links calls some javascript validation, then processes
the form.

This does not make sense.

Basically the web page has a background

No, only html-elements have background styles,
if that is what you mean.

So, the user clicks this area of the background

Background is not an element,
it is a collection of certain style types of an html-element.

the links calls some javascript validation

A link, that must be an element in itself, like <a href='..'>...</a>

Even elements do not call a javascript function,
only an event-listener can.

Backgrounds are not elements and do not have listeners.

<body> can have background styles and can have listeners,
but an area of the body cannot.

 

[SAM]

Le 11/2/09 7:19 PM, The Magnet a écrit :

The easiest way could be to attribute an onclick to an empty span

CSS:
====
#certain_location { position: relative; width: 178px; height: 50px; }
#certain_location span { display: block; position: absolute;
top: 5%; left: 50%; width: 40%; height: 30%;cursor: pointer}

HTML:
=====

<div id="certain_location">
<span onclick="document.forms[0].submit()"></span>
</div>

Basically the web page has a background, and I want the link to be on
the background of the page. So, the user clicks this area of the
background, the links calls some javascript validation, then processes
the form.

Once more :
I do not see how you can be sure the background is in a right place
(except if it is set to top left in no-repeat)

Then, if the background area is fixed in some place,
the "clickable" area can be set in pixels relatively to the background
space.

A little as it's done with maps of links in images.


body { background:url(map.jpg)no-repeat top left; }
#launch { position:absolute;top:50px;left:30px;
width:75px;height:48px;cursorointer}


<body>
blah ...
<form action="do.htm"></form>
.... all the content filling the page
<div id="launch" onclick="document.forms[0].submit()"></div>
</body>
</html>

The div 'launch' must be at the all end of the doc
to be sure it will be displayed over all the others elements.

 

[The Magnet]

Le 11/2/09 7:19 PM, The Magnet a écrit :

The easiest way could be to attribute an onclick to an empty span
CSS:
====
#certain_location { position: relative; width: 178px; height: 50px; }
#certain_location span { display: block; position: absolute;
        top: 5%; left: 50%; width: 40%; height: 30%;cursor: pointer}
HTML:
=====
<div id="certain_location">
   <span onclick="document.forms[0].submit()"></span>
</div>

Basically the web page has a background, and I want the link to be on
the background of the page.  So, the user clicks this area of the
background, the links calls some javascript validation, then processes
the form.

Once more :
I do not see how you can be sure the background is in a right place
(except if it is set to top left in no-repeat)

Then, if the background area is fixed in some place,
the "clickable" area can be set in pixels relatively to the background
space.

A little as it's done with maps of links in images.

body { background:url(map.jpg)no-repeat top left; }
#launch { position:absolute;top:50px;left:30px;
           width:75px;height:48px;cursorointer}

<body>
blah ...
<form action="do.htm"></form>
... all the content filling the page
<div id="launch" onclick="document.forms[0].submit()"></div>
</body>
</html>

The div 'launch' must be at the all end of the doc
to be sure it will be displayed over all the others elements.

Someone gave me this and I want to know if there is a better way. It
works fine in IE but in Firefox the link is way to the left:

..nextimg {
position: relative;
margin: 20px 0 20px 40px;
padding: 5px 0; width: 300px;
height: 36px;
background-image: url(./images/spacer.gif);
background-repeat: no-repeat;
}
#nextlink {
position: absolute;
top: 555px;
left: 525px;
width: 145px;
height: 36px;
background-color: transparent;
border: 0;
}


<div class="nextimg">
<a id="nextlink" href="page2.php" onclick="if ('preventDefault'
in event) { event.preventDefault(); } else { event.returnValue =
false; } validate(document.forms['page1']);"></a>
</div>

 

[Thomas 'PointedEars' Lahn]

Someone gave me this and I want to know if there is a better way. It
works fine in IE but in Firefox the link is way to the left:

.nextimg {
position: relative;
margin: 20px 0 20px 40px;
padding: 5px 0; width: 300px;
height: 36px;
background-image: url(./images/spacer.gif);
background-repeat: no-repeat;
}
#nextlink {
position: absolute;
top: 555px;
left: 525px;
width: 145px;
height: 36px;
background-color: transparent;
border: 0;
}


<div class="nextimg">
<a id="nextlink" href="page2.php" onclick="if ('preventDefault'
in event) { event.preventDefault(); } else { event.returnValue =
false; } validate(document.forms['page1']);"></a>
</div>

There is a better way because this one does not work reliably to begin with:
the `a' element should not be empty (it should at least contain `&nbsp;'),
`in' should not be used with host objects, and the whole
preventDefault/returnValue nonsense is not even necessary (one can return
`false' and be done with it). It is safe to say that whoever gave you this
code (provided there was such a person and we are not looking at a FOAF
phenomenon or worse here) does not know what they are doing.

In any case, the relevance of this to JS/ES programming ranges very close to
zero. Besides a programming exercise, which would be your task to solve for
yourself (that would be the very purpose of the exercise), I cannot think of
any pertinent application. IMHO, it reads much more like an attempt in
trying to trick your users, perhaps a misguided attempt to submit
information without the user knowing about it, which is a suspicion hardened
by your posting anonymously using Google Groups, failing to respond to the
questions you have been asked, and failing to show any initiative in the
process (though I might be wrong.)

It would probably be best if you said what you really want to achieve and
why, so that you can be presented with pertinent approaches to choose from,
instead of our wasting our time trying to solve your problems with your
current approach (which apparently was suggested by a person not knowing
what they are doing, perhaps in part without being guilty for that) while
guessing around why on Earth you would want to do such a thing.

And trim your quotes.

<http://jibbering.com/faq/#posting>


PointedEars

 

[SAM]

Le 11/2/09 10:01 PM, The Magnet a écrit :

body { background:url(map.jpg)no-repeat top left; }
#launch { position:absolute;top:50px;left:30px;
width:75px;height:48px;cursorointer}

<body>
blah ...
<form action="do.htm"></form>
... all the content filling the page
<div id="launch" onclick="document.forms[0].submit()"></div>
</body>
</html>

The div 'launch' must be at the all end of the doc
to be sure it will be displayed over all the others elements.

Someone gave me this and I want to know if there is a better way. It
works fine in IE but in Firefox the link is way to the left:

You mean it is far from left side ?

I don't understand that can work even with IE ...

Tell what are the coordinates of the area to be clicked (distances of
its up-left point relatively to this of the backgrounded div) its width
n height.
Perhaps give also where is displayed the "backgrounded div" and the
dimensions of this background image.

.nextimg {

a div

position: relative;

positioned, yes ... but where ?

margin: 20px 0 20px 40px;

the padding is of no real use ...

padding: 5px 0;

sized to 300/36 px

width: 300px; height: 36px;
background-image: url(./images/spacer.gif);
background-repeat: no-repeat;
}
#nextlink {

the link,

position: absolute;

positioned at :
- 555px down from point 0/0 of the div (corner up left)
- 525px right from point 0/0 of the div

so ... certainly not on the background of that div (smaller)

top: 555px;
left: 525px;
width: 145px;
height: 36px;
background-color: transparent;
border: 0;
}


<div class="nextimg">
<a id="nextlink" href="page2.php" onclick="if ('preventDefault'
in event) { event.preventDefault(); } else { event.returnValue =
false; } validate(document.forms['page1']);"></a>
</div>

usually to avoid a link by JavaScript we do :

<a href="page.php" onclick="return false;">link</a>

I suppose it could be done :

<a id="nextlink" href="page2.php"
onclick="return validate(document.forms['page1']);"></a>

where the function validate() returns false at the end