Can I submit form values using <input type="button" />?

Question

I'm working on a search engine and I have a really serious problem with GET and POST methods.

Im using an <input type="button" /> to avoid page from refreshing every time im pressing the button.

After button is pressed I'm showing a result (google_map, monumet picture, specs).

The problem now is that I want to submit and show form values + result (google_map, monumet picture, specs) by pressing this button.

This is a problem because <input type="button" /> does not submit form values and I'm really stuck.

<input id="slide" onMouseUp="getScriptPage('count_display','text_content','1')" type="button" style="font-family:cursive;border-radius:10px 10px 10px 10px;background-color:brown;color:white;font-size:14pt;" value="Search now" name="filter" /> <BR/><BR/> — Antreas Apostolou
– Antreas Apostolou, Commented Sep 15, 2013 at 15:18
the problem is that i already using javascript if button isset onMouseUp="getScriptPage('count_display','text_content','1')" — Antreas Apostolou
– Antreas Apostolou, Commented Sep 15, 2013 at 15:18
is it possible to call to javascript functions the same time ? onMouseUp="getScriptPage('count_display','text_content','1'); script_page2(.....);" — Antreas Apostolou
– Antreas Apostolou, Commented Sep 15, 2013 at 15:20

arielcr · Accepted Answer · 2013-09-15 17:53:38Z

3

Sure, here is a working example for you:

index.php

<!DOCTYPE html>
<html>
<head>
    <title>Working Example</title>
</head>
<body>

<form id="search-form">
    <input type="text" name="text1" id="text1" value=""><br>
    <input type="text" name="text2" id="text2" value=""><br>
    <input type="text" name="text3" id="text3" value=""><br>
    <input type="button" id="search-button" name="search-button" value="search">
</form>

<div id="response"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('#search-button').click(function(){
            $.ajax( {
                type: "GET",
                url: 'response.php',
                data: $('#search-form').serialize(),
                success: function(response) {
                    $('#response').html(response);
                }
            } );
        });
    });
</script>

</body>
</html>

response.php

<?php

echo "text1: " . $_GET['text1'] . "<br>";
echo "text2: " . $_GET['text2'] . "<br>";
echo "text3: " . $_GET['text3'] . "<br>";

echo "your response ...";

In the response you return whatever your response is, plus the form fields.

edited Sep 15, 2013 at 17:53

answered Sep 15, 2013 at 15:30

arielcr

1,6632 gold badges23 silver badges34 bronze badges

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

3 Comments

Antreas Apostolou Over a year ago

thanks arielcr,can you please post me a working example with this code you just post to me? coz i tried my self and i think im doing something wrong

arielcr Over a year ago

I edit the answer with a working example. I forgat to tell you that you can use whatever event for the ajax response, I used the click event for the button as a example. Hope it helps!

Antreas Apostolou Over a year ago

thank you so much you are the best...you save my day for sure ...:-)

Hanky Panky · Accepted Answer · 2013-09-15 15:18:04Z

1

onClick="document.getElementById('FormName').submit();"

answered Sep 15, 2013 at 15:18

Hanky Panky

46.9k9 gold badges76 silver badges95 bronze badges

2 Comments

Antreas Apostolou Over a year ago

im already using onMouseUp="getScriptPage('count_display','text_content','1')"......Can i use onclick and onMouseUp in the same input?

Cthulhu Over a year ago

@AntreasApostolou It would take less to to try it yourself then writing this comment...

Collectives™ on Stack Overflow

Can I submit form values using <input type="button" />?

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related