onsubmit Function Issues - javascript

As I have almost no knowledge of HTML and I had no idea where to ask, I decided to come here. I am trying to edit HTML Weebly web editor generated and add a "contact us" form which will direct messages to my email. I found some source code on the web and tried to incorporate it with the form Weebly generated for me, however I have not had any success. My code is below:
<div>
<form enctype="multipart/form-data" name="contactform" method="post" action="" onsubmit="myFunction()">
<div id="466589977852666939-form-parent" class="wsite-form-container" style="margin-top:10px;">
<ul class="formlist" id="466589977852666939-form-list">
<h2 class="wsite-content-title" style="text-align:left;">SEND US AN EMAIL</h2>
<div><div class="wsite-form-field" style="margin:5px 0px 5px 0px;">
<label class="wsite-form-label" for="Email_Address">Email <span class="form-required">*</span></label>
<div class="wsite-form-input-container">
<input id="Email_Address" class="wsite-form-input wsite-input wsite-input-width-370px" type="text" name="Email_Address" maxlength="100" />
</div>
<div id="instructions-270584481949385592" class="wsite-form-instructions" style="display:none;"></div>
</div></div>
<div><div class="wsite-form-field" style="margin:5px 0px 5px 0px;">
<label class="wsite-form-label" for="Your_Message">Your Message <span class="form-required">*</span></label>
<div class="wsite-form-input-container">
<textarea id="Your_Message" class="wsite-form-input wsite-input wsite-input-width-370px" name="Your_Message" style="height: 200px"></textarea>
</div>
<div id="instructions-137987539423347553" class="wsite-form-instructions" style="display:none;"></div>
</div></div>
</ul>
</div>
<div style="text-align:left; margin-top:10px; margin-bottom:10px;">
<input type='submit' style='position:absolute;top:0;left:-9999px;width:1px;height:1px' /><a class='wsite-button' ><span class='wsite-button-inner'>Submit</span></a>
</div>
</form>
<script>
function myFunction() {
alert("The form was submitted");
}
</script>
</div>
It obviously has something to do with the button click not being registered, so I made my own much simpler form to test it out.
<form name="contactform" method="post" action="" onsubmit="myFunction()">
<table width="400px" class="contactform">
<tr>
<td valign="top">
<label for="Email_Address" class="required">Email Address<span class="required_star"> * </span></label>
</td>
<td valign="top">
<input type="text" name="Email_Address" id="Email_Address" maxlength="100" style="width:230px">
</td>
</tr>
<tr>
<td valign="top">
<label for="Your_Message" class="required">Your Message<span class="required_star"> * </span></label>
</td>
<td valign="top">
<textarea style="width:230px;height:160px" name="Your_Message" id="Your_Message" maxlength="2000"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center" >
<br /><br />
<input type="submit" value=" Submit Form " style="width:200px;height:40px">
<br /><br />
</td>
</tr>
</table>
</form>
<script>
function myFunction() {
alert("The form was submitted");
}
</script>
And in this case, the function actually fired! So now I am unsure as to what the difference is between my first example, and my second much simpler piece of code. Could anyone help me out?

You could add an onclick() to the submit <a> tag to submit the form.
Like so, change...
<a class='wsite-button' ><span class='wsite-button-inner'>Submit</span></a>
To...
<a class="wsite-button" onclick="document.contactform.submit(); return false;"><span class="wsite-button-inner">Submit</span></a>

This is because in your simplified example you used a Submit button.
Where as in you original form the button is moved out of the screen using CSS and only the text 'Submit' is left there. And your function triggers when the input is clicked, not the text.
This is the CSS style attributes that are hiding the button:
position: absolute;
top: 0;
left: -9999px;
width: 1px;
height: 1px;
Replace this:
<input type="submit" style="position:absolute;top:0;left:-9999px;width:1px;height:1px">
By this:
<input type="submit" />
The button will reappear and clicking on it will trigger your message box.
Here is the JSFiddle demo

Related

How to close only current popup in Javascript and Jquery?

