Switch from using a button element for user input to using a text input field when

Question

Switch from using a button element for user input to using a text input field when

I am encountering a simple issue. I want to initiate an ajax call using the following button

<input type="submit" value="My Button" id="get" />

The challenge is that I prefer not to use a button, but rather plain text for activation instead of a clickable button.

Here is the complete code snippet from a small script.

$("#load_get").click(function(){
$("#result")
.html(ajax_load)
.load(loadUrl, "language=php&version=5");
}); 

//$.get()
$("#get").click(function(){
$("#result").html(ajax_load);
$.get(
loadUrl,
{language: "php", version: 5},
function(responseText){
$("#result").html(responseText);
},
"html"
);
});

javascript css ajax

Answer 1

Answer №1

To clarify your question, here is an illustration:

<script>
$(document).ready(function() {
    $('.ajaxButton').on('click', function(event) { event.preventDefault(); /*$.post()*/ });
});
</script>
<button class="ajaxButton">Click Me</button>

Answer 2

To clarify your question, here is an illustration:

<script>
$(document).ready(function() {
    $('.ajaxButton').on('click', function(event) { event.preventDefault(); /*$.post()*/ });
});
</script>
<button class="ajaxButton">Click Me</button>

Answer 3

Answer №2

If you're looking for some assistance, this code snippet might be useful to you:

$('#submit').click(function(e){
    e.preventDefault();
    //e.stopPropagation();
    var url=$(this).closest('form').attr('action');
    var formData = $(this).closest('form').serialize();
    $.ajax({
        type: $(this).closest('form').attr('method'),
        url: url,
        data: formData,
        success: function(data){ ...},
        error:function (xhr, ajaxOptions, thrownError)
        { 
            alert("Error:"+xhr.status+" "+thrownError);
        }
    });
});

Consider structuring your form like this:

<form method="post" action="process.php" id="myform">
    <input name="one" type="text" value="input one" />
    <input name="two" type="text" value="input two" />
    <a href="" id="submit">Submit</a>
</form>

Answer 4

If you're looking for some assistance, this code snippet might be useful to you:

$('#submit').click(function(e){
    e.preventDefault();
    //e.stopPropagation();
    var url=$(this).closest('form').attr('action');
    var formData = $(this).closest('form').serialize();
    $.ajax({
        type: $(this).closest('form').attr('method'),
        url: url,
        data: formData,
        success: function(data){ ...},
        error:function (xhr, ajaxOptions, thrownError)
        { 
            alert("Error:"+xhr.status+" "+thrownError);
        }
    });
});

Consider structuring your form like this:

<form method="post" action="process.php" id="myform">
    <input name="one" type="text" value="input one" />
    <input name="two" type="text" value="input two" />
    <a href="" id="submit">Submit</a>
</form>

Switch from using a button element for user input to using a text input field when

Answer №1

Answer №2

Similar questions

Tips for adjusting the indentation of list items with CSS while working with floating blocks

Implementing Ajax Js to search within a specific div - reducing text overload on the page

Avoid modifying the HTML DOM structure after utilizing the JQuery Load() method

use ajax to retrieve response using jquery

The MUI Slide Transition experiences a malfunction when using multiple Slide components simultaneously

Develop a duplication of the selected text without the need for the clipboard

I'm feeling uncertain about the installation process of Nodejs

a JavaScript file containing only a require statement with a list of dependencies and a function

Updating array of documents in MongoDB with a new array of documents

How can AngularJS be used to implement lazy loading for Google jsapi charts?

Prevent parent element from triggering double click when double clicking on children element with CSS or jQuery

The passport.use method is failing to invoke in Node.js when utilizing the passport-local strategy

Learn how to utilize AJAX in a JSF input textbox to dynamically update a h:selectOneRadio component

Contrasting click() with dispatchEvent for triggering a click event

Attempting to retrieve AJAX response in JavaScript by utilizing an OOP object

Effortless method of organizing information like scores

Including 'active' in an HTML button does not trigger the styles specified in the :active pseudo-class

Alter the background color of the navigation link in Jquery when the mouse hovers over

Interaction of PHP and JavaScript when a new row is inserted using JavaScript

What is causing this text to shift the div to a separate line?