Question

Here’s my current code:

$(document).ready(function(){
    $("input#url").bind("textchange",showPage);
    $("input#url").focus();


    $("form#surlform").submit(function(){
        var url = $("input#url").val(); 
        $.get("api/create.php?url=" + url, function(data) {
                $("input#url").val(data);
                $("input#url").select();
            });

        return false;
    });
    });

$(document).click(function(){
    showPage();
});
$(document).mousemove(function(){
    showPage();
});

At the moment, when the form is submitted, jQuery stops it from reloading the page, and simply pulls the required output from the API.
If possible, I’d like to make it also change the button, so that the button text is different, and it links to a page instead of submitting the form with jQuery. (If it helps, the button it changes to can be a div – only the original button needs to be button for form).

That’s not all…
I’d then like it to change BACK to the button that submits the form via jQuery with the original text when the text in the text field is altered.

This is quite a big ask, but if anyone’s got a way to go about this, I’d be very grateful.

Answer 1

Something like this?:

HTML:

<form id="someForm">
    <input id="someInput" type="text" />
    <input id="submitButton" type="submit" />
    <input id="linkButton" type="button" value="Submit" />
</form>​

CSS:

#linkButton { display: none; }​

JavaScript:

$('#someForm').submit(function () {
    $('#submitButton').hide();
    $('#linkButton').show();
    return false;
});

$('#linkButton').click(function () {
    alert('use something like window.location here to act like a link');
});

$('#someInput').change(function () {
    $('#linkButton').hide();
    $('#submitButton').show();
});

It’s overly simple at the moment and could likely use some improvement, but the idea is straightforward enough…

1. When the page initially loads, the “link” button is hidden.
2. Any time the “submit” button is clicked, the “submit” button is hidden and the “link” button is shown. (Naturally after whatever AJAX you’re doing, not included here for brevity.)
3. Any time the “link” button is clicked, do something. In your case it’s to act as a link, right? window.location = 'some new location'; essentially.
4. Any time the text changes, the “link” button is hidden and the “submit” button is shown. In the event that they were already hidden and shown, no harm done. (There’s probably a more elegant and less show-and-hide-every-time way to do this, but it gets the job done.)