submit form by button using form.js plugin - javascript

I am using this plugin to submit form with file upload.
Usually my forms are posted (without using this plugint) using:
<button id="send">Send</button>
and using js like this:
$('#send').click(function(){
ajaxSubmit();
});
This plugin is looking for the usual
<input type="submit" value="Send">
to send the form so that I can keep my buttons instead of the default buttons. My point is to update my click function to trigger form submitting via this plugin.
The plugin is initialized via:
$("#myForm").ajaxForm(options);
Any help?
My actual workaround is to style input buttons like my standard buttons but I'd prefer to keep all my code the same way (always using buttons to submit forms instead of inputs)

If you check the documentation, there are multiple ways of submitting the form with that plugin:
<input type="submit" name="submitButton" value="Submit1">
<input type="image" name="submitButton" value="Submit2" src="submit.gif">
<button type="submit" name="submitButton" value="Submit5"><span>submit 5</span></button>
You could use the last one. For that, just add type="submit" to your button, and it should be enough:
<button id="send" type="submit">Send</button>

Without seeing more code, the one thing I can say is that your javascript references an object with an ID of "send" but your input has no ID.
Try <input type="submit" id="send" value="Send"/>.

Related

HTML form - POST or GET depending on button clicked

Let there be a search form with quite many of the input fields. The user may either click:
[Search] and GET the list of the results,
[Save search criteria] for future use and POST the form content to be stored on server (I'm not interested in storing locally in cookies or so).
How do I achieve that? I've only found solutions to make two types of POST request on two separate buttons.
Maybe a JavaScript onclick function to set <form method="??"> right before its submitted? Would that work?
In HTML5, the <input> element got some new attributes
<input type="submit" formmethod="post" formaction="save.php" value="Save" />
<input type="submit" formmethod="get" formaction="search.php" value="Search" />
The same attributes are valid for <button>
Yes you can change form method before submit form using jquery
<form method="POST" id="myForm">
<button onclick="changeMethod()">submit</button>
</form>
Function changeMethod in jquery
function changeMethod(){
$("#myForm").attr("method", "get");
}

HTML/PHP change the button used when enter is pressed

so i have 2 buttons
<button type="submit" name="print">print</button>
<button type="submit" name="search">search</button>
beside the button search there is a textbox
<input type="text" name="txtSearch" autofocus>
now what i want to do is whenever I press enter i'd like to submit using the button search. but what happens is the button print is always getting submitted because it is on top of button search. I cant put button search on top of print because of the design. Is it possible to do it in php? or do I need javascript? i'm just starting to program and trying to learn more. thank you very much for the help!
You can't do that with php , you should use javascript or jquery .
add an id for your search input like this :
<button id='search' type="submit" name="search">search</button>
then you can use this code in jquery :
$('#search').keydown(function(e) {
var key = e.which;
if (key == 13) {
$('#your-form').submit();
}
});
You can...
Separate into two forms:
<form>
<button type="submit" name="print">print</button>
</form>
<form>
<button type="submit" name="search">search</button>
<input type="text" name="txtSearch" autofocus>
</form>
Or change the print button to:
Print or
<button type="button">print</button>
Or you could put your search button first, and use float or some kind of position:absolute and margin-top CSS.
Or use JavaScript, as Parsa suggests.

How to clear the spring form fields using jQuery?

When I click the 'CLEAR' button, I want the javascipt code to run. It does run but then the form gets submitted. Is there a way to stop the form from getting submitted? Or is there a spring standard to clear the form. I just thought it would be faster if I did it on the client-side.
<input type="submit" value="CLEAR" onclick="javascript:clearForm()"/>
The above code appears inside the spring form tag.
Two options.
1). Using input type="button":
<input type="button" value="CLEAR" onclick="clearForm()"/>
2). Using input type="reset" instead of clearing the form with javascript.
<input type="reset" value="CLEAR" />
Change
<input type="submit"
to:
<input type="button"
That will stop your form being submitted when the button is clicked.

value of button using javascript

