I have a form with two div elements see code below:
DIV1 id="hide_onclick": should hide when a submit button is clicked
DIV2 id="show_onclick": should display when a submit button is
clicked
However when the Javascript executes on onClick, DIV2 displays query results in a flash and hides back. If i change the input type="submit" to type="button", DIV2 shows properly but i wont be able to get query results.
I could not figure out how to fix this.
<!--Form uses vehicle registration to pull record from database -->
<form class="form-horizontal" method="post">
<div class="row" style="padding-bottom:10px;">
<div class="col-sm-4">
Vehicle Registration
</div>
<div class="col-sm-8">
<input type="text" class="form-control" name="vehiclereg" value="<?php echo $vehiclereg;?>" />
</div>
</div>
<!--Visible div to hide on button click -->
<div id="hide_onclick">
<div class="row" style="padding-bottom:10px;">
<div class="form-group">
<div class="col-xs-12">
<input type="submit" name="retrieve_vehicle" value="Click to retrieve vehicle" onclick="show_hideDiv();" />
</div>
</div>
</div>
</div>
<!--Hidden div to display after the onclick event from the button above and displays the records-->
<div id="show_onclick" style="display:none;">
Upadates from database
</div>
</form>
<!--Javascript to hide the first div and display the second div -->
<script>
function show_hideDiv() {
document.getElementById("hide_onclick").style.display = "none";
document.getElementById("hide_onclick").disabled = true;
document.getElementById("show_onclick").style.display = "block";
}
</script>
It's because when you submit a form, it redirects the page to the action attribute. In your case, since you have none, it will refresh the page.
So, you are changing the div2 to visible, but then the page refreshs and goes back to the initial state...
There is a basic difference between type ="submit" and type="button". type="submit" will submit your form and reload the page. Thats why your div2 shows up untill the page load back.
On the other hand type="button" do not submit the page ( page does not reload) , it only calls your show_hidediv() function. My suggestion is to use ajax for this kind of situation where you dont want to reload your page but want to retrieve data from database.
The explanation is as LcSalazar says.
The solution (or perhaps a hack) I found, is using the display code from within the hidden div AGAIN.
Remember, you should keep all the rest of your codes.
<!--Hidden div to display after the onclick event from the button above and displays the records-->
<div id="show_onclick" style="display:none;">
<!-- keeps the div visible after the page refresh -->
<script>$('#show_onclick').css('display','block');</script>
<!-- Updates from database -->
</div>
Related
I have project, where I need to add popup form. Here is my project structure.
<body>
<div class="header">ART Compiler Explorer </div>
<div class="container">
<div class="box1">
<div id="inside" >
<label for="input-file" class="custom-file-upload">Select Java File</label>
<select class="tab" name="android" id="android"> </select>
</div>
<textarea id="editor" name="field1"><?php if(isset($_POST['field1'])){echo htmlentities ($_POST['field1']);}?>
</textarea>
</div>
<div class="box1 box2">
<div id="second" >
<select class="tabb" name="launguage" id="launguage" onchange='this.form.submit()' > </select>
<button type ="button" class="btn" onclick='this.form.submit()'>Refresh</button>
</div>
</div>
</div>
</body>
I want to add popup form under div id="inside"
which have code structure like:
<button class="add" onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Add ToolChain</button>
<div id="id01" class="modal">
<div class="imgcontainer">
</div>
<div class="container_form">
</div>
</div>
The problem I am facing is The popup does not come in fully as in above link, instead it get hidden by first half text editor (see the blue colour line, which get shifted by left).
It seems popup div id "id01"make seperate space inside the div id ="inside", so not coming properly. Please suggest me how to tackle this problem as I have to add popup form under div id="inside", but this pop up form contain itself another div which make separate space.
Please help me to resolve this problem.
The popup is not coming over the textarea because of z-index, add z-index:4 to your popup modal so that it can come on top of the textarea.
.modal {
z-index:4
}
We are currently having a two page application where the users will enter the data and those is passed to the database and the results are displayed in a grid in the next page
<div class="md-padding col-md-6">
<div class="row form-group">
<button type="button" class="btn btn-success"
href="Views/Angular/results.html"
ng-click="createRequest(homeForm)">
Submit
</button>
</div>
</div>
The results.html has the grid that shows the result. Instead of navigating to the next page how can I shows the result grid on the same page
by using ng-show directive for example.....
result.html
<div ng-show="page.result">
<h1> this is result page </h1>
</div>
user.html
<div ng-show="page.user">
<h1> this is user page </h1>
<div>
by default show user.html when page is loading set page.user = true
set on controller
after submit user data set page.user = false and page.result = true to
show in page
for more detail click here
Why you don't do two components and call them via selector at one page? In the second component you set the content after you clicked the button and will pop up immediately your data
Details:
<div class="row-fluid">
<div ng-app="sampleAngular">
<div id="panel-1" ng-controller="Controller1">
<!-- some html code here that displays a table of information-->
</div>
<p><button type="button" onclick="onSubmit();" name="subscribe">Subscribe to Panel-2 Info</button> </p>
<div id="panel-2" ng-controller="Controller2">
<!-- some html code here that displays another table of information-->
</div>
</div>
</div>
Question:
The content in div id "panel-2" should be displayed only when the user clicks "Subscribe to Panel-2 Info" button. The button should update a record in DB, and then render the content in div id "panel-2" without refreshing the whole page. How to implement this requirement - any ajax logic in onSubmit() function?
Note: I should not render the whole page and then set visibility: false around "panel-2" as I shouldn't call the controller "ng-controller="Controller2" until the user subscribes (clicks the button).
In your onSubmit() function, make your Ajax call which should return the results that you want in HTML, or as data which you then HTML format it in JavaScript and display it using the innerHTML property. Here is an example (click the button to see how it works):
function onSubmit() {
//make your Ajax call here
//if the Ajax was successful, display the result
document.getElementById("panel-2").innerHTML = "some html code here that displays another table of information (this is the result of the Ajax call)";
//if the Ajax resulted in error, display an error message
//document.getElementById("panel-2").innerHTML = "an error occurred";
}
<div class="row-fluid">
<div ng-app="sampleAngular">
<div id="panel-1" ng-controller="Controller1">
some html code here that displays a table of information
</div>
<p><button type="button" onclick="onSubmit();" name="subscribe">Subscribe to Panel-2 Info</button> </p>
<div id="panel-2" ng-controller="Controller2"></div>
</div>
</div>
When the JQM js (1.4.5) library has finished manipulating the DOM to include all its widgets, it moves popup divs to just before the page closing div. In my case, I have inputs in the popup that I want to be POSTed as part of the <form> by which they were contained in the source.
Here's an illustation of what I mean:
Source:
<div id="page1" data-role="main">
<form>
<input name="someinput">
<div id="mypopup"><input name="Oops"></div>
</form>
</div>
DOM post-processing:
<div id="page1" data-role="main">
<form>
<input name="someinput">
</form>
<div id="mypopup"><input name="Oops"></div>
</div>
What's the best practice way to get that input back into the form where it can be sent via POST?
I have this piece of HTML:
<div class="pop-up rooster-toevoegen">
<div class="pop-up-container">
<div class="pop-up-header clearfix">
<div class="pop-up-title">
Rooster toevoegen
</div>
<div class="sprite close"></div>
</div>
<div class="pop-up-content clearfix">
<form id="rooster-toevoegen-form" class="form rooster-toevoegen-form">
<div class="afdeling-container">
</div>
<div class="date-container">
</div>
<div class="button-container clearfix">
<button value="" name="rooster-toevoegen-button" class="rooster-toevoegen-button button-green">Toevoegen</button>
</div>
</form>
</div>
</div>
</div>
Now I want a click function on .rooster-toevoegen and exclude all children from this click function EXCEPT the button. Also the button has already a function(submitting the form), this must stay the buttons event handler.
CONTEXT:
This is a pop-up with a form inside. When the user clicks next to the pop-up the pop-up has to close. Not when clicking on the pop-up which happens when I don't exclude the children from the click event. BUT when the user clicks on the button the form has to submit. So the button should not be excluded from the click and perform his own action.
How do I do this?
You can prevent from bubbling to all elements using e.preventDefault(), and manually trigger click on button.
Better way is to bind one more click event only to button.