The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> HIDE AND DISPLAY OF BUTTONS WITH JAVASCRIPT
shankar from vizag
post Jun 1 2019, 12:09 AM
Post #1


Advanced Member
****

Group: Members
Posts: 164
Joined: 18-June 13
Member No.: 19,316



Greetings

1. I have a form with input fields and some buttons.
2 Button1 is to save the data and onload of the form, all except save button, will remain in hide mode.
3. Onclick of the button1(save), button1 has to disappear and button2 value Note should display and onclick of this button has to carry 2 actions as,

(a) it should disappear and button3 value sanction should display and
(b) it should carry the entered values to another php form

Issues I am facing:

When the buttons are inside the form, hide and display actions are not working properly

When I placed the buttons outside the form, hide and display actions working perfectly but not navigating to the other php page. I am attaching the php page for your reference and guidance please.

regardsAttached File  hidebuttons.php ( 1.66k ) Number of downloads: 298
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
shankar from vizag
post Jun 1 2019, 12:39 AM
Post #2


Advanced Member
****

Group: Members
Posts: 164
Joined: 18-June 13
Member No.: 19,316



I placed the following javascript to navigate to other php page,

<script type="text/javascript">
document.getElementById("note").onclick = function () {
location.href = "denote.php";
};
</script>

But the input values are not carry forward to designated places in denote.php rather I am getting an error message as follows:

Notice: Undefined index: notenum in C:\xampp\htdocs\ShankarProject\denote.php on line 51

Notice: Undefined index: note_date in C:\xampp\htdocs\ShankarProject\denote.php on line 52

As the method of the form is post and it seems with that only can fetch input values from hidebuttons.php file. If it so, how to hide and display buttons with php. will it be possible ?

regards
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
shankar from vizag
post Jun 1 2019, 03:12 AM
Post #3


Advanced Member
****

Group: Members
Posts: 164
Joined: 18-June 13
Member No.: 19,316



Is it possible to pass input values through post method using javascript ?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 1 2019, 05:04 AM
Post #4


.
********

Group: WDG Moderators
Posts: 8,238
Joined: 10-August 06
Member No.: 7



QUOTE(shankar from vizag @ Jun 1 2019, 07:39 AM) *

I placed the following javascript to navigate to other php page,

<script type="text/javascript">
document.getElementById("note").onclick = function () {
location.href = "denote.php";
};
</script>

But the input values are not carry forward to designated places in denote.php

To make the INPUT values carry over to another URL you need to submit the form.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
shankar from vizag
post Jun 1 2019, 05:30 AM
Post #5


Advanced Member
****

Group: Members
Posts: 164
Joined: 18-June 13
Member No.: 19,316



QUOTE(Christian J @ Jun 1 2019, 03:34 PM) *

QUOTE(shankar from vizag @ Jun 1 2019, 07:39 AM) *

I placed the following javascript to navigate to other php page,

<script type="text/javascript">
document.getElementById("note").onclick = function () {
location.href = "denote.php";
};
</script>

But the input values are not carry forward to designated places in denote.php

To make the INPUT values carry over to another URL you need to submit the form.


Thank you Christian ji for your response,

The submit button is named as save and placed all the other buttons inside the form then the navigation and carrying values are working well.

When I tried to Hide and Display buttons one after other is not working when buttons are inside the form. This is working well when I am placing buttons except "SAVE" other buttons outside the form, here, the navigation is not working.

Can formaction property which I placed in the input line be used in javascript ?

Kindly guide me.

regagrds
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
shankar from vizag
post Jun 1 2019, 06:36 AM
Post #6


Advanced Member
****

Group: Members
Posts: 164
Joined: 18-June 13
Member No.: 19,316



for the time being, to hide the buttons on form load, I have added the following script.

<script type="text/javascript">
document.getElementById("note").style.display="none";
document.getElementById("sanction").style.display="none";
document.getElementById("refresh").style.display="none";
document.getElementById("back").style.display="none";
</script>

now, buttons are in hidden condition.

onclick of save button, the NOTE button should appear and SAVE to disappear. Still working on it to fix the issue. If anyone has an Idea kindly share.

regards
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 1 2019, 02:24 PM
Post #7


.
********

Group: WDG Moderators
Posts: 8,238
Joined: 10-August 06
Member No.: 7



QUOTE(shankar from vizag @ Jun 1 2019, 12:30 PM) *

When I tried to Hide and Display buttons one after other is not working when buttons are inside the form.

I think this happens because #submit1 is a submit button. So when you click it, a new page loads before the sript can finish. Use an ordinary button instead, and only use a submit button if you want to submit the form.

QUOTE
This is working well when I am placing buttons except "SAVE" other buttons outside the form, here, the navigation is not working.

I noticed that too, very strange. unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jun 1 2019, 05:46 PM
Post #8


Programming Fanatic
********

Group: Members
Posts: 1,672
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



