How can I display JSON cleanly formatted on a Blazor page?
Currently I display the JSON (parsedResult) in a textarea:
<div class="col-lg-12 noSidePadding" id="parser" data-bind="visible: ParserVisible">
<h3>Parser</h3>
<div>
<EditForm Model=#TLogMessageRequestDto>
<div class="form-group">
<label for="lblMessage">Message:</label>
<textarea class="form-control textAreaSize" id="source" #bind="inputMessage" rows="5"></textarea>
<input type="submit" id="upload" class="btn btn-primary" #onclick="OnParseClicked" value="Parse"/>
</div>
</EditForm>
</div>
<br />
<div>
<label for="results">Results:</label><br />
<textarea id="results" #bind="parsedResult"></textarea>
</div>
</div>
Output:
You can do it in this way
#using System.Text.Json
<pre>
#(JsonSerializer.Serialize(parsedResult, new JsonSerializerOptions() { WriteIndented = true }))
</pre>
Related
I found xhtml that looks like this:
<div class="mail_area">
<div class="mail">
<div class="mail_lef"></div>
<div class="mail_cen">
<form action="">
<input type="text" value="Enter your E-mail for instant
access..." name="Enter your E-mail" class="txtinput" onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue"/>
</form>
</div>
<div class="mail_rig"></div>
</div>
</div>
<div class="arrow_area">
<div class="left_arr"></div>
<div class="cen_but">
<span class="cen_text"><sup class="red">*</sup>We value your privacy and would never share your information.</span>
<form action="">
<input type="button" class="button" name="submit" align="middle"/>
</form>
</div>
<div class="rig_arr"></div>
</div>
In the first form I am going to add a method and an action.
It looks as though the second form was created this way so it could be lined up with other images.
So my question is, how can I setup the button in the second for to use the input information and get access to the action attribute of the first form?
Thanks for the help.
The easiest way to do this would be to turn this into one form instead of two. Otherwise you would have to use javascript.
<form action="">
<div class="mail_area">
<div class="mail">
<div class="mail_lef"></div>
<div class="mail_cen">
<input type="text" value="Enter your E-mail for instant access..." name="Enter your E-mail" class="txtinput" />
</form>
</div>
<div class="mail_rig"></div>
</div>
</div>
<div class="arrow_area">
<div class="left_arr"></div>
<div class="cen_but">
<span class="cen_text"><sup class="red">*</sup>We value your privacy and would never share your information.</span><br>
<input type="submit" class="button" name="submit" align="middle"/>
</div>
<div class="rig_arr"></div>
</div>
</form>
In order to override a <form> submitting data with the button you must:
A. Assign an id to the first form (in demo #form1)
B. Add the following attributes to the button:
Replace type="button" with type="submit"
Add formmethod="post" (or get)
Add formaction="https://httpbin.org/post" (The value is a live test server)
Add form="form1" (The value is the id of the targeted <form>)
Demo
This demo submits to a live test server, look for the form data in the JSON sent as the response to verify that it works
<div class="mail_area">
<div class="mail">
<div class="mail_lef"></div>
<div class="mail_cen">
<form id='form1' action="">
<input type="text" value="Enter your E-mail for instant access..." name="Enter your E-mail" class="txtinput" onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue" />
</form>
</div>
<div class="mail_rig"></div>
</div>
</div>
<div class="arrow_area">
<div class="left_arr"></div>
<div class="cen_but">
<span class="cen_text"><sup class="red">*</sup>We value your privacy and would never share your information.</span>
<form action="">
<input type="submit" class="button" name="submit" formmethod="post" formaction="https://httpbin.org/post" form="form1">
</form>
</div>
<div class="rig_arr"></div>
</div>
Hello I'm trying to build a HTML previewer: while editing HTML source in a textarea I want it to be previewd inside a container div:
Everything is working exept that in the browser console i get the following two type of errors:
TypeError: bindings.push is not a function
While writing new code in the text area I get a html validation error, I believe it comes from the ngSanitize module
How can I fix the first problem?
How can I catch the second error and display it out to the interface in order to alert the Editor?
Thanks for help.
This is made under a blade view (LRVL5), here's the code:
#extends('app')
#section('content')
<script>
var bindings = new Array();
'use strict';
angular.module('htmlEditor', ['ngSanitize'])
.controller('HTMLController', function() {
this.html = '{!! preg_replace("/\'/", "\\'", $html) !!}';
});
</script>
<div ng-app="htmlEditor" ng-controller="HTMLController as htmlctrl">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h3>Edit</h3>
</div>
<div class="col-md-6">
<h3>Preview</h3>
</div>
<div class="col-md-6">
<form>
<div class="form-group">
<label for="elementId">Id</label>
<input type="text" class="form-control" id="elementId" value="{{$id}}" >
</div>
<div class="form-group">
<label for="elementName">Name</label>
<input type="text" class="form-control" id="elementName" value="{{$name}}">
</div>
<div class="form-group">
<label for="elementHTML">HTML Body</label>
<textarea ng-model="htmlctrl.html" rows="20" class="form-control" id="elementHTML" placeholder="Email Html source for Body">{{$html}}</textarea>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<form>
</div>
<div class="col-md-6">
<div class="jumbotron" ng-bind-html="htmlctrl.html" >
</div>
</div>
</div>
</div>
</div>
#endsection
I have the following HTML code:
<section id="two" class="wrapper alt style2">
<section dir="rtl">
<center>
<h1> מילוי פרטים אישיים לתעודת אחריות</h1>
</center>
<br>
<!-->
<form method="post" action="#">
<!-->
<form id="frmcontainer6" method="post" enctype="application/x-www-form-urlencoded" action="https://web.mxradon.com/t/FormTracker.aspx" onsubmit="return lpContentGrabber('frmcontainer6');">
<!-->
<form action="mailto:graphics#emka.co.il" method="post">
<!-->
<div class="row uniform">
<div class="6u 12u$(xsmall)">
<input type="text" id="EfullName" name="EfullName" maxlength="100" value="" placeholder="שם מלא" autocomplete="off" />
</div>
<div class="6u$ 12u$(xsmall)">
<input type="email" name="email" id="email" value="" placeholder="Email" required />
</div>
<div class="6u 12u$(xsmall)">
<input type="text" name="PhoneNu" id="PhoneNu" value="" placeholder="מספר טלפון" required />
</div>
<div class="6u$ 12u$(xsmall)">
<input type="text" name="CAdress" id="CAdress" value="" placeholder="כתובת" required />
</div>
<br>
<div class="6u 12u$(xsmall)">
<input type="text" id="Pmodel" name="Pmodel" maxlength="100" value="" autocomplete="off">
</div>
<div class="6u$ 12u$(xsmall)">
<input type="text" name="SerialNu" value="SN12-8486-EF19-8541" id="SerialNu" readonly/>
</div>
<div class="12u$">
<textarea name="message" id="message" placeholder="הערות נוספות" rows="6"></textarea>
</div>
<div class="image center">
<input type="checkbox" id="demo-copy" name="demo-copy">
<label for="demo-copy">סמן לקבלת מבצעים והנחות למייל</label>
</div>
<div class="12u$">
<ul class="actions">
<center>
<li>
<input type="submit" value="שלח טופס" class="special" />
</li>
<li>
<button type="reset" value="Reset">נקה טופס</button>
</li>
</center>
</ul>
</div>
</div>
</form>
</section>
I'm trying to pre-fill the Pmodel value by URL using somthing like
www.ee.com?Pmodel=123456
but it doesn't work.
What am I doing wrong?
You're just inserting it as a URL parameter. In order to pre-fill the value you need to retrieve it from the URL and insert it as a value for the Pmodel element.
You can do this either on the server side (for example PHP, Java, depends on your server) or on client's side with JavaScript after the page loads.
For example (JavaScript) insert this script on the end of your page:
<script type="text/javascript">
//get all URL parameters
var parameters = window.location.search.substring(1).split("&");
var splitParam, value;
//cycle through them and find the correct one
for(var i=0; i<parameters.length; i++){
splitParam = parameters[i].split("=");
if(splitParam[0]=="Pmodel"){
//get its value
value = splitParam[1];
break;
}
}
if(value){
//set the input value
document.getElementById("Pmodel").value = value;
}
</script>
Example for filling: jsFiddle
I have a new login page which is not submitting. :(
If I click the button and the required fields are not entered, it fires me back the errors, but as soon as they're filled and I try to submit it does nothing.
The page is live at https://www.safewise.co.nz/trainwise/login
The code
<form action="login.php" method="post" name="logForm" id="logForm" class="styled_form">
<?php if(isset($redirectURL) && !empty($redirectURL)) { ?><input type="hidden" id="redirect" name="redirect" value="<?php echo $redirectURL; ?>" /><?php } ?>
<div>
<p id="login-title">Login</p>
<input name="userEmail" type="email" class="validate[required]" id="userEmail" placeholder="Email"<?php if(isset($enteredEmail) && !empty($enteredEmail)){echo ' value="'.$enteredEmail.'"';} ?> required /><span class="form_hint">Email Address</span>
<input name="userPwd" type="password" class="validate[required]" placeholder="Password" id="userPwd" required /><span class="form_hint">Password</span>
<div class="login-checkbox"><input type="checkbox" name="remember" id="remember" style="vertical-align:middle;" /> <label for="remember">Remember Me</label></div>
<p><input name="doLogin" type="submit" id="doLogin" value="Continue" class="form-button" /></p>
<div id="forgot"><p>Register</p><p>Forgotten Password?</p>
</div>
</form>
<div id="forgotPass" class="reveal-modal">
<div class="modal-header"><h3>Forgot Password</h3></div>
<div class="modal-body" style="text-align:center;">
<form action="login.php" method="post" name="forgotForm" id="forgotForm" >
<p style="margin-bottom:4px;"><em style="font-size:small;color:#3A3A3A">Enter your email address below to receive your new password.</em></p>
<p><input name="rstEmail" type="text" class="validate[required]" id="rstEmail" placeholder="john#example.com" size="25" /> <input name="doReset" type="submit" id="doReset" value="Reset" class="form-button" /></p>
</form>
</div>
<a class="close-reveal-modal">×</a>
</div>
The weird thing is as soon as I remove this code it works.
<div id="forgotPass" class="reveal-modal">
<div class="modal-header"><h3>Forgot Password</h3></div>
<div class="modal-body" style="text-align:center;">
<form action="login.php" method="post" name="forgotForm" id="forgotForm" >
<p style="margin-bottom:4px;"><em style="font-size:small;color:#3A3A3A">Enter your email address below to receive your new password.</em></p>
<p><input name="rstEmail" type="text" class="validate[required]" id="rstEmail" placeholder="john#example.com" size="25" /> <input name="doReset" type="submit" id="doReset" value="Reset" class="form-button" /></p>
</form>
</div>
<a class="close-reveal-modal">×</a>
</div>
Any suggestions?
Where is that div located in the page? It is incorrect to have a form inside a form. And so your code may work when you remove the div above because you've taken out the second form.
Consider having them as two separate entities instead of nested.
Are these forms nested? You cannot have nested forms. You can have multiple forms in a page, just as long they're not nested.
Here's some ref on it http://www.w3.org/MarkUp/html3/forms.html
I was missing a closing div
<div id="forgot">
<p>Register</p>
<p>Forgotten Password?</p>
Needs a closing div at end
<div id="forgot">
<p>Register</p>
<p>Forgotten Password?</p>
</div>
The view.html looks like this, what am I missing because of which the tables are populated with null values ?
<form class="form-inline form-fields" action="SubmitArticle" method="POST">
<fieldset>
<div class="control-group success">
<label class="control-label" for="input01"><a>Author Name</a></label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01" name="${article?.author}">
</div>
</div>
<div class="form-actions">
<button class="btn btn-success btn-large span2" type="submit" name="commit"> Submit </button>
</div>
<div class="control-group right-area success">
<label class="control-label" for="input01"><a>Abstract</a></label>
<div class="controls">
<textarea id="textarea" class="input-xlarge" rows="3" style="width: 498px; height: 283px;" name="${article?.abstract}"></textarea>
</div>
</div>
</fieldset>
</form>
and the action in my controller looks like this:
public static void SubmitArticle(String article_name, User author, String article_abstract) {
Article article = new Article(article_name, author, article_abstract);
article.save();
}
<input type="text" class="input-xlarge" id="input01" name="${article?.author}">
The name field is incorrect, the name field should be the same as the attribute it will be mapped to in your object. What you have set as ${article?.author} should be value. Read a little more on Form to Object binding.