Getting HTML of dynamically generated code - javascript

I am using Bootstrap-Form-Builder to generate dynamic HTML forms. Here is an example. It's working just perfect.
Now I need to create a static page with the code rendered in the rendered tab. My problem is that I am unable to get the rendered code because it's made dynamically. I tried to get the data using jQuery, like this:
$(document).ready(function(){
$("#btn").click(function(){
alert($("#build").clone().html());
});
});
#btn is a button I added and #build is the id of a div where the form is dynamically generated. I was able to get the whole information including the setting HTML of the form. What I want is only the rendered area's HTML.
Here is the code that showed up when using alert($("#build").clone().html());:
<form id="target" class="form-horizontal">
<fieldset><div data-html="true" data-trigger="manual" data-title="Form Name" data-content="<form class='form'>
<div class='controls'>
<label class='control-label'> Form Name </label>
<input class='input-large field' data-type="input" type='text' name='name' id='name' value ='Form Name' />
<hr/>
<button id="save" class='btn btn-info'>Save</button><button id="cancel" class='btn btn-danger'>Cancel</button>
</div>
</form>
" class="component"><!-- Form Name -->
<legend>Form Name</legend>
</div></fieldset></form>
As you can see, it contains extra data not provided in the rendered area. Please ask me if something is not clear.

Related

serializeArray() does not work with dynamically loaded hidden fields

