CODEWITHSUNDEEP
javascriptjqueryforms
user1729506
user1729506

Reputation: 975

How can I use jQuery to make a form input field act as a link?

I have a form on a page with two text fields and a submit button. What I would like to do, for a short time, is make it so that the button and the text fields all act like links to the same thing. When any of them are clicked, I want a Yes/No dialog to appear that says "Form under maintenance. You're being redirected to such and such page. Proceed?" No closes and does nothing, Yes sends you to the URL.

Is this possible? If so, how could it be achieved with vanilla js or jQuery?

Upvotes: 0

Views: 141

Answers (4)

icaru12
icaru12

Reputation: 1582

Try this jQuery code:

$("button, input").click(function(e){
    e.preventDefault(); //Stops the default action of an element from happening
    if(confirm("Form under maintenance. You're being redirected to such and such page. Proceed?")) {
        location.href = "http://www.google.com"; //Change it to your URL
    }
});

Upvotes: 0

kufudo
kufudo

Reputation: 2833

$('input[type=submit], input[type=text]').click(function() {
    var r=confirm("Form under maintenance. You're being redirected to such and such page. Proceed?");
    if (r==true)
     {
        window.location = "/...";
     }
  }
});

Upvotes: 0

scrappedcola
scrappedcola

Reputation: 10572

You can, in jquery, by just attaching a click event listener on the input: http://jsfiddle.net/CuWHH/

<input type='text' id='fred' value='none'>
$("#fred").on("click",function()
{
   //can add a confirm box that redirects to new page here
   window.alert("going fishing");
});

Upvotes: 0

Adam
Adam

Reputation: 44929

You can attach a handler to the click event on all those input fields. You can then you the confirm function to prompt the user and redirect the user if he selects "OK".

HTML:

<input type="text" />
<input type="text" />
<input type="submit" />

jQuery:

   $("input").click(function(){
       if(window.confirm("Form under maintenance. You're being redirected to such and such page. Proceed?")){
           location.href = "http://example.com/temp_page";
       }
    });

Upvotes: 4

Related Questions