Jump to content

  • Log In with Google      Sign In   
  • Create Account


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


Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

  • You cannot reply to this topic
5 replies to this topic

#1 Brainx7   Members   -  Reputation: 123

Like
0Likes
Like

Posted 25 June 2014 - 12:21 PM

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, 25 June 2014 - 12:29 PM.


Sponsor:

#2 slicer4ever   Crossbones+   -  Reputation: 3518

Like
1Likes
Like

Posted 25 June 2014 - 12:25 PM

using the css visibility tag:

style = "visibility:hidden"

 

http://www.w3schools.com/cssref/pr_class_visibility.asp


Check out https://www.facebook.com/LiquidGames for some great games made by me on the Playstation Mobile market.

#3 aregee   Members   -  Reputation: 1018

Like
1Likes
Like

Posted 25 June 2014 - 02:03 PM

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, 25 June 2014 - 02:13 PM.


#4 Brainx7   Members   -  Reputation: 123

Like
0Likes
Like

Posted 25 June 2014 - 02:14 PM

using the css visibility tag:

style = "visibility:hidden"

 

http://www.w3schools.com/cssref/pr_class_visibility.asp

The only problem with this code is that the value of the input goes hidden with it, so you're disappearing everything



#5 ApochPiQ   Moderators   -  Reputation: 15099

Like
5Likes
Like

Posted 25 June 2014 - 03:21 PM

Hide the input box, then show a DIV in the same location, that started out invisible. Set the contents of the DIV to the contents of the input box.

#6 OnlyAntony   Members   -  Reputation: 140

Like
0Likes
Like

Posted 26 June 2014 - 02:21 AM

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, 26 June 2014 - 02:22 AM.





Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.



PARTNERS