I have the following code which converts all field values of a form to a single object. However, it is not converting hidden fields that are dynamically loaded (but it would convert them if their values are hardcoded).
According to my research, serializeArray() should cover hidden fields as long as they have names. And mine do have names. So I can't figure out what's wrong here.
serializeArray():
var data = {};
$("#form1").serializeArray().forEach(function(x){
data[x.name] = x.value;
});
console.log(data);
Dynamic loading of hidden field values using JQuery
$("#field1").val("400"); //400 is just an example here
Form:
<form id="form1">
<!-- Not serialized -->
<input type="hidden" name="field-value.hidden.1" id="field1" value=""/>
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- Works fine -->
<textarea id="field2" name="field-value.show.1" rows="3" cols="10"></textarea>
</div>
</div>
</div>
</form>
Summary of issue:
serializeArray works if input looks like:
<input type="hidden" name="field-value.hidden.1" id="field1" value="400"/>
but not if it is:
<input type="hidden" name="field-value.hidden.1" id="field1" value=""/>
$("#field1").val("400");
One workout I just discovered from reading here:
(https://stackoverflow.com/a/25402639/4996722)
$("input[id=field1]").val("400"); would correctly put the value in there. However, this may be a JQuery bug as there is no good reason behind why $("#field1").val("400") does not work as they are the same thing.

making a div non refreshable in jsp (without using AJAX)

On my JSP page with multiple div tags, of which I want to make a particular div non refreshable so that it retains its value when the jsp submits a form to servlet.
I am loosing div data as soon as the form is submitted to upload files.
How to do this without using ajax?
I've searched a lot but only could find ways to make a div refreshable.
In my below JSP page code, the form myform is submitted to upload.java and is redirected back to this jsp page. Now, I don't want to loose the contents of box div.
My JSP page
<div id="box">${f1stat}<br>${f2stat}<br>${f3stat}</div>
<div style="position: absolute; right: -5%; top: 2%;">
<form method="post" name="myform" action="upload" enctype="multipart/form-data">
Left File : <input type="file" name="dataFile1" id="fileChooser1" />
Right File : <input type="file" name="dataFile2" id="fileChooser2" />
Config File :<input type="file" name="dataFile3" id="fileChooser3" />
Geco File : <input type="file" name="dataFile4" id="fileChooser4" />
<input type="hidden" id="myField" value="" />
<button type="button" id="execute" onclick="ValidateFile()">Click to Upload files</button>
<button type= "button" id="execute" onclick="saveTextAsFile()">Click to execute</button>
</form>
</div>
the box div is populated during execution by commands like
var err1 = document.getElementById("box");
err1.innerHTML = err1.innerHTML + "<br>" + "<span class='red'>Configuration file and Geco script should not be the same as left or right files. Please check your uploads</span>";
I am using the box div like a console display
Servlet redirecting by
RequestDispatcher rd = request.getRequestDispatcher("geco.jsp");
rd.forward(request, response);
What comes to mind is saving the data on first load into a session scoped variable, then checking if that variable has a value on subsequent loads before setting it. That way your value will be retained:
<c:if test="${empty test}">
<c:set var="test" value="${objectWithData}" scope="session" />
</c:if>
Then use the properties of the object saved in the var to display info in your div.

Dynamic links with JavaScript

this is my problem.I have a JSP. I want to create a hyperlink dynamically with Javascript. I want to add the text from an input in HTML and use it to pass it as a parameter in my URL:
<form name="test">
<P>Enter search: <input type="text" name="searchName"><BR><BR>
<input type="Button" Value="" onclick="location.href='search.jsp?typeOfSearch=" + JavaScriptFunction( that returns the String from searchName ) ' " >
</P>
</FORM>
I cant seem to add a JS function to the "onclick" string. I ve tried with HREF from an anchor but I cant make it work. And I ve also tried just putting a JS function like this:
<a href="MyJSfunction( that returns the entire URL ) " > hyperlink</a>
and also it does not work. I ve tried like a million diferent things and I still cant pass dynamic parameters from one JSP to another.
Any help would be very good! ...
No JavaScript required. Just set your form method and action, use a submit button, and rename your input field:
<form name="test" method="GET" action="search.jsp">
<p>
Enter search: <input type="text" name="typeOfSearch" /><br/><br/>
<input type="Submit" Value="Go" />
</p>
</form>
Edit: But, if you are just curious how to do it with JavaScript, form elements all have a form property. Form elements are accessible from the form by name. So, you can use this.form.searchName.value to get the value of the searchName field in the same form as your button:
<input type="Button" Value=""
onclick="location.href='search.jsp?typeOfSearch=' + this.form.searchName.value;" />
Edit: The trouble you are having with your current code may be because you have the quotes wrong. Change the double quote at the end of typeOfSearch=" to a single quote: typeOfSearch='. Remove the single quote following your function call:
<input type="Button" value=""
onclick="location.href='search.jsp?typeOfSearch=' + JavaScriptFunction()" />
If you aren't too concerned about security, a simple HTML form should work.
<form action="Your URL Here">
<input type="text" value="" name="search" />
<input type="submit" value="search" />
</form>
http://jsfiddle.net/harveyramer/VfuT4/

How do I post values obtained from an html form to an URL using javascript?

I'm new to html and JS and I have a form with a few fields that I need posted to a URL.
<form>
<div>
<label style="font-size:16px" for="title">Title:</label>
<input type="text" id="title" maxlength="128"/>
</div>
<div>
<label style="font-size:16px" for="description">Description:</label>
<textarea id="description" maxlength="1999"></textarea>
</div>
<div>
<label style="font-size:16px" for="idnumber">IDNumber:</label>
<input type="number" id="idnumber"/>
</div>
</form>
I need the values entered into this form to be posted to a URL that already knows how to process the input. I'm sure this is easy to do but I'm new and I'm having trouble finding a solution. Apologies for any incorrect terminology. Thanks!
You can use the action attribute:
<form action="some/url" method="post">
<!-- ... -->
<input type="submit" value="Submit" /> <!-- Submit button -->
</form>
You have to add an action to your form tag that points to a server side script.
<form action="myscript.php" method="post">
Alternatively, you can use JavaScript to post it as an AJAX request which submits the request without a page refresh.
I'd say you're on the right track. This would be perfectly easy using basic HTML: Add an action="mySubmitPage.php" to the form element. It sounds like you want to do it without refreshing/changing the page, though (at least, that's how it sounds by "with Javascript")
That will involve an "asynchronous" submit. The fancy term is "AJAX". That part can be a lot easier using some form of Javascript framework, especially if you want to support all browser quirks. Here's an example of doing it using JQuery, for instance:
jQuery - Send a form asynchronously

html form trying to http get when a button is pressed

Ive got a html form with a few select lists and a text box in it. I also have a submit button which is outside of the form. The reason for this is I want to construct the parameters myself, as I dont want the content of all of the select lists. The problem I am having is, that when I press my submit button,The form automaticly trys to redirect to the same page, but with a ? at the end with all the contents of the form. I am also having problems where window.location.href is not working inside the submit() javascript method, but I am not sure if this is caused by the form issue or not. Example code:
<form>
<input name="cName" type="text" class="input-xlarge" id="input01" placeholder=
"Enter title" />
<div class="control-group">
<hr />
<label class="control-label" for="select01">Select box 1</label>
<div class="controls">
<select id="select01" name="type" onChange="reportModification(this.value)">
<option>One</option>
</select>
</div>
</div>
</form>
<button class="btn btn-primary" onClick="next()">Next</button>
This is not the exact code from the page, just a replica.So it might not be valid html in some places. Thanks for the help :)
The reason you get parameters in the url is that a get request is used instead of a post request. you should use:
<form method="POST" action="">
Also why is your button outside the form? you could have this instead:
</div>
<input class="btn btn-primary" type="submit" value="Next" onClick="next()" />
</form>
I think your button has to be inside the form element. You could use an onsubmit in the form element to intercept the form before it gets sent to the server. Here you could manipulate the values before they go. You would also need an action attribute in the form. If your function returns true, the data will be submitted, false and it won't.

Categories

Resources