I'm sorry but this code makes no sense at all. How do you expect to show or hide elements when the form is submitted? Why so many submit buttons? If you want to show or hide elements you should use a normal button, not a submit button.

I don't do jQuery so I had to read the docs. According to what I read the jQuery id selector doesn't support an array of elements, but that's how you have used it
CODE
$("#div2, #div3,#div4, #div5").hide();
. How can the user enter a Note Number when the element is marked as readonly?

I can't run your page because you have CSS and Javascript files linked from your localhost. I don't have those files so your page won't work for me. Do you have a website where you can put your test page on the web so everyone can check it?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
shankar from vizag
post Jun 1 2019, 08:29 PM
Post #9


Advanced Member
****

Group: Members
Posts: 164
Joined: 18-June 13
Member No.: 19,316



QUOTE(CharlesEF @ Jun 2 2019, 04:16 AM) *

I'm sorry but this code makes no sense at all. How do you expect to show or hide elements when the form is submitted? Why so many submit buttons? If you want to show or hide elements you should use a normal button, not a submit button.

I don't do jQuery so I had to read the docs. According to what I read the jQuery id selector doesn't support an array of elements, but that's how you have used it
CODE
$("#div2, #div3,#div4, #div5").hide();
. How can the user enter a Note Number when the element is marked as readonly?

I can't run your page because you have CSS and Javascript files linked from your localhost. I don't have those files so your page won't work for me. Do you have a website where you can put your test page on the web so everyone can check it?



Thank you charles ji and Christian ji for your response,

Actual intention of hide and display is,

After click of SAVE button, NOTE button should appear and onclick of NOTE button the input values should carry to other php page viz., denote.php where, all the content is loaded in a prescribed format and enables printing accordingly. There I kept a BACK button which redirects to previous page. Then, SANCTION button would appear, which is another prescribed format will load with the input fields and enables printing.

This is what I need.

1. I changed all submit type to button as suggested.
2. for the SAVE submit button I used as

<input class ="btn btn-primary" type="submit" id="submit1" name="submit1" value="SAVE" onclick="this.style.display = 'none';"/>
<input type="button" id="note" class="btn btn-success" value="NOTE" formaction="denote.php"></div>
<input type="button" id="sanction" class="btn btn-success" value="SANCTION" formaction="desanction.php">
</form>

but the SAVE submit button is hiding for 1 second only again it displaying. for the unknown reason. Can I put NOTE button display herein onclick event ?

Charles Ji, I am neither a professional web developer nor a software engineer. I am a Personal Assistant for an office. I am automating my work which accessible to a very limited persons (5 persons) over LAN (intranet). I dont have any website. I am very proud to say, I joined this forum in the year 2013 and by then with my interest and your support I reached from zero knowledge in php to current position. I really thank this forum.

regards

This post has been edited by shankar from vizag: Jun 1 2019, 08:37 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 2 2019, 05:49 AM
Post #10


.
********

Group: WDG Moderators
Posts: 8,238
Joined: 10-August 06
Member No.: 7



QUOTE(shankar from vizag @ Jun 2 2019, 03:29 AM) *

After click of SAVE button, NOTE button should appear and onclick of NOTE button the input values should carry to other php page viz., denote.php

Then SAVE should be of type="button", and NOTE should be of type="submit". But it doesn't make senses to just hide SAVE onclick and show NOTE instead (then you could use the NOTE button alone, and get rid of the SAVE button). What more is the "SAVE" button doing?

QUOTE
There I kept a BACK button which redirects to previous page. Then, SANCTION button would appear, which is another prescribed format will load with the input fields and enables printing.

I don't understand this part. If the SANCTION button appears the page is not the same as it was previously, so you can't just redirect back to it.

Could you explain more of what the forms on each page should do (not just the click buttons)? To begin with, the naming of the different buttons is confusing to me: SAVE doesn't save anything, and I have no idea what the PHP scripts in denote.php and desanction.php are doing with the form data.

QUOTE
1. I changed all submit type to button as suggested.
2. for the SAVE submit button I used as

<input class ="btn btn-primary" type="submit" id="submit1" name="submit1" value="SAVE" onclick="this.style.display = 'none';"/>
<input type="button" id="note" class="btn btn-success" value="NOTE" formaction="denote.php"></div>
<input type="button" id="sanction" class="btn btn-success" value="SANCTION" formaction="desanction.php">
</form>

but the SAVE submit button is hiding for 1 second only again it displaying. for the unknown reason.

It's because it's still a submit button, so after that 1 second the page is reloaded again to its default state. Don't use submit for SAVE, use submit for NOTE only. I'm not yet sure how and when the SANCTION button should be displayed.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
shankar from vizag
post Jun 3 2019, 08:38 PM
Post #11


Advanced Member
****

Group: Members
Posts: 164
Joined: 18-June 13
Member No.: 19,316



Greetings


Yes, its working.

Thank you very much.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 16th October 2019 - 12:07 AM