Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ HIDE AND DISPLAY OF BUTTONS WITH JAVASCRIPT

Posted by: shankar from vizag Jun 1 2019, 12:09 AM

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: 583

Posted by: shankar from vizag Jun 1 2019, 12: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 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

Posted by: shankar from vizag Jun 1 2019, 03:12 AM

Is it possible to pass input values through post method using javascript ?

Posted by: Christian J Jun 1 2019, 05:04 AM

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.

Posted by: shankar from vizag Jun 1 2019, 05:30 AM

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

Posted by: shankar from vizag Jun 1 2019, 06:36 AM

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

Posted by: Christian J Jun 1 2019, 02:24 PM

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

Posted by: CharlesEF Jun 1 2019, 05:46 PM

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?

Posted by: shankar from vizag Jun 1 2019, 08:29 PM

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

Posted by: Christian J Jun 2 2019, 05:49 AM

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.

Posted by: shankar from vizag Jun 3 2019, 08:38 PM

Greetings


Yes, its working.

Thank you very much.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)