I have a form as a popup and I want to add a cancel button to close current popup. I tried many ways to do it but it is not closing
<form id="overlay_form_uploadGenFile" action="/crm/saveGeneralFile" method="POST" class="overlay_form" style="display:none" enctype="multipart/form-data">
<h1 style="font-size: 2em">Edit uploaded file</h1>
<input type="hidden" name="fileId" value="0"/>
<input type="hidden" name="userId" value="{{userId}}"/>
<span>Category:</span><span id="file-filter-by">Filter by:</span> <select name="fileCategoryTagId" onchange="populatePopupCategories(this);"></select>
<div id="file-category-select"><select name="fileCategoryId" onchange="getShareWithIntegrationServicesForPopup(this.options[this.selectedIndex].value);"></select></div><br/>
Current File: <input type="text" name="filename" class="currentFile"/> (change it to rename the file)<br/><br/>
To replace <input type="file" name="fileData" class="replaceFile" /><br/><br/>
<input type="checkbox" name="editableByHR" class="editableHR"/> Editable by HR
<input type="checkbox" name="sharedWithEmployee" /> Shared With Employee <br/>
Notes <textarea name="notes" class="fileUpdateNotes"></textarea><br/><br/>
<br/>
<div class="integrationServicesContainerHolder">
</div>
<br/>
<div style="display: inline-block;width: 100%">
<div align="left" style="float: left">
<input type="submit" value="Save" align="left" class="submitFileUpdateButton"/>
<input type="button" value="Cancel" onclick="closeFunction" align="left" class="submitFileUpdateButton"/>
</div>
<div align="right" style="float: right">
<input type="submit" value="Delete" align="right" class="submitFileUpdateButton"/>
</div>
</div>
</form>
and the function side is
function closeFunction() {
$('#overlay_form_uploadGenFile').hide();
}
I have tried .dialog('hide') and .modal('hide') as well but still not working. If I try self.closeAll then it is closing all tab. How can I close only this form dialog popup ?
edit: ok I put $('#overlay_form_uploadGenFile').fadeOut(100); and problem is solved almost... I need immediate close because fadeOut is blocking me for calling other functions due to asynchronous calls.
My suggestion would be to use the break function. That will exit the current loop.

Uncaught TypeError: Cannot read property 'element' of undefined when submitting form

I have an HTML div output using PHP which when "Submit" is clicked, it should submit the form and fire a JS function. When submitted, the JS console in Chrome gives me the following error:
Uncaught TypeError: Cannot read property 'element' of undefined
My HTML (wrapped in a PHP heredoc)
<div id="tab5" class="tab">
<div id="reopen_case_form">
This Case has been previously closed by Workbooks Support. You can re-open this ticket at any time by providing a reason why you'd like to do so and clicking "Re-open Case".
<table class="update_case">
<tr><td style="padding: 10px">Summary:<input id="name" name="name" type="text" size="80" maxlength="255" class="required"/></td></tr>
<tr><td><textarea id="description" name="description" cols="255" rows="50"></textarea></td></tr>
<tr>
<td colspan="2" style="padding-top: 10px;">
<input type="file" class="file" name="file1" id="file1" style="display: inline">
<input type="file" class="file" name="file2" id="file2" style="display: inline">
<input type="file" class="file" name="file3" id="file3" style="display: inline">
</td></tr>
</table>
<p><button type="submit" onclick="on_reopen_case()" style="float:left; margin-top: 10px; margin-bottom: 10px;" value="reopen_case" id="reopen_case" name="reopen_case" class="quietbutton">Re-open Case</button></p>
</div>
</div>
My Javascript:
<script type="text/javascript">
function on_reopen_case() {
if (!$("#reopen_case_form").valid()){ return false; }
$('#reopen_case').attr('disabled', 'disabled');
$('#reopen_case').text('Re-opening case. Please wait...');
document.body.style.cursor = "progress";
$("#function").val("reopen_case");
fade();
$("#reopen_case_form").submit();
};
</script>
The form appears to submit but doesn't change the the button text to "Re-opening case" and it doesn't set #function to the specified value either.
Annoyingly I've used similar else where and this works:
<div id="tab3" class="tab">
<div id="update_case_form">
Provide a summary and detailed description of your update below, including screenshots where applicable. Click "Update Case" to submit your update to the Workbooks Support team.
<table class="update_case">
<tr><td style="padding: 10px">Summary:<input id="name" name="name" type="text" size="80" maxlength="255" class="required"/></td></tr>
<tr><td><textarea id="description" name="description" cols="255" rows="50"></textarea></td></tr>
<tr>
<td colspan="2" style="padding-top: 10px;">
<input type="file" class="file" name="file1" id="file1" style="display: inline">
<input type="file" class="file" name="file2" id="file2" style="display: inline">
<input type="file" class="file" name="file3" id="file3" style="display: inline">
</td></tr>
</table>
<p><button type="submit" onclick="on_create_activity()" style="float:left; margin-top: 10px; margin-bottom: 10px;" value="create_activity" id="create_activity" name="create_activity" class="quietbutton">Update Case</button></p>
</div>
</div>
Javascript
<script type="text/javascript">
function on_create_activity() {
if (!$("#update_case_form").valid()){ return false; }
$('#create_activity').attr('disabled', 'disabled');
$('#create_activity').text('Updating case. Please wait...');
document.body.style.cursor = "progress";
$("#function").val("create_activity");
fade();
$("#update_case_form").submit();
};
</script>
I can't figure this out for the life of me where I'm going wrong! Help....
I think I may have figured this out... I was using nested forms which is apparently not allowed... Cannot Read Property 'Elements' of Undefined - in JS Console
Thanks for the suggestions guys :)

