So I'm trying to submit a form using Ajax in order to prevent it from opening a new tab upon submition (Which gets very annoying when creating several images, since a new tab would be generated with every image)
This will submit the form, and function properly, however it will open a new tab.
// Submits form
$("#image-base-edit").submit();
However I tried #abc123 suggestion on this post and I modified his code to look like the snippet below, however by submitting it this way, the image isn't actaully created.
/* attach a submit handler to the form */
$("#image-base-edit").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $(this),
term1 = $form.find('input[name="id"]').val(),
term2 = $form.find('input[name="title"]').val(),
term3 = $form.find('input[name="image_file"]').val(),
url = $form.attr('action');
/* Send the data using post */
var posting = $.post(url, {
name: term1,
title: term2,
image_file: term3
});
/* Prints Done */
posting.done(function(data) {
console.log("done");
});
});
// Submits form
$("#image-base-edit").submit();
Here is the HTML form:
<!--Image Create FORM-->
<form name="edit_form" method="post" enctype="multipart/form-data" class="enableUnloadProtection enableAutoFocus enableFormTabbing enableUnlockProtection d-none" action="" id="image-base-edit" target="_blank">
<fieldset id="fieldset-default" class="formPanel" style="display: block;">
<legend id="fieldsetlegend-default" style="visibility: hidden; font-size: 0px; padding: 0px; height: 0px; width: 0px; line-height: 0;">Default</legend>
<input name="id" value="image.2018-05-10.9629264509" originalvalue="image.2018-05-10.9629264509" type="hidden">
<div class="field ArchetypesStringWidget kssattr-atfieldname-title" data-fieldname="title" data-uid="0fd3d162687e4bd8917bc9830d616043" id="archetypes-fieldname-title">
<input name="title" class="blurrable firstToFocus" id="title" value="" size="30" maxlength="255" placeholder="" type="text">
</div>
<div class="field ArchetypesImageWidget kssattr-atfieldname-image" data-fieldname="image" data-uid="0fd3d162687e4bd8917bc9830d616043" id="archetypes-fieldname-image">
<div id="appendInputhere">
</div>
</div>
</fieldset>
<div class="formControls">
<input name="form.submitted" value="1" originalvalue="1" type="hidden">
<input class="context" name="form.button.save" value="Save" type="submit">
</div>
</form>
And the content that gets appened into the "appendInputhere" looks like this.
<input size="30" name="image_file" id="image_file" type="file">
If there is an easier way to do this, that I may be overlooking please let me know. Basically I want the form to function the exact same way it currently does, other than opening a new tab, or loading a new page in the users window, I want the user to not have to see a change.
So while reading around more, and trying to find a way to do the original method I wrote about above, I learned that it is possible to set the target of a form to an iframe. So to solve my issue above, created this iframe...
<iframe name="formSubmitFrame" name="formSubmitFrame" tile="Holds Submitted form data" rel="nofollow" class="d-none"></iframe>
and had it set to not display anywhere. Then, I set the target of my iframe to "formSubmitFrame".
This ultimately achieved my goal of submitting a form without the user seeing any window or tab changes.
Related
I tried to get the string put in a form from one html (testinput) and when the form is validated, get it to redirect to another html (testoutput) with the data displayed only using js, but never works.
edit (rephrasing) : I created 2 html pages (testinput and testoutput) and in the testinput page, i put an input bar. When the user fills the form and press enter, i want it to redirect to the testoutput page, with what he filled in displayed
This is the method i found in another post but didnt work.
code in testinput :
<form method="get">
<input type="text" name="q">
</form>
code in testoutput :
<body>
<div id="here"></div>
</body>
code in js file :
var result = $("input[name=q]").val();
$("#here").text(result);
You can avoid the form to be submitted and afterwards validate the form to display the html in any given div
let my_form = document.querySelector('#my_form');
let output = document.querySelector('#output')
function showHTML(e){
e.preventDefault();
let html = my_form.querySelector('textarea').value;
output.innerHTML = html;
}
my_form.addEventListener('submit', showHTML);
#output {
border: 1px solid #d3d3d3;
min-height: 200px;
margin-top: 20px;
}
textarea {
width: 100%;
}
<form action="" id="my_form">
<textarea name="" id="" cols="30" rows="10"></textarea>
<input type="submit" value="Send">
</form>
<div id="output">
</div>
To get a submitted value, you can parse location's search parameter.
Example:
let q = location.search.match(/q=([^&])/);
if(q.length > 1)
$('#here').text(q[1]);
I've got a basic enquiry submission form that triggers an e-mail in the contact page of my website. I didn't want it to trigger a new page or a page refresh so I've got the form directing the action to an iframe and that's all working fine however I'm now trying to have an onSubmit (or onClick on the submit button) function that sets the contactform div to display:none; and the contactsubmitted to display:block;, however I am receiving the Uncaught ReferenceError: generateThankyou is not defined at HTMLFormElement.onsubmit error and I've tried tweaking things but nothing's helping. I've got other html triggers calling on js functions exactly like these ones that are working perfectly so I don't understand what I've done wrong. I've tried looking up similar questions to mine but as a beginner myself it doesn't seem to me like any of them are particularly applicable to my scenario (or at least I can't understand how to apply them to my own code unfortunately). I don't mean to repeat content, if anyone can direct me to a question that does answer this one I'll happily take this down.
HTML;
<div id="contactform">
<iframe name="submission" style="display:none;"></iframe>
<form action="advancedweb.php" method="post" target="submission" onSubmit="generateThankyou()">
<h3>
Name <br><input type="text" name="fname"><br>
e-mail <br><input type="text" name="email"><br><br>
Message
<br><textarea name="comment" id="comment" cols="45" rows="6"></textarea>
<label for="comment"></label>
<br>
<input type="submit" value="Send Message">
</h3>
</form>
</div>
<div id="contactsubmitted">
<h3>Thankyou, <?php echo $_POST["fname"]; ?></h3>
<br>
<p>
Your message,
<br>
<?php echo $_POST["comment"]; ?>,
has been sent on its way! We'll get back to you as soon as we can!
</p>
</div>
CSS;
#contactform {
float: right;
width: 400px;
height: 273px;
}
#contactsubmitted {
display: none;
float: right;
width: 400px;
height: 273px;
}
JS;
function messageComplete() {
var completedMessage = document.getElementById("contactform");
completedMessage.style.display = "none";
}
function messageResponse() {
var thankyouMessage = document.getElementById("contactsubmitted");
thankyouMessage.style.display = "block";
}
function generateThankyou() {
messageComplete();
messageResponse();
}
I'm not sure what the issue is - as I said, I've got other blocks of content that are correctly behaving using the exact same method.
I am trying to add an input field upon a button click, I am getting an exception as follows: .IllegalStateException: Neither BindingResult nor plain target object for bean name 'name' available as request attribute
I assume it is doing this as it can not guarantee that there is an object to bind the result to upon a submit? Is there any way around this? or is it not possible for me to load in a field dynamically?
This is my HTML, I am just playing with the concept at the moment so its the bare minimum
<input type="button" id="more_ingredients" onclick="add_ingredients();" value="add more">
<form:form commandName="newIngredients" id="form">
<div id="wrapper">
<form:input path="name"/>
<form:input path="amount"/>
<form:input path="unit"/>
<br>
<form:input path="name"/>
<form:input path="amount"/>
<form:input path="unit"/>
<br>
</div>
<form:button type="submit">Submit</form:button>
</form:form>
This is my JS
function add_ingredients() {
document.getElementById('form').innerHTML += '<form:input path="name /> <form:input path="amount"/> <form:input path="unit"/>';
//The exception is being triggered by the above line, if I remove the 'form:' tag, the error will disappear.
}
I can dynamically input a standard input field but then I can not assign a path to it for my controller.
Edit --
if I wrap the in a with the target object declared the error goes away like so:
<form:form commandName="newIngredients"> <form:input path="name" /> <form:input path="amount"/> <form:input path="unit"/></form:form>
This removes the error but the input inside the automatically generated inputs do not pass through to the controller.
I have solved this issue using the .clone() method, using a snippet I found here I have adapted it slightly to support the spring form tags, by simply changing the html being cloned.
HTML:
<form:form commandName="newIngredients">
<div id="dynamic_ingredients">
<a id="add-ingredient" href="#">Add Another Ingredient +</a>
<div class="ingredient_field">
<form:input path="name"/>
<form:input path="amount"/>
<form:input path="unit"/>
</div>
</div>
</form:form>
The jQuery :
$(document).ready(function(){
//the click function does not seem to be working in the example, so I have replaced it with this.
$(document).on('click', '.icon-delete', function(){
$(this).parent().remove();
});
//Keep a single clone of the original
var clonedField = $('.ingredient_field').clone(),
main = $('#dynamic_ingredients');
// Add in the delete <a>
$('<a>', {
text: 'Remove Step',
class: 'icon-delete',
href: '#'
}).appendTo(clonedField);
// Clone the cloned original and append it back to the list
$('#add-ingredient').click(function() {
main.append(clonedField.clone());
return false;
});
});
When I click on submit1 and then on submit2 everything is going well, but, when I press Enter Key on 1st input text I go to the second part
When I press Enter Key on the 2nd input text -> 1st JavaScript function executes which causes me trouble.
I don't want to disable Enter Key press, but that he executes the good submit input.
Is there a way to deactivate submit1 after he has been executed?
Or know from which input text Enter Key has been pressed?
HTML:
<div id="1">
<input type="text" placeholder="name"/>
</div>
<div id="2">
<input type="submit" value="submit" id="submit1"/>
</div>
<div id="3">
<input type="text" placeholder="firstname"/>
</div>
<div id="4">
<input type="submit" value="submit" id="submit2"/>
</div>
CSS:
#3, #4
{
display: none;
}
JavaScript:
$(document).ready(function() {
$("#submit1").click(function () {
/* Verify data with javascript and send it with Ajax */
/* if everything is ok display: */
document.querySelector("#2").style.display = "none";
document.querySelector("#3").style.display = "block";
document.querySelector("#4").style.display = "block";
});
$("#submit2").click(function () {
/* Verify data with javascript and send it with Ajax */
});
});
Unless I misunderstood the question - you are simply trying to make sure that the correct event handler gets called based on which button is selected by the user. This will work fine as long as the buttons have unique IDs which they do - and you can associate them with the correct event handler (which it seems like you are doing in the shared code).
Also, you can disable any button using the disabled attribute (set it to true).
to disable
document.getElementById("submit1").disabled = true;
to enable:
document.getElementById("submit1").disabled = false;
From what I can tell your biggest problem here is that you seem to have two submit buttons in a single form tag. I would seriously recommend against this as it can cause issues like the one you are experiencing. Instead I would change both to buttons and add the submit functionality to JavaScript methods as you are kind of doing now.
Obviously though you would want to link the text boxes to a button then and for that I would take a look at this SO question How to trigger HTML button when you press Enter in textbox?
<input type="submit"> is a special control. It will cause the form to submit if the form has focus and the enter button is pressed. When using this you should make use of event.preventDefault() to cancel that behavior when binding to the click event. I suggest using <button type="button"><button> instead.
If you press ENTER on submit1, submit2 will not be selected unless you hit TAB. Are you doing this?
Anyway, you can do this:
$("#submit1").click(function () {
/* Verify data with javascript and send it with Ajax */
/* if everything is ok display: */
$("#submit2").focus(); // This will automatically focus the user on the second submit button //
});
This will force the user, the next time he hits ENTER, to submit the submit2 button.
But don't use .submit()... you should use the .submit() function instead of .click(), because I believe .click() only checks for mouse clicks?
$("#submit1").submit(function(){
/* Blah blah blah... */
$("#submit2").focus(); // This will automatically focus the user on the second submit button //
});
$("#submit2").submit(function(){
/* ... */
});
As other users have said, are submit1 and submit2 in the same <form> tag:
Yes, they were. But you shouldn't have 2 fields in the same <form> tag if you want to submit the data separately.
Do this:
HTML
<form>
<div id="1">
<input type="text" placeholder="name"/>
</div>
<div id="2">
<input type="submit" value="submit" id="submit1"/>
</div>
</form>
<form>
<div id="3">
<input type="text" placeholder="firstname"/>
</div>
<div id="4">
<input type="submit" value="submit" id="submit2"/>
</div>
</form>
JQuery
$("#submit1").submit(function(e){
/* Blah blah blah... */
e.preventDefault(); // Keeps the user on the same page //
});
$("#submit2").submit(function(e){
/* ... */
e.preventDefault(); // Keeps the user on the same page //
});
I let it work like that:
Why should I have troubles with one form? IE < 6?
HTML:
<form>
<div id="1">
<input type="text" id="text1"/>
</div>
<div id="2">
<input type="submit" value="submit" id="submit1"/>
</div>
<div id="3">
<input type="text" id="text2"/>
</div>
<div id="4">
<input type="submit" value="submit" id="submit2"/>
</div>
</form>
CSS:
#3, #4
{
display: none;
}
JAVASCRIPT:
$(document).ready(function() {
$('#text2').keypress(function(e){
if(e.keyCode==13)
$('#submit2').click();
});
$("#submit1").click(function () {
/* Verify data with javascript and send it with Ajax */
/* if everything is ok display: */
document.querySelector("#2").style.display = "none";
document.querySelector("#3").style.display = "block";
document.querySelector("#4").style.display = "block";
document.querySelector("#submit1").disabled = true;
});
$("#submit2").click(function () {
/* Verify data with javascript and send it with Ajax */
});
});
I'm a web development student and I need some help. I have the code below; How do I make it work only when the form is submitted and not the text field is clicked. I also would like it to get and insert the textField's value in the .thanks Div. Please help me learn.
<script type="text/javascript">
$(document).ready(function(){
$(".quote").click(function(){
$(this).fadeOut(5000);
$(".thanks").fadeIn(6000);
var name = $("#name").val();
$("input").val(text);
});
});
</script>
<style type="text/css">
<!--
.thanks {
display: none;
}
-->
</style>
</head>
<body>
<form action="" method="get" id="quote" class="quote">
<p>
<label>
<input type="text" name="name" id="name" />
</label>
</p>
<p>
<label>
<input type="submit" name="button" id="button" value="Submit" />
</label>
</p>
</form>
<div class="thanks"> $("#name").val(); Thanks for contacting us, we'll get back to you as soon as posible</div><!-- End thanks -->
This is a bit rough and ready but should get you going
$(document).ready(function(){
$("#submitbutton").click(function(){
//fade out the form - provide callback function so fadein occurs once fadeout has finished
$("#theForm").fadeOut(500, function () {
//set the text of the thanks div
$("#thanks").text("Thanks for contacting us " + $("#name").val());
//fade in the new div
$("#thanks").fadeIn(600);
});
});
});
and I changed the html a bit:
<div id="theForm">
<form action="" method="get" id="quote" class="quote">
<p>
<label>
<input type="text" name="name" id="name" />
</label>
</p>
<p>
<label>
<input type="button" name="submitbutton" id="submitbutton" value="Submit" />
</label>
</p>
</form>
</div>
<div id="thanks">Thanks for contacting us, we'll get back to you as soon as posible</div><!-- End thanks -->
There are several things at issue here:
By using $('.quote').click(), you're setting a handler on any click event on any element contained within the <form>. If you want to catch only submit events, you should either set a click handler on the submit button:
// BTW, don't use an id like "button" - it'll cause confusion sooner or later
$('#button').click(function() {
// do stuff
return false; // this will keep the form from actually submitting to the server,
// which would cause a page reload and kill the rest of your JS
});
or, preferably, a submit handler on the form:
// reference by id - it's faster and won't accidentally find multiple elements
$('#quote').submit(function() {
// do stuff
return false; // as above
});
Submit handlers are better because they catch other ways of submitting a form, e.g. hitting Enter in a text input.
Also, in your hidden <div>, you're putting in Javascript in plain text, not in a <script> tag, so that's just going to be visible on the screen. You probably want a placeholder element you can reference:
<div class="thanks">Thanks for contacting us <span id="nameholder"></span>, we'll get back to you as soon as possible</div>
Then you can stick the name into the placeholder:
var name = $("#name").val();
$('#nameholder').html(name);
I don't know what you're trying to do with the line $("input").val(text); - text isn't defined here, so this doesn't really make any sense.