I have this code that is in a div. Within the div, there is code to list the trips entered and code to enter the individual trips. I want to use angular to only display the form to enter each trip so when the submit button is clicked, the div will spin around and show the content that was just submitted on the other side of the div. Is There a way to do that the way I have this set up?
<div id="modal">
<main ng-controller="TripsController as trips" id="temp-overflow">
<!-- List of All the Users Trips -->
<h2>All of your trips</h2>
<ul>
<li ng-repeat="trip in trips.current_user_trips">
Title: {{trip.title}}
Destination: {{trip.destination}}
Description: {{trip.description}}
Start Date: {{trip.start_date}}
<div ng-controller="CommentsController as commentsCtrl">
<h3>Comments:</h3>
<ul>
<li ng-repeat="comment in trip.comments">
Entry: {{comment.entry}}
Author: {{comment.commenter}}
</li>
</ul>
<form ng-submit="commentsCtrl.createComment()">
<input type="text" ng-model="commentsCtrl.newCommentEntry" placeholder="entry"/>
<input type="submit" value="Comment"/>
</form>
</div>
</li>
</ul>
<!-- Form to Enter Users Latest Trip -->
<h2>Where have you been?</h2>
<form ng-submit="trips.createTrip()">
<input type="text" ng-model="trips.newTripTitle" placeholder="Title"/>
<input class="search" places-auto-complete types="['geocode']" on-place-changed="placeChanged()"/>
<input type="text" ng-model="trips.newTripDescription" placeholder="Description"/>
<input type="date" ng-model="trips.newTripStartDate" placeholder="Start Date"/>
<input type="date" ng-model="trips.newTripEndDate" placeholder="End Date"/>
<input type="text" ng-model="trips.newTripNotes" placeholder="Notes"/>
<input type="submit" value="Submit your Trip"/>
</form>
</main>
</div>
It sounds like you are looking for the ng-show and ng-hide attributes. You can set a Boolean in your Controller to show or hide certain components of the DOM.
Here is a link to the documentation:
https://docs.angularjs.org/api/ng/directive/ngShow
Hope this points you in the right direction.
Related
I am new to web development. Now I am in a mess.
I want to show 4 random questions in a label. Say
Largest River in the world?
Largest ocean?
Largest Forest?
Largest Waterfall?
At the same time, the values [questions] should take into a hidden input box [for POST].
How to create it using Java Script?
My HTML Code is as follows
<ul class="sf-content"> <!-- form step two -->
<li>
<div class="sf_columns column_3">
<label id="qtext"> <strong>Question1?</strong></label>
</div>
</li>
<li>
<div class="sf_columns column_3">
<input type="text" placeholder="Answer" name="answer" data-required="true" >
<input id="qhtext" type="text" name="question" value="" readonly />
</div>
</li>
</ul>
I got the answer
<ul class="sf-content"> <!-- form step two -->
<li>
<div class="sf_columns column_3">
<label id="qtext"></label>
</div>
</li>
<li>
<div class="sf_columns column_3">
<input id="answer" type="text" placeholder="Answer" name="answer" data-required="true" >
<input id="qhtext" type="text" name="question" value="" readonly />
</div>
</li>
</ul>
The js is as follows
var questions = ["Largest River in the world?","Largest ocean?","Largest Forest?","Largest Waterfall?" ];
$(document).ready(function(){
getRandomQuestion();
});
function getRandomQuestion(){
//Math.floor(Math.random()*(max-min+1)+min); - random number between min and max
var randomQuestion = questions[ Math.floor(Math.random()*4)];
$("#qtext").text(randomQuestion);
$("#qhtext").val(randomQuestion);
}
I have added an aweber form on my project file called adduser.php. It has three fields First name, Last Name and Email. When user will submit form data they will go to welcome.php page. In welcome.php page I have some welcome message and and button called "Start". When a user click on "Start" Button they will get a custom form.
So, My question is now, How can i show previously data that was submited by user on adduser.php on my custom form.
Remember that I did not use any custom database to store adduser.php form data. This page handled by aweber.com embedded Perl script.
There are total four pages on my Project folder. one is adduser.php and then welcom.php, then custom.from.php and last one is thankyou.php.
This is the form script for adduser.php. It is a embedded from script provided by aweber.com.
<form method="post" class="af-form-wrapper" action="https://www.aweber.com/scripts/addlead.pl" >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="1305186106" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="awlist3791609" />
<input type="hidden" name="redirect" value="http://localhost/php/intro.php?" id="redirect_33699466c49909887d43ec924c761a52" />
<input type="hidden" name="meta_adtracking" value="My_Web_Form" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="name (awf_first),name (awf_last),email" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<div id="af-form-1305186106" class="af-form">
<div id="af-header-1305186106" class="af-header">
<div class="bodyText">
<p> </p>
</div>
</div>
<div id="af-body-1305186106" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-71044792-first">First Name:</label>
<div class="af-textWrap">
<input id="awf_field-71044792-first" type="text" class="text" name="name (awf_first)" value=""/>
</div>
<div class="af-clear"></div>
</div>
<div class="af-element">
<label class="previewLabel" for="awf_field-71044792-last">Last Name:</label>
<div class="af-textWrap">
<input id="awf_field-71044792-last" class="text" type="text" name="name (awf_last)" value=""/>
</div>
<div class="af-clear"></div>
</div>
<div class="af-element">
<label class="previewLabel" for="awf_field-71044793">Email: </label>
<div class="af-textWrap">
<input class="text" id="awf_field-71044793" type="text" name="email" value=""/>
</div>
<div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<input name="submit" type="submit" class="btn btn-success" value="Start Screening"/>
</div>
</div>
</div>
</form>
I'm in big trouble, I'm unable to handle I'm waiting for support from expert developer. I'm still working on local server connected with internet.
You can use $_SESSION to use your variables through your entire application runtime. At the end, just close them to clear your users browsers.
It's a common practice used by "flash session messages". They setup the message by $_SESSION and close when the variables has no use anymore.
Change the default action of your form
<form method="post" class="af-form-wrapper" action="https://www.aweber.com/scripts/addlead.pl" >
to
<form method="post" class="af-form-wrapper" action="trial.php" >
In this file trial.php, start the seeion first and then use the session variables as follows
session_start();
$_SESSION["first-title"] = $_POST['awf-first'];
and so on for each of the form inputs and then redirect the page to default action using location
header('Location : Aweber perl script link');
I have two angular app blocks in a page. each one works individually , but when i try to run both only first one works.
<body>
<div ng-app='myApp' class="Freight">
<div ng-controller="MainCtrl">
<div>
<ul>
<li ng-repeat="prdElement in palletElement">
<span>
<input type="text" ng-model="prdElement.name" placeholder="Name" required />
</span>
<ul>
<li ng-repeat="elemnt in prdElement.product">
<div class="prd-box">
<span>
<input type="text" ng-model="elemnt.Code" placeholder=" Code" required />
</span>
<span>
<input type="text" ng-model="elemnt.name" placeholder=" Description" required />
</span>
<span>
<input type="text" ng-model="elemnt.class" placeholder=" Class" required />
</span>
<span>
<input type="text" ng-model="elemnt.quantity" placeholder=" Quantity" required />
</span>
<span>
<input type="text" ng-model="elemnt.weight" placeholder=" Weight" required />
</span>
<span ng-hide="elemnt.length == 1">
Remove Item
</span>
</div>
</li>
<li>
Add Item
</li>
</ul>
Add Pallet
Remove Pallet
Remove Pallet
</li>
</ul>
</div>
<div>
<button ng-click="showitems($event)">Submit</button>
</div>
<div id="displayitems">{{palletElement}}</div>
</div>
</div>
<div ng-app='PackageApp' class="Freight">
<div ng-controller="PackageCtrl">
<div>
<ul>
<li ng-repeat="prdPackageElement in packageElement">
<span>
<input type="text" ng-model="prdPackageElement.name" placeholder="Name" required />
</span>
</li>
</ul>
</div>
<!--<div>
<button ng-click="showitems($event)">Submit</button>
</div>
<div id="displayitems" style="visibility:hidden;">
{{prdElement}}
</div>-->
</div>
</div>
in this case only first app 'MyApp' works.
Detailed
Fiddle here
https://docs.angularjs.org/api/ng/directive/ngApp
Only one AngularJS application can be auto-bootstrapped per HTML
document. The first ngApp found in the document will be used to define
the root element to auto-bootstrap as an application. To run multiple
applications in an HTML document you must manually bootstrap them
using angular.bootstrap instead. AngularJS applications cannot be
nested within each other.
http://jsfiddle.net/pz83w/16/
check the fiddle.I have two forms in it.I have a java script for forming a slide transitin between the forms.At first when the page loads,the both forms are shown,but i want only one form shown.Later when I click the links its working fine.How can I correct this.
<div class="demo">
<form class='form show' id="formA">
Card Payment
Internet banking
<h2>Card Payment</h2>
<input type='hidden' id='ccType' name='ccType' />
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
<label for="card_number">Card number</label>
<input type="text" name="card_number" id="card_number">
<div class="vertical">
<label for="expiry_date">Expiry date <small>mm/yy</small>
</label>
<input type="text" name="expiry_date" id="expiry_date" maxlength="5">
<label for="cvv">CVV</label>
<input type="text" name="cvv" id="cvv" maxlength="3">
</div>
<div class="vertical maestro">
<label for="issue_date">Issue date <small>mm/yy</small>
</label>
<input type="text" name="issue_date" id="issue_date" maxlength="5"> <span class="or">or</span>
<label for="issue_number">Issue number</label>
<input type="text" name="issue_number" id="issue_number" maxlength="2">
</div>
<label for="name_on_card">Name On card</label>
<input type="text" name="name_on_card" id="name_on_card">
<input type="submit" value="Pay Now !">
</form>
<form class='form' id="formB">
<div id="internet">
Card Payment
Internet banking
<h2>Internet Banking</h2>
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
</form>
</div>
and javascript is
$(document).ready(function(){
$(".tabHeader").click(function(){
$(".form").each(function(){
if ($(this).hasClass('show')) {
$(this).slideUp(900).removeClass('show');
} else {
$(this).delay(900).addClass('show').slideDown();
}
});
});
});
You could hide the second form in javascript like this:
$(".form").not(':first').hide();
Or an update of the Jsfiddle: http://jsfiddle.net/pz83w/18/
By default you could use style="display:none" on the form you don't want shown.
Sorry for the bad format sent from my phone.
Update CSS to hide forms without show class
In HTML and CSS, everything is visible unless you specifically ask it not to be.
Your showing and hiding is embedded within an onclick handler, so it won't execute until the links are clicked.
Until the links are clicked, why would a form be hidden? There is nothing to hide them.
You could of course have display: none set in in a stylesheet, but you did not include any CSS, so I assume there is none.
Try putting style="display: none" on the form tag you want to initially hide, like so:
<form class='form' id="formB" style="display: none">
Well, You can add either of the following css properties.
"display: none" or "visibility:hidden"
display:none means that there will be no space allocated for it. visibility:hidden means that the tag is not visible, but space is allocated for it on that particular page.
$("#formB").css("visibility","hidden");
Add this when when you show the page and then make it visible when you want second form to appear when you click on link,
$("#formB").css("visibility","visible");
I am using Bootstrap and parsley.js (for form validation) All is working fine except I now have the error message showing up in an Alert (Bootstrap) Right now the alert box is showing on the screen whether there is an error or not. I would like it to appear only when there are errors and disappear when there isn't any errors from parsley.js. I have tried researching this issue and found some code that hid the alert box but none that worked with the alerts from Parsley.js. I typed up my own Javascript that is below thinking I could make it work, it doesn't (obviously). What should I change? Should I just trash the javascript all together and do something else? I would really love for each alert to appear in it's own Alert Box stacked one on top of another. I made a jsFiddle
Two Part Question
Make the alert box appear only when there is an error inside.
Make each alert passed from Parsley.js appear in it's own alert box (one another stacked on top of each other)
Attempted Javascript:
var x = document.getElementById("ol-error-container").innerHTML
if (x == "")
{
document.getElementById("error-container").className +=" hide";
}
else
{
document.getElementById("error-container").className =" alert";
}
Html Form Code:
<form class="form-horizontal well" data-validate="parsley" method="post">
<div class="control-group">
<input type="text" class="input-xlarge" id="fullName" placeholder="Full Name" data-required="true" data-error-container="ol#ol-error-container li.error-message" data-error-message="Please provide your name!">
</div>
<div class="control-group">
<input type="text" class="input-xlarge" id="email" placeholder="E-mail Address" data-required="true" data-type="email" data-error-container="ol#ol-error-container li.error-message" data-error-message="You must provide a valid Email Address">
</div>
<div class="control-group">
<input type="text" class="input-xlarge" id="phoneNumber" placeholder="Phone Number" data-required="true" data-type="phone" data-error-container="ol#ol-error-container li.error-message" data-error-message="You must provide a valid US Phone Number">
</div>
<div class="control-group">
<textarea cols="5" class="input-xlarge" id="question" placeholder="Question/Comments" data-required="true" data-minlength="6" data-maxlength="200" data-error-container="ol#ol-error-container li.error-message" data-error-message="Please provide a message that is 6-200 characters in lenght."></textarea>
</div>
<div class="control-group">
<div class="input-append">
<input class="input-medium" id="priority" type="text" disabled>
<div class="btn-group" data-required="true">
<button class="btn dropdown-toggle" data-toggle="dropdown">Priority <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="selectPriority">
<li><a onclick="document.getElementById('priority').value='High'">High</a>
</li>
<li><a onclick="document.getElementById('priority').value='Normal'">Normal</a>
</li>
<li><a onclick="document.getElementById('priority').value='Low'">Low</a>
</li>
</ul>
</div>
</div>
</div>
<div class="control-group">
<button type="submit" class="btn btn-primary">Submit</button>
<input type="reset" class="btn" value="cancel">
<hr>
<p class="muted"><small>We will never sell or provide your information to anyone!</small>
</p>
</div>
HTML Alert Box Code:
<div class="alert" id="error-container">
<ol id="ol-error-container" style="list-style-type:none">
<li class="error-message" style="list-style-type:none"></li>
</ol>
it should be x == "" not x = ""