jquery run away submit button

I see a lot of code for run away buttons (like this one: Make a run away button in jQuery
but they only work with the <button> tag.
Below is a part of the form code I'm using. I want to have a run away submit button that works with <input type="submit">. Is that possible? And how to do this?
<div id="FSContact3" style="max-width:600px;margin:0 auto;background-color:none;padding: 5px 0 10px 5px;">
<form action="http://www.example.com/form" id="fscf_form3" onkeypress="return event.keyCode != 13;" method="post">
<div id="fscf_div_clear3_0" style="clear:both;">
<div id="fscf_div_field3_0" style="clear:left; float:left; width:99%; max-width:550px; margin-right:10px;">
<div style="text-align:left; padding-top:5px;">
<label style="text-align:left;" for="fscf_name3">Name:<span style="text-align:left;">*</span></label>
</div>
<div style="text-align:left;">
<input style="text-align:left; margin:0;" type="text" id="fscf_name3" name="full_name" value="" />
</div>
</div>
</div>
<div id="fscf_submit_div3" style="text-align:left; padding-top:2px;">
<input type="submit" id="fscf_submit3" style="cursor:pointer; margin:0;" value="Submit" onclick="this.disabled=true; this.value='Submitting...'; this.form.submit();" />
</div>
</form>
</div>
$( "#fscf_submit_div3" ).mouseover(function() {
var numRand = Math.floor(Math.random()*501);
$( "#fscf_submit3" ).css({'top': numRand, 'left': numRand, 'position':'fixed'});
});
You meant something like that probably? You can make it change it position a bit more by changing number next to Math random.
https://jsfiddle.net/n3z1h647/1/

Hide form on submit - Django 1.6

I have this form on my Django 1.6 project:
<form action="/proyecto/" method="POST" id="myform">
{% csrf_token %}
<table>
<span class="Separador_Modulo"></span>
<span class="Sub-Titulo-Aplicacion">SiatPre</span>
<tr>
<td >Usuario: {{user}}</td>
</tr>
<tr><td>
<span class="Sub-Titulo-Aplicacion">Tipo de Proyecto: </span>
<input class="check-style" type="checkbox" name="curva" value="checkbox" >Petroleo</input>
</td></tr>
<tr><td>
<input class="check-style" type="checkbox" name="curva" value="checkbox" >Gas</input>
</td></tr>
<tr><td>
<span class="Sub-Titulo-Aplicacion">Proyecto: </span>
<input class="check-style" type="checkbox" name="tipo" value="checkbox" >Nuevo</input>
</td></tr>
<tr><td>
<input class="check-style" type="checkbox" name="tipo" value="checkbox" >Existente</input>
</td></tr>
<tr><td>
<div class="Contenedor-Elemento-Formulario">
<span class="Sub-Titulo-Formulario"> Nombre Proyecto:</span>
<input type="text" class="input-style" name="nombre_proyecto" style="width:96px;"/>
</div>
</td> </tr>
<td><div >
<div class="Principio-Boton"> </div>
<input name="Aceptar" class="Boton" type="submit" value="Aceptar" onclick="myclick()"/>
<div class="Final-Boton"></div>
<div class="Principio-Boton"> </div>
<input name="Cancelar" class="Boton" type="submit" value="Cancelar" />
<div class="Final-Boton"> </div>
</div></td>
</tr>
</table>
<table style="margin-bottom:45px; padding:15px 15px 15px 15px;">
<div> </div>
<div> </div>
<tr>
<td colspan="4" align="center">
<div class="Principio-Boton"> </div>
<input name="Datos" class="Boton" type="submit" value="Datos"/>
<div class="Final-Boton"></div></td></tr>
<tr>
<td colspan="4" align="center">
<div class="Principio-Boton"> </div>
<input name="Procesamiento" class="Boton" type="submit" value="Procesamiento"/>
<div class="Final-Boton"></div></td></tr>
<tr>
<td colspan="4" align="center">
<div class="Principio-Boton"> </div>
<input name="Reporte" class="Boton" type="submit" value="Reporte"/>
<div class="Final-Boton"></div></td></tr>
</table>
</form>
This code is on my base.html file, however, this form is obviously inherited on other templates by block content tag.
I need to hide specifically this form from other pages when user clicks <input name="Aceptar" class="Boton" type="submit" value="Aceptar" onclick="myclick()"/> not there is an onclick function I declared earlier on this html, the function being like this:
<script>function myclick() {$('#myform').hide().fadeOut(2000); }
</script>
And on <form action="/proyecto/" method="POST" id="myform"> I reference the function by using an id (id="myform"), however, when I click on Aceptar, it does some hiding for a second or so, then when it loads a new template, by POST request to server, I still see this form there, no matter what.
Is this the correct way to achieve what I'm looking for? Or maybe it has to do with POST requests to server?
Any ideas?
Thanks in advance!
You have to pass a variable from views.py a = True when you need to display the form, and do the if condition in template,
{% if a %}
<form action="/proyecto/" method="POST" id="myform">
................
</form>
{% endif %}

Onclick with facebox not working in IE8

I'm working on a website that includes Facebox to load content for a basket process.
When adding something to the basket and clicking the green wishlist button I'm having trouble with it loading in IE8, it works on all the modern browsers. Can anyone see why it won't load content in IE8 in the facebox?
I'm using this code on the wishlist button:
<div onclick="location.href='wishlist.php?basket=true'" rel="msgbox" id="mybasket">
Is it enough info to view source on the link to the site? If you need any more code then please ask.
On a Mac using Chrome - as you can see the facebox has opened fine when clicking on the green wishlist button.
On a PC using IE8 - when clicking on the green wishlist button the facebox opens but doesn't load the content.
This is a problem with the returned data, You have an extra </div> at the end.
<div id="msgbox_title">Your Wish List<div id="closeme" onclick="jQuery(document).trigger('close.facebox')">x</div></div>
<form method="post" action="wishlist.php">
<div id="msgbox_body" style="max-height:400px;min-height:100px;overflow-y:auto;overflow-x:hidden;">
<input type="hidden" name="updatebasket" value="1" />
<table border="0" cellpadding="0" cellspacing="5" align="center" style="min-width:390px;border-collapse:separate!IMPORTANT;">
<tr><td colspan="5" style="text-align: left;"><strong style="font-size:14px;">Rotunda Vulsellum Forceps</strong></td></tr> <tr>
<td style="width: 50px;"><span style="color: #aaa;">Quote:</span></td>
<td style="width: 50px;"><span style="color: #aaa;">Sample:</span></td>
<td style="width: 350px;"><span style="color: #aaa;">Description:</span></td>
<td style="width: 80px;"><span style="color: #aaa;">Pack size:</span></td>
<td style="width: 40px;"><span style="color: #aaa;">Remove</span></td>
</tr>
<tr>
<!-- <td style="padding:0px 2px;"><input type="textbox" class="textbox" value="3" name="54_59_131" /></td> -->
<td align="center" valign="middle" style="background-color:#C3DCCD;"><input checked="checked" style="margin:5px;" type="checkbox" name="products-quote[]" value="835" /></td>
<td align="center" valign="middle" style="background-color:#D3C4DF;"><input checked="checked" style="margin:5px;" type="checkbox" name="products-sample[]" value="835" /></td>
<td style="font-size:11px;background-color:#efefef;"><p style="margin:0px 0px 5px 0px;padding:5px;"><span style="color:#663399;font-weight:bold;">VFR1001</span> Sterile Single-use Rotunda Vulsellum Forceps, double packed</p></td>
<td style="font-size:11px;background-color:#efefef;"><p style="margin:0px 0px 5px 0px;padding:5px; font-weight:bold;">10 units</p></td>
<td align="center"><b>X</b></td>
</tr>
</table>
</div>
<script>
function quoteme() {
$("#msgbox_body").html('<div id="contactform" style="margin-left:20px;margin-right:20px;margin-top:10px;"><form class="form" method="POST" action="http://www.dtrmedical.com"><table border="0"><tbody><tr><td><p class="name"><label for="name">Your Name<span style="color:red;">*</span>:</label></p></td><td> </td><td><input type="text" name="name" id="name" /></td></tr><tr><td><p class="hospital"><label for="hospital">Hospital/Institution:</label></p></td><td> </td><td><input type="text" name="hospital" id="hospital" /></td></tr><tr><td><p class="department"><label for="department">Department:</label></p></td><td> </td><td><input type="text" name="department" id="department" /></td></tr><tr><td><p class="email"><label for="email">E-mail<span style="color:red;">*</span>:</label></p></td><td> </td><td><input type="text" name="email" id="email" /></td></tr><tr><td><p class="tel"><label for="tel">Telephone<span style="color:red;">*</span>:</label></p></td><td> </td><td><input type="text" name="tel" id="tel" /></td></tr><tr><td colspan="3" align="center"><p class="submit"><input style=\"margin-left:27px;cursor:pointer;\" onclick="jQuery.facebox({ ajax: (\'wishlist.php?emailme=true&name=\' + this.form.name.value + \'&email=\' + this.form.email.value + \'&tel=\' + this.form.tel.value + \'&hospital=\' + this.form.hospital.value + \'&department=\' + this.form.department.value) }); return false;" type="submit" value="Send enquiry" name="submit" /></p></td><td> </td><td> </td></tr></tbody></table></form></div>');
$("#msgbox_actions").html('<input onclick="jQuery.facebox({ ajax: \'wishlist.php?basket=true\' })" type="button" value="Back to Wishlist" />');
}
</script>
<div id="msgbox_actions"><input onclick="quoteme()" type="button" value="Request quote/sample" /> <a class="backtoproducts" href="http://www.dtrmedical.com/products" style="border-bottom-left-radius:5px 5px;border-bottom-right-radius:5px 5px;border-bottom-style:none;border-color:initial;border-left-style:none;border-right-style:none;border-top-left-radius:5px 5px;border-top-right-radius:5px 5px;border-top-style:none;border-width:initial;color:white;font-family:Arial;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;font-size:11px;">Back to products</a></div><!-- <input type="submit" value="Update" /> --><!-- <input onclick="jQuery.facebox({ ajax: 'wishlist.php?emailme=true' })" type="button" value="Save list for later" /> --> <!-- <input type="submit" value="Update Qty's" /> <input onclick="jQuery.facebox({ ajax: 'wishlist.php?basket=true&clearall=true' })" type="button" value="Clear list" /> --></div>
</form>
In the line of starting with <div id="msgbox_actions">, at the end of it after the comments, is the extra </div>
This is breaking your html, which IE doesn't know how to fix, yet other browsers are able to.
Probably not the problem but my FireBug console tells me this when I click on the button:
"NetworkError: 404 Not Found - http://dtrmedical.com/xfade2.css"
It is not finding your CSS file for some reason or another.
Your onclick event isn't binding properly to your shopping cart div. I'm not sure why, exactly; IE8 may be buggy about parsing complicated HTML attributes like that properly.
Instead of defining the event inline (right inside of the HTML tag), try doing it via jQuery, instead. Add the following code to the beginning of your $.ready body.
$('#mybasket').click(function(){location.href='wishlist.php?basket=true';});
As a side note, you should always avoid defining any event handling in your HTML, instead taking the approach I describe above. Doing so not only means that all of your "action" code will be in once place, but it also affords you greater cross-browser support (especially when you leverage a library like jQuery).

Categories

Resources