Sign in to follow this  
Brainx7

Is there any web code for making the input box dissappear when submit

Recommended Posts

Brainx7    144

I mean like, instead of using php to send the input and all that stuff, just have the box disappear and just leave the text that was input, idk like maybe make the box invisible when you click submit

Edited by Brainx7

Share this post


Link to post
Share on other sites
aregee    1072

Isn't it better to have the button disabled rather than mysteriously disappear?

 

document.getElementById("submitButton").disabled = true;

 

http://www.w3schools.com/jsref/prop_pushbutton_disabled.asp

 

You can also add css if you want your own style on the disabled button, according to this example:

 

 
Edit: Sorry, didn't notice that it was an input box and not a button.  Just hide the box like slicer4ever suggests. smile.png
 
Edit 2: Maybe you want to disable rather then hide anyway, since hiding things moves stuff around on the page, which in my opinion is an annoyance.
 
What I usually do, when I want to submit something, unless you want an edit box that works like in Facebook, which require a lot more code and no loading of pages, is:
 
1. User clicks submit.
2. Optionally disable the submit button.
3. Call a script server side to process the data.
4. The script then redirects you to another page after processing.
5. If the user now clicks the back button, you will not have the process script running again, no resubmit of data, but the page where the user entered his/her input.
 
So basically: 
getuserinput.php -> processuserinput.php (redirect to:) -> userinputresult.php
 
The browser only "sees" getuserinput.php and userinputresult.php in terms of browser history, the processuserinput.php is not in the history.
Edited by aregee

Share this post


Link to post
Share on other sites
OnlyAntony    140

Something like this?

 

Say you have the HTML:

<input type="text" id="txt">
<div id="adiv"></div>

From what you said above you want:

function HideText()
{
     var txt = document.getElementById("txt");
     var div = document.getElementById("adiv");

     div.innerHTML = div.value;
     txt.style.display = "none";
     div.style.display = "block";
}

And the div will have the following CSS:

#adiv{
     display: none;
}

I think this is what you want happy.png

Edited by OnlyAntony

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this