Hide a submit button at runtime press the hidden submit from an anchor

The reason I want to tdo this I have an application and using css I can make my anchors look consistent throughout my site including hover and I am happy with this,
I have tried applying the css to submit buttons and I am failing miserably.
I would to like to use submit buttons because I win the POST array and can use the data entered from that array
So what I'd like to do is hide the submit button and have an anchor that launches code to press the hidden submit and flow naturally to the form acttion.

I found this by googling which at the time appeared to do everything I wanted to do

   $(function() {
       $('form').each(function() {
           $('.refsub').keypress(function(e) {
               // Enter pressed?
               this.form.submit();
           });
           $('input[type=submit]').hide();
       });
   });
The example I found tested keypress for e = 10 or e = 13, I put the "$('input[type=[submit]').hide();" in my js script and it hid all of my submit buttons !!! So what it said it would do it did !!
If I can get get my idea working I may well want to hide all submit buttons but not just yet
 tried putting class and id into the anchor and submit but couldn't figure out how to do it
I put 'class = "refsub" ' in the form  tag and still not quite there
I am using codeigniter and I have multiple views that assemble into the rendered web page the attached umchedit.php contains the bit where I would like to perform this functunality

If you got this far and didn't fall asleep - thank you if you have any ideas I would be happy to hear from you

Thanking you all verymuch

John
johnecollinsAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
You don't need to hide the submit button, just don't use one.  JavaScript or jQuery can submit your form without it.

<a href='javascript:MyFunction()'>Click me?</a>

Open in new window

johnecollinsAuthor Commented:
Hi Dave thanks for the comment, how do I read the values in the form?

John
Julian HansenCommented:
Firstly, I would look at styling your submit - post your CSS for your <a> and lets go from there - there is no reason why you cannot style your submit to look like your <a> links.
how do I read the values in the form?
To what end - why do you want to do this? If you are submitting the form via a post - are you asking how to read the values on the PHP side or the client side?
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

johnecollinsAuthor Commented:
Hi Julian,

Thanks for your response I haveattached my 01.css this has my css in it

I did attempt to stylemy submits but they never seemed to work

I am using codeignoter and I can use the post array from my controller to my model and update the records I am amending.

If I can style them the same as my <a>s I am away as I will return the post array and get on with the job

Thanks John
01.css
Julian HansenCommented:
You can return your post array on a javascript submit in exactly the same way as a submit button.

Dave's answer will have the identical effect (from a backend perspective) as if you had clicked a submit button.

With respect to the .css you posted - what is the style you are wanting to imitate on a submit button?
johnecollinsAuthor Commented:
Hi Julian

Attached is is a file containing 2 screenprints the first shows how submits are displayed and the second the <a> while hovering priorto selecting

Thanks a lot

John
Screenprintjulian.doc
Julian HansenCommented:
Thank John,

I was specifically referring to the style sheet you sent through - what are the styles in that style sheet for links you want to replicate for buttons?

I see this style
body a submit
{ 
    border: 1px solid lime;
    float: left;
    padding: 5px 15px;
    color: black;
    background: #bbb;
    text-decoration: none;
    margin: 0px 2px 0px 0px;
}

Open in new window

Which looks like an error - did you mean body a.submit?
You have this
#navigation a 
{ 
    border: 1px solid lime;
    float: left;
    padding: 5px 15px;
    color: black;
    background: #bbb;
    text-decoration: none;
    margin: 0px 2px 0px 0px;
}

Open in new window

which I assume is part of your navigation
You have a.tooltip - also not a likely candidate
And you have this
button 
{
    border: 1px solid lime;
    float: left;
    padding: 5px 15px;
    color: black;
    background: #bbb;
    text-decoration: none;
    margin: 0px 2px 0px 0px;    
}

Open in new window

So, to help you I need to know what the styling is of the button / link you want to replicate. In your document - what is the style attached to the Select link in the second image?
Dave BaldwinFixer of ProblemsCommented:
From http://www.w3schools.com/jsref/met_form_submit.asp

document.getElementById("myForm").submit();

Open in new window

It does exactly the same thing as a submit button.
johnecollinsAuthor Commented:
Thanks for your further effort Dave, Julian has persuadd me I can css my submit buttons !

I cleared out a lot of stuff in css file and actually achieved a working css file for the <a href's

I have attached the revised 01.css yu volunteered to send me the details
01.css
Julian HansenCommented:
The way to do this is create a class for the style you want for buttons then simply apply this class to either <a> or <button> or <input> elements.

The only thing you need to potentially add is explicitly override the following defaults for buttons

border
background
font

The rest should be as per your current links.

Here is a sample that demonstrates the principle
johnecollinsAuthor Commented:
Julian, would it be possible to put put the full listing in here please the styles stuff opens every time but not the full listing I can see that this is working but would like the confirmation

Thanks John
Julian HansenCommented:
The full listing is available on the sample - you just need to scroll down. The source highlighting script I wrote can take out bits of script as separate listings - which is what the first bit (the styles) is - if you scroll down a bit further you will see the full listing. Here it is as well.
<!doctype html>
<html>
<head>
<title>Test</title>
<style type="text/css">
html {
  font-family: sans-serif;
  font-size: 10px;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: inherit;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
}
h4, .h4 {
  font-size: 18px;
}
h4, .h4, h5, .h5, h6, .h6 {
  margin-bottom: 10px;
  margin-top: 10px;
}
h5, .h5 {
  font-size: 14px;
}
.container {
  width: 1170px;
  margin: 0 auto;
}
* {
  box-sizing: border-box;
}
/* <!-- START "Button Style" --> */
.mybutton {
  background: #ddd;
  border: 1px solid #333;
  border-radius: 3px;
  box-shadow: 3px 3px 10px #000;
  color: #333;
  display: inline-block;
  font-family: Arial;
  font-size: 14px;
  line-height: 30px;
  padding: 5px 10px;
}
.mybutton:hover {
	background: #333;
	color: #fff;
}
/* <!-- END --> */
</style>
</head>
<body>
<div class="container">
  <h4>Demonstrate different button types with common style</h4>
  <h5>Author: Jullian Hansen</h5>
  <a class="mybutton">Link Button</a>
  <button class="mybutton">Button Button</button>
  <input type="button" value="Input Button" class="mybutton" />
  <input type="submit" value="Submit Button" class="mybutton" />
  
</div>
</body>
</html>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
johnecollinsAuthor Commented:
Julian,

Sincere apologies for not responding sooner, the solution you have given is just the job does what I needed to do so thank you very much.
johnecollinsAuthor Commented:
Julian thanks for this

John
Julian HansenCommented:
You are most welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.