I am trying to submit form on image click event but I am getting Uncaught TypeError: Object #<HTMLInputElement> has no method 'submit' this error after click event fire.
My Code:
<form name="searchRef" id="searchRef" method="get" action="#">
<input type="text" name="s" id="ref" value="" class="ref_search" />
<input type="submit" name="submit" id="ref_submit" value="GO" class="ref_submit" />
</span> <span> <img src="http://www.webdeveloper.com/forum/image.php?s=2c556ca62e6fd2a2e4d6ca925fb3fda1&u=8331&dateline=1057444055" alt="Go" onClick="document.getElementById('searchRef').submit();"> </span>
</form>
Any ideas or suggestions? Thanks.
You have to remove/change attribute name of submit button, e.g:
name="btnSubmit"
Otherwise, submit() method of FORM element is overwritten.
Change your submit button name from submit to ref_submit
as shown below
<input type="submit" name="ref_submit" id="ref_submit" value="GO" class="ref_submit" />
this is just an idea, but try using
document.forms["searchRef"].submit();
instead of
document.getElementById('searchRef').submit();
please change the form tag action attribute , repalce # with the target page name say action.php, and also add onsubmit="javascript:return false" in form tag
There is probably already an html element with id=searchRef in your page, so the getElementById() get the wrong one.
A better solution would be to replace your submit button by an input type=image:
<input type="image" name="ref_submit" id="ref_submit" value="GO" class="ref_submit"
src="path/to/your/image" />
Notice this will result in server side by a POST request with $_POST['submit_x'] and $_POST['submit_y'] (which corresponds to the (x,y) mouse coordinates from the top left of the image)
This error occurs because your name attribute as submit, try to change the name attribute or try below code.
<img src="http://www.webdeveloper.com/forum/image.php?s=2c556ca62e6fd2a2e4d6ca925fb3fda1&u=8331&dateline=1057444055" alt="Go" onclick='window.searchRef.submit();' />
Related
I was wondering how can I submit div data to MySQL. Im not used to javascript so I dont really know whats happening on the javascript part but how can I get or input the action="" part and method="" part and can I or should I add value="" to the hidden input???
Form html code:
<form onsubmit="document.getElementById('hidden_data').value=document.getElementById('showing_data').innerHTML;">
<input id="hidden_data" name="data" type="hidden"/>
<div id="showing_data" class="commenttext" contenteditable="true"></div>
<input type="submit" Value="Enter" id="submitthis">
</form>
Use the hidden field inside the form tag and use the JavaScript to put the value inside it. You can get the hidden field in the $_POST['hydName'].Put the data on the click of the submit button into the hidden field. Keep your action and method of the form same as required. After the click event is fired, it will submit the form to its action URL
<input type="submit" onclick="document.getElememtById('hidden').value = document.getElementById('div').innerHtml;" />
I have a simple image inside an HTML form that acts as a button. When a normal button is clicked I act upon that using the onClick attribute, but with my images when you click on them the onClick does work, but the image also submits the form, when it actually shouldn't.
My code:
<input type="image" id="button" value="Assign" src="/Images/rightarrow.png" alt="Assign Selected Rule" class="imgAssignUnassign" onclick="manageHandlers('Assign')" />
Any help with this would be greatly appreciated!
Specifying the type attribute of an input as image makes it a submit button. Add return false to the onclick.
<input type="image" id="button" value="Assign" src="/Images/rightarrow.png" alt="Assign Selected Rule" class="imgAssignUnassign" onclick="manageHandlers('Assign');return false" />
You're wrong. It should according to w3c docs.
To prevent that you could user preventDefault method of the event:
$('#button').click(function(e){
//do something
e.preventDefault();
});
It's because you are using <input type='image' />
If you just want a normal image use the <img /> tag
i am trying to create a link that submits a form. I use this and works fine :
<a name="submit" href="javascript:document.theForm.submit();" class="rollover-button gray small"><span>Send Message</span></a>
However, i have a problem. My previous submit button was :
<input type="submit" name="submit" value="Send Message" />
When this was clicked, i was getting a $_POST['submit'] value that i was checking with isset in my php script, to see whether the form is submitted or not. However, this does not work with my submit link. Does anybody know how i can do that ?
EDIT:
I tried that, as suggested :
<form action="." name="theForm" class="contactForm" method="post">
<input type="hidden" name="submit" value="Send Message" />
</form>
<a name="submit" href="javascript:document.theForm.submit();" class="rollover-button gray small"><span>Send Message</span></a>
But still does not work.
You can create input type of hidden and check for its existence:
if (isset($_POST['hiddenName'])) {....}
You can use a hidden field instead. So when the form is submitted, you can check if the hidden element exists.
Like this:
<input type="hidden" name="submit" value="Send Message" />
This way, you can check for $_POST['submit'] when you submit the form. Just make sure the hidden <input> is inside the <form> element, so it will POST with the rest of the form.
add a hidden input.
<input type="hidden" name="submit" value="Send Message" />
it will not be visible to the user, but it will be send with the form contents.
You can always hide the submit button (with css display: none) and click it with JavaScript:
document.forms.theForm.elements.submit.click();
I'm having some trouble whenever I want to add some text to my div tag, here's my code:
<html>
<body>
<div id="comments">
</div>
<form name="forma">
<textarea name="commentUser" id="commentUser" cols="40" rows="5">
Comments here...
</textarea><br>
<input type="submit" value="Ready!" onClick="writeComment()" />
</form>
<script type="text/javascript" >
function writeComment()
{
var comment = document.forma.commentUser.value;
alert(comment);
document.getElementById('comments').innerHTML=comment;
}
</script>
</body>
</html>
It does what it has to do correctly, but then it switches back to the text box only and the comment I just wrote disappears. Any idea of what's going on here?
Thank you so much for your time.
It is because you are submitting the form.
Quick fix:
<input type="submit" value="Ready!" onClick="writeComment()" />
to
<input type="button" value="Ready!" onClick="writeComment()" />
In addition, you are able to prevent the default action of an input. Basically telling the browser the you are going to handle the action with preventDefault:
function writeComment(e) {
var comment = document.forma.commentUser.value;
alert(comment);
document.getElementById('comments').innerHTML = comment;
e.preventDefault();
return false;
}
What's happening is your form is submitting, the page is refreshing, and the div is going back to its pre-JavaScript-set content.
Try swapping the type='submit' to 'button' on the button.
When you click on the submit button the form is submitted, causing the whole page to reload. You need to return false from the onclick of the submit button to prevent it:
<input type="submit" value="Ready!" onclick="writeComment(); return false;" />
Or, if you don't want the button to ever submit the form change type="submit" to type="button".
PS. It's bad practice to use the onclick attribute. Instead bind a handler to the click event using pure JS.
This is because you use not just a regular button but a submit button which by default submits the form to the server. You can see that your comment is submitted via URL as you didn't specify the method(GET and POST and GET is default).
Simply write:
onclick="writeComment();return false;"
Returning FALSE prevents from default behaviour - submitting the form.
Its making another request to the server, which is causing the page to be rendered again.
Just return false from writeComment.
You'll have to prevent your form from submitting:
<input type="submit" value="Ready!" onClick="writeComment(); return false;" />
change this
<input type="submit" value="Ready!" onClick="writeComment()" />
to this:
<input type="submit" value="Ready!" onClick="writeComment(); return false;" />
try <input type="button" value="Ready!" onClick="writeComment()" />
you should switch
<input type="submit" value="Ready!" onClick="writeComment()" />
for
<input type="button" value="Ready!" onClick="writeComment()" />
Or another option is to convert your submit into a button and take it out of the form, buttons can now exist outside of forms and from the code you pasted I don't see why you have to use a form, this will mean that your page isn't reloaded when you click on the "Ready" button.
I have the the following code and want to use a hyper link to submit my form.
<form name="form_signup" id="form_signup" method="post" action="/" enctype="multipart/form-data">
...
<input type="submit" value="Go to Step 2" name="completed" /> or <a onclick="javascript:this.form.submit();">Proceed without uploading</a></span>
</form>
However, my hyperlink submit doesn't work. It just keeps me on the same page.
Question: any idea why my link submit text doesn't work?
The this in your "javascript:this.form.submit();" refers to the <a> tag, which has no form property, resulting in a JavaScript error.
The smallest required change, but far from the most elegant, would be something like this:
...