Develop Reference

Submitting form without opening new window or tab

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.

Using Javascript to Post Form Search Results to 1 of 2 Locations (iframe on separate page)

I am trying to get 2 search forms to combine into 1 search form with radio buttons to determine where the search goes. The results will either post to the "Relevanssi" plugin for Wordpress results or to an iframe on another page in the Wordpress site.
I have worked with another programmer to get this far, but they are now stuck and I am lost. Any help would be appreciated.
This is the current code used that we have come up with and it works exactly how I want it to work except for 1 part.
Javascript:
<script>
function submitForm() {
if (document.searchForm.source.value == "website") {document.searchForm.action = "http://www.website.com/"
document.searchForm.target = "_self"
document.searchForm.s.value = document.searchForm.searchTerms.value
} else {
document.searchForm.action = "http://catalog.website.com/search"
document.searchForm.target = "catalog_search_iframe"
}
console.log('New action: ' + document.searchForm.action)
console.log('Values: ' + document.searchForm.s.value + ";" + document.searchForm.searchTerms.value)
document.searchForm.submit()
}
</script>
HTML:
<p>
<form name="searchForm" action="" method="post" target="">
<div class="form-field-label">
Search for:
</div>
<div class="form-field-field">
<input id="searchTerms" name="searchTerms" type="text" value="" />
<input id="s" name="s" type="hidden" value="" />
</div>
<div class="form-field-radio-inputs">
<input type="radio" name="source" value="website" checked="checked">Website<br>
<input type="radio" name="source" value="catalog">Catalog<br>
</div>
<div class="form-field-buttons">
<input type="button" onclick="submitForm();" name="buttonSearch" value='Search' />
</div>
</form>
<iframe style='width: 640px; height: 700px; border: 1px solid #000000;' name='catalog_search_iframe'></iframe>
</p>
The above code will take the search term and place it in the "Relevanssi" plugin for Wordpress results page if the "Website" radio is selected, and it will put the Catalog search results in the iframe on the current page if the "Catalog" radio is selected. All of this works perfectly.
But I would like to place the iframe on another page of the Wordpress site.
Is there a way to set this up in the javascript code above to direct the "Catalog" search results to the iframe on another page in the site?

display data sent from another html's input without server side

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]);

jQuery.find() a form into an element not working

dynamically i generate a formular into a defined div-container and i would like grab the send-action for sending with ajax.
The generate HTML:
<div class="mhuntform">
<form action="/wp-admin/admin-ajax.php" method="POST">
<h2>Title</h2>
<p>A text</p>
<div id="form" style="padding: 5px 0px;">
<p>
<label for="email" style="display: inline-block; margin-right: 10px;">E-Mail</label>
<input type="email" name="email" id="email" placeholder="E-Mail" style="width: 60%;">
</p>
<p>
<button name="mhskl_send" id="mhskl_send">Anmelden</button>
</p>
</div>
</form>
</div>
The Formular is defined by the admin into the wordpress-page. In Javascript (jQuery) i know only the classname of the div-container (here .mhuntform). So in Javascript i try to catch the event:
// mhuntskl.options.container = '.mhuntform'
$(mhuntskl.options.container).find('form').submit(function(ev){
ev.preventDefault();
var email = $(mhuntskl.options.container).find('input[type="email"]').val();
var res = $.ajax(mhuntskl.options.ajaxurl,{async:false,data:{action:'subscribe',email:email},dataType:'json',type:'POST'}).responseText;
res = $.parseJSON(res);
if (res.success) {
$(mhuntskl.options.container).hide();
}
return false;
}
But unfortunately the submit-event will not catch and if i prints the containter with find into the console console.log($(mhuntskl.options.container).find('form')) it will received an empty object only.
What i make wrong here?

If console.log($(mhuntskl.options.container).length); is 1 and console.log($(mhuntskl.options.container).find('form').length); is 0 then there is only one possible reason. Your form is still not inside the .mhuntform div when you execute the code. Is that form generated by another javascript. If not, then is the js code wrapped in $(document).ready.

E-mail form interactivity

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.