I have 3 buttons in my form.
All the button actions goes to a same page after clicking it depending upon what button is clicked.
My query is: The name of the buttons are 'add','edit' and 'remove'
When the 'add' button is clicked, using js I need to get the value of that button and similarly for the other two buttons....
Can you please help?
<form>
<script type="text/javascript">
function doAction(value)
{
// Don't really have anything to set...just show the value
alert(value);
}
</script>
<input type="button" value="Add" onclick="doAction(this.value)">
<input type="button" value="Edit" onclick="doAction(this.value)">
<input type="button" value="Remove" onclick="doAction(this.value)">
</form>
There are other ways that involve not even passing the button's value, but they're not as compatible across browsers (IE uses a slightly different event model).
Of course, if you can get by without doing it in Javascript, and can just pass the clicked button to the server, it gets even easier than that...
<form>
<input type="submit" name="action" value="Add">
<input type="submit" name="action" value="Edit">
<input type="submit" name="action" value="Remove">
</form>
and whichever button you click gets put into the url as action=Add or whatever.
What about:
var buttonValue = document.getElementById('IdOfYourButton').value
have you tried: document.getElementById('button_id').value in the js function that you'll call when the button is clicked?
There is target property which you can use.It targets the element which caused the event to occur.
button.addEventListener('click',function(e){
console.log(e.target.value);
});

html button v.s. html submit?

I have an input text box and a search submit button, and when user clicks the Search submit button, I want to redirect user to url http://testsearch/results.aspx?k=<value of text box k>, for example, if user put "StackOverflow" into text box and then clicks the search button, I want to redirect user to the following page,
http://testsearch/results.aspx?k=StackOverflow
I find when I use button for Search button, it works (see below source codes),
<input type="text" id="k" name="k" />
<input type="button" id="Go" value="Search" onclick="location.href = 'http://somemachine/Search/results.aspx?k='+document.getElementById('k').value;"/>
but when I use submit for Search button, it does not works (see below source codes), why?
<input type="text" id="k" name="k" />
<input type="submit" id="Go" value="Search" onclick="location.href = 'http://somemachine/Search/results.aspx?k='+document.getElementById('k').value;"/>
thanks in advance,
George
You can even use the submit button this way:
<input type="submit" id="Go" value="Search" onclick="document.location='http://testsearch/results.aspx?k=StackOverflow'; return false;" />
Semantically submit button is used to submit forms not redirect pages. You should use normal button type for this. However as i showed you can use the submit button too but that is not semantic i think.
The below line prevents the form from being submitted.
return false;
That is what you are missing in your code :)
Thanks
<button>-elements and <input type="button"/> don't do anything by default, unless you tell them to do something with Javascript.
<input type="submit"/> will submit the form it is in.
So, if <input type="submit"/> won't work, you got it probably not in the <form/>-element itself.
If that's the only field in your form, simply set the form's method to "get" and it'll work.
<html>
<body>
<form action="http://localhost/mytest" method="get" >
<input type="text" id="k" name="k" />
<input type="submit" id="Go" value="Search" />
</form>
</body>
</html>
<button> means "put a button in the page and do whatever the onclick event says". So if you don't write an onclick handler the page doesn't do nothing.
If you use submit is ok, because you want to redirect to another page.
If you want to use button anyway you can do this way:
<script>
function doTheSearch() {
// do the submit mannually
document.getElementById('myForm').submit();
}
</script>
<form id="myForm" action="results.aspx">
<input type="text" id="k" name="k" />
<input type="button" id="Go" value="Search" onclick="doTheSearch();" />
</form>
Warning: submit button with onclick
If you have a submit button (inside a form, it is, a working submit button) with an onclick event, some browsers will:
1) execute onclick
2) execute submit
your onclick tries to redirect but the submit button wins.
If you want to avoid it you have some options:
a) change submit button to normal button
b) avoid the submit thing (add onsubmit="return false;" to form element)
c) use the submit procedure (form action="..." method="get", no onclick event), the browser will be happy and you can control the submit in the onsubmit event (you can cancel it or not).
make sure you got the input's in a form tag with a GET method:
<form action='http://testsearch/results.aspx' method='GET'>
... inputs
</form>
If I'm understanding correctly, it is not working because it is not in a form tag. If you put it in a form tag with method="get" it should work. The button works because it does not have to be in a form.

Categories

Resources