I am trying to duplicate a form after it has been filled out. So the user fills out the form then hits submit. then a new window opens with the full html form, images, and styling included AND the values so they can print the filled out version. i tried .html() and .clone(). but neither seem to work.
any help is much apperciated. and please don't hesitate to ask questions.
Edit: Post your code for creating the popup.
You may need to use val() to copy the values over.
http://jsfiddle.net/Na6GN/2/
$('#myForm :input').each(function() {
$(this).clone().appendTo('#newForm').val($(this).val());
});
Its working fine:
JS:
$('btnclone').click(function() {
var mywindow = window.open();
$(mywindow.document.body).append($('form').eq(0).clone());
});
Html Code
<form>
<input name='test' />
</form>
<input type="button" value="Clone" name="btnclone" id="btnclone" />
Related
I am trying to submit this for without using a submit button. Here I have used javascript and once the form has submitted user should be directed to the B.php.
html code
<form id="jsform" action="B.php" method="POST" target="_blank">
<input type="hidden" value="test" name="title"/>
</form>
java-script code
<script type="text/javascript">
document.getElementById('jsform').submit();
</script>
These 2 code lines run separately but not running together. Any mistakes have I done.
In javascript you can do this:
window.onload=function() {
document.getElementById("jsform").submit(); // using ID
}
And with jQuery
$(function() {
$("#jsform").submit(); // using ID
});
I write my comment as an actual answer this time.
Drop target="_blank" and it should work just fine. Otherwise your browser might see it as a popup.
Also make sure your JS is run after your form.
Use form name to submit
document.myform.submit();
Hello Guys i was trying dynamic addition of text box and other controls in Classic ASP through JavaScript but encountered some problem up there.
Though i was able to add new textboxes but was no able to retain their data.
Eg : If i have a button and on click i want to add textboxes to the html page on first click a textbox is added and i enter data in that textbox like STACKOVERFLOW but when again i hit button new textbox2 is also added but textbox1 data goes away.
I changed my ASP code for simple HTML so that it will be easy. Here is the code.
<!DOCTYPE html>
<html>
<body>
<div id ='div1' style="margin-bottom:6px;"></div>
<button onclick="myFunction()">Change link</button>
<script>
function myFunction() {
var p_strContents = '<input name="cust_name_0" id="cust_name_0" value="" type="text" size="0" class="FormTextField" maxlength="6" title="">';
document.getElementById('div1').innerHTML = document.getElementById('div1').innerHTML + p_strContents ;
//document.getElementById('div1').appendChild(p_strContents);
}
</script>
</body>
</html>
I tried using even appendchild but it will throw some error.
If you want to try it directly online use this link and just paste my code will be easy for u guys to check.
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_elmnt_innerhtml
I am using JavaScript.
Could you guys help me. Regards...
Please check with this:
function myFunction() {
var textBx = document.createElement('input');
textBx.setAttribute('type', 'textbox');
textBx.setAttribute('class', 'FormTextField');
textBx.setAttribute('maxlength', '6');
document.getElementById('div1').appendChild(textBx);
textBx = null;
}
Please check working code here
I have a 'parent' page that is using the following bit of code to pull in a form from a different page on the same domain. There are reasons why I can't just place the form directly on the 'parent'.
<script type="text/javascript">
jQuery("#ai_temp_profile_edit").load(
"https://example.com/form/ #profile-edit-form",
function() {}
).hide().fadeIn(1000);
</script>
The form that is pulled in looks like this:
<form action="https://example.com/form/" method="post" id="profile-edit-form" class="standard-form base" target="hiddenFrame">
<label for="field_1">Name</label>
<input id="field_1" name="field_1" type="text" value="Joey-Jojo Jr. Shabadoo">
<input type="submit" name="profile-group-edit-submit" id="profile-group-edit-submit" value="Save Changes " />
<input type="hidden" name="field_ids" id="field_ids" value="1" />
<input type="hidden" id="_wpnonce" name="_wpnonce" value="a62f8d5fec" />
<input type="hidden" name="_wp_http_referer" value="/form/" />
</form>
When 'submit' is clicked, https://example.com/form/ is opened in a hidden iframe and the user name gets properly saved. This all works well.
I would like the user name on the currently loaded 'parent' page to update via jquery, so that the user has some immediate visual feedback that the name change has taken place.
My approach has been to try and take the value out of the 'field_1' input when 'submit' has been clicked, and pass that variable onto a div in the parent page with an id of 'display_name'.
$(document).ready(function(){
function nameUpdate(){
$("#profile-group-edit-submit").click(function () {
var updateName = $("#field_1").val();
$("#display_name").text(updateName);
});
}
nameUpdate();
});
I've also tried adding window.parent.
before the the #display_name selector section and it didn't change anything.
I've used this approach on another button/div combo on the same page and it works, the difference is that that particular button is in an iframe, not loaded by jquery. So I'm guessing my problem is related to that fact.
I've googled around, but have run out of ideas of how to phrase my question, what to look for, etc...
Any help would be greatly appreciated. Thanks!
Edit: For clarity, the div w/ id #display_name won't update.
Use jquery to handle the form submission.
$(document).ready(function(){
$('#profile-edit-form').submit(function(){
var updateName = $("#field_1").val();
$("#display_name").text(updateName);
});
});
EDIT:
Due to your loading the form dynamically you need to bind the submit function after the load. So...
$(document).ready(function () {
var formLoaded = function () {
$('#profile-edit-form').submit(function () {
var updateName = $("#field_1").val();
$("#display_name").text(updateName);
});
};
$("#ai_temp_profile_edit").load(
"https://example.com/form/ #profile-edit-form",
formLoaded
).hide().fadeIn(1000);
});
If I am understanding it correctly, your problem is "display_name" field is not getting updated with the latest value.
If this is the problem then can you try below thing?
Instead of
$("#display_name").text(updateName);
try using-
$("#display_name").val(updateName);
As per the documentation on jQuery site Val() works well with form Elements whereas text won't.
More on Val() method- https://api.jquery.com/val/#val2
got a problem and cant find the solution.
I am writing a chat. When a new user opens my site (a new session) a div popes out and the user is asked to fill in his name.
The form works fine when I use an input submit. I want it to work without the submit button, I want it to work when i press a div.
here is my code
html:
<form name="form" id="form" action="index.html" method="post">
<span id="nspan">First name:</span> <input type="text" id="firstname" name="name">
<div name="enter" id="enter">Submit</div>
</form>
the jquery:
$(document).ready(function(){
$("#enter").click(function () {
$("#form").submit();
});
});
nevermind is correct - no problem with that code.
Here's the JSFiddle to prove it: http://jsfiddle.net/8Xk7z/
Maybe you problem is that the id "form" is to general a name, and you already used it for another form.
Another thing, why not use a button or a link? You can style it like you want. Be careful when you use thing for what they are not suppose to be used for, it my give unexpected side effects.
In your case, you may only be able to login to you chat using a mouse, that would exclude blind people. You would also not be able to use the tabulater to get to the login "button". And last, if you are blind and uses a screen reader your would actually not know that there is at login "button", as the reader would not recognize the div as something you can click.
I would recomend using the button-tag like this
<button id="enter">Submit</button>
Or the a-tag like this
<a href id="enter">Submit</a>
If you don't like the predefined styling of them you may always override the styling.
try to define jquery at top of the page
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
Then put your script at next.
still issue.
Please check your other function on same page works fine or not.
I am inexperienced so sorry if this is a dumb question but I'm looking around and I haven't found an answer that works for me. I am using JavaScript and I have an html form with one text input. When someone enters a value for that input and submits the form I want to return to the same HTML page but with what they entered displayed elsewhere on the page. Here is my form:
<form name="chatInput" action="index.html" method="get">
chat:<input type="text" name="chat"/>
</form>
I saw something about having:
var chatText = document.forms[0].elements[0];
But when I try to use this I get [object HTMLInputElement]
Also I would only want to create that variable if the form has been entered once already but not initially. How would I check for this?
Thanks for any info.
var chatText = document.forms[0]['chat'].value;
http://jsfiddle.net/XLeAn/
If you don't want to re-update the html, I'd recommend not using the form tag.
Instead, I'd create a button with the onclick attribute.
<input type="button" value="Update" onclick="someFunction()">
Then in the JS portion, have something like this.
var someFunction = function(){
var chatText = document.getElementById("this-is-the-element-I-want").value;
}
Of course, make sure that the element you are trying to retrieve info from has an id.
<input type="text" name="chat" id="this-is-the-element-I-want">
EDIT: Code indents and clarity
Try this:
var chatText = document.forms[0].elements[0].value;