jquery addslashes to an entire form on submit - javascript

I am working with an annoyingly encrypted PHP script which doesn't let me at the source. The script outputs API results data via an HTML template file which uses variables like this:
%%Author%%
Amazon.com %%ListPrice%%
%%Price%%
%%ReviewLink%%
%%Description%%
I cannot convert this file to a php file. The encrypted php script looks for "phpzon.template.html". I want to grab the data loaded in each result i.e. %%Description%% and submit it to a php script for storage in a database. However, the content of %%Description%% for example contains html, so the data is breaking when entered into the database because of the " quotes and stuff in the data.
If it was a php file I could addslashes() to clean up the data before adding it to hidden form values, but I can't in this case. What is the jQuery way of doing this?
I tried serialize() thinking it might do this but it doesn't.
The form looks like this:
<form class="uk-form" method="post" id="add-to-cart" action="index.php?option=com_entrusters&view=itemform&Itemid=351">
<div class="uk-panel uk-panel-box uk-margin-small-bottom" style="box-shadow:none;padding: 15px 15px 0px;">
<div class="uk-grid">
<div class="uk-width-medium-8-10"><h4>%%Title%%</h4></div>
<div class="uk-width-medium-2-10"><button type="submit" href="" class="uk-button uk-button-small uk-button-primary uk-width-1-1">
<i class="uk-icon-shopping-cart"></i> Review & Order</button></div>
</div>
<div class="uk-grid" style="margin-top:0;">
<div class="uk-width-medium-2-10"><img src="%%Image%%" alt="%%Title%%" border="0" style="height:100px" /></div>
<div class="uk-width-medium-3-10">
<small>
%%Author%%
Amazon.com %%ListPrice%%
%%Price%%
<!-- %%YouSave%% -->
%%ReviewLink%%
</small>
<i class="uk-icon-external-link"></i> See on Amazon.com
%%AverageRating%%
</div>
<div class="uk-width-medium-5-10 ">
<input type="hidden" name="item" id="item" value="%%Title%%"/>
<input type="hidden" name="itemlist" id="itemlist" value=""/>
<input type="hidden" name="itemurl" id="itemurl" value="%%Link%%"/>
<input type="hidden" name="details" id="details" value="%%Description%%"/>
<input type="hidden" name="category" id="category" value="%%ProductGroup%%"/>
<input type="hidden" name="features" id="features" value="%%Features%%"/>
<input type="hidden" name="imageurl" id="imageurl" value="%%Image%%"/>
<input type="hidden" name="price" id="price" value="%%Price%%"/>
<div style="overflow-y: scroll; height:100px;"><p><small>%%Description%%</small></p></div>
<h5>%%ProductGroup%%</h5>
<!--<h5>%%FeaturesTitle%%</h5>
<p><small>%%Features%%</small></p>-->
</div>
</div>
</div>
</form>
<script>
jQuery( "form" ).on( "submit", function( event ) {
jQuery( this ).serialize();
});
</script>
When this form is submitted the results page shows broken html as in this image:

Related

Multiple forms with one submit button with edit and delete button

How to submit and "show"(in the same page) multiple form with one submit button with edit and delete button with php javascript?
This is my mockup
This is my code without php:
<div class="row">
<div class="col-md-6">
<div class="panel-body">
<form method="post">
<div class="form-group row">
<div class="col-md-3">
<label>Content number</label>
<input class="form-control" name="BranchName" type="text" />
</div>
<div class="col-md-4">
<label>Topic</label>
<input class="form-control" name="Tel" type="text">
</div>
</div>
<div class="form-group">
<label>Content</label>
<textarea class="form-control" name="Address" rows="3"></textarea>
</div>
<p id="submit">
<button type="submit" class="btn btn-info">Submit</button>
</p>
</form>
</div>
</div>
</div>
Please help. This is the final that what i expect. I want it to clear text area after click submit to be ready for the new form. But now i don't know how to show all form that submitted at the bottom of the page in list of item with edit and delete function.
As i'm assuming your getting your information via PHP, what you will need to do in the edit/ delete sections is add some form item id for the edit/delete functions something like. Alternatively you can do the same thing in JavaScript, and link the AJAX request to a .php file with the functions for handling the edit and delete functions.
<?php foreach($key as $data) { ?>
<form action="edit.php" method="post">
<input name="<?php echo $data[$key].formItemID ?>" type="submit" value="edit" />
</form>
<form action="delete.php" method="post">
<input name="<?php echo $data[$key].formItemID ?>" type="submit" value="delete" />
</form>
<?php } ?>

Can't simulate click on submit button via javascript

I'm having problems simulating a click via javascript on a mailchimp pop-up subscribe form and i need your help.
<!-- Title & Description - Holds HTML from CK editor -->
<div class="content__titleDescription" data-dojo-attach-point="descriptionContainer"><strong>Unlock the content </strong>by subscribing to our page.</div>
<!-- Form Fields -->
<form action="//mc.us7.list-manage.com/subscribe/form-post?u=bcd9828fa83ea7a231ffbee26&id=1928481ac4" accept-charset="UTF-8" method="post" enctype="multipart/form-data" data-dojo-attach-point="formNode" novalidate="">
<div class="content__formFields" data-dojo-attach-point="formFieldsContainer">
<div class="field-wrapper" id="uniqName_3_0" widgetid="uniqName_3_0">
<label for="mc-EMAIL">Email Address</label>
<input type="text" name="EMAIL" value="" id="mc-EMAIL" class="invalid">
<div class="invalid-error" style="display: block;">This field is required.</div>
</div>
<div class="field-wrapper" id="uniqName_3_1" widgetid="uniqName_3_1">
<label for="mc-FNAME">First Name</label>
<input type="text" name="FNAME" value="" id="mc-FNAME" class="valid">
<div class="invalid-error" style="display: none;"></div>
</div>
<div style="position:absolute;left:-5000px;">
<input type="text" name="b_bcd9828fa83ea7a231ffbee26_1928481ac4" tabindex="-1" value="">
</div>
</div>
<div class="content__button">
<input class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
</div>
</form>
<!-- Footer - Holds HTML from CK editor -->
<div class="content__footer" data-dojo-attach-point="footerContainer"></div>
</div>
<div class="modalContent__image" data-dojo-attach-point="formImageContainer"></div>
The code that i'm trying to target is:
<input class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
It's the submit button "Subscribe" that you can also see in
http://www.aspeagro.com/EN_Program_Abricot.html
Thank you!
How about this? I think is should do what you're after?
HTML
<input id="submit-button" class="button" type="submit" value="Subscribe" data-dojo-attach-point="submitButton">
JS
$('#submit-button').on('click', function(e){
e.preventDefault();
// Do what you want to do
});
set id="btn" attribute to your submitting button and using jQuery you can trigger click with $("#btn").click(); call
If your aim is to submit the form, then don't bother sending a click event, but use the form's submit method:
var form = document.getElementById('uniqName_3_0').parentNode.parentNode;
form.submit();
The code is of course easier if you give the form an id attribute:
<form id="myform" ...
and then:
document.getElementById('myform').submit();
That button is inside an iframe. To access it from the parent page you would trigger it like this:
$('iframe').contents().find('input:submit').click()

Html input fields automatically fill

I have two input Fields same value one input fields have home page and another input fields same value have in results page.when i input the value in homepage this automatically Fill results page .if i enter value in home page 5000. this value automatically fill in same input fields Results page ? how i will do this ? please help me ?
code :
<div class="col-md-6">
<div class="glyphicon glyphicon-exclamation-sign gly pull-left">
</div>
<br />
<p>Confirm 1st Mortgage For DPA Scenario</p>
<div class="row">
<div class="col-md-12">
<select id="Select9" class="dropdown">
<option value="">Work with All Mortgages</option>
</select>
</div>
</div>
<br />
<br />
<p class="pull-right">DPA Minimum Buyer Contribution<br />
(Unless Included In Down Payment)
</p>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6" style="padding-right:1%">
<input type="text" class="txt"/></div>
<div class="col-md-3" style="padding-left:0%">
<select id="Select10" class="dropdown"style="margin-top:1px">
<option value="">%</option>
</select></div>
</div>
</div>
In response to your comment:
i am using javascript server side in php
You would use server-side code to accomplish this. Let's look at a contrived example. On the first page, you might have a simple form:
<form method="post" action="secondPage.php">
<input type="text" name="myValue" />
<input type="submit" />
</form>
When submitting this form, the value in myValue is posted to the server-side code in secondPage.php. That page can access the value:
$myValue = $_POST['myValue'];
Then to output it to the page, you would echo (a sanitized version of) the value:
echo htmlspecialchars($myValue);
This can happen anywhere in your markup. For example, if you want it to be in another form element:
<input type="text" name="myValue" value="<?php echo htmlspecialchars($myValue); ?>" />

Redirecting after form submit

I have a little problem with a form. I can't figure out how to redirect to the "thankyou.html" page after the form is filled and submitted. Now the it keeps returning to "form.html" page. Any help would be greatly appriciated!
<body class="application">
<!-- content -->
<section class="main-body">
<div class="container-fluid">
<div class="row-fluid" id="content">
<!-- breadcrumbs -->
<div>
<div class="bootstrap-widget-content" id="yw3"><p class="help">
</p><p class="note">The form</p><form class="well form-horizontal" id="yw0" action="form.html" method="post"><div style="visibility:hidden"><input type="hidden" value="1" name="yform_35d652cf" id="yform_35d652cf" /></div>
<div class="control-group "><label class="control-label required" for="Applicant_firstname">Name <span class="required">*</span></label><div class="controls"><input class="span6" name="Applicant[firstname]" id="Applicant_firstname" type="text" /><span class="help-inline error" id="Applicant_firstname_em_" style="display: none"></span></div></div>
<div class="control-group "><label class="control-label required" for="Applicant_lastname">Last name <span class="required">*</span></label><div class="controls"><input class="span6" name="Applicant[lastname]" id="Applicant_lastname" type="text" /><span class="help-inline error" id="Applicant_lastname_em_" style="display: none"></span></div></div>
<div class="control-group "><label class="control-label required" for="Applicant_email">E-mail <span class="required">*</span></label><div class="controls"><input class="span6" name="Applicant[email]" id="Applicant_email" type="text" /><span class="help-inline error" id="Applicant_email_em_" style="display: none"></span></div></div>
<div class="control-group "><label class="control-label" for="Applicant_phone">Phone</label><div class="controls"><input class="span2" name="Applicant[phone]" id="Applicant_phone" type="text" /><span class="help-inline error" id="Applicant_phone_em_" style="display: none"></span></div></div>
<div class="control-group "><label class="control-label" for="Applicant_address">Adress</label><div class="controls"><input class="span6" name="Applicant[address]" id="Applicant_address" type="text" /><span class="help-inline error" id="Applicant_address_em_" style="display: none"></span></div></div>
<div class="control-group "><label class="control-label" for="Applicant_postcode">Number</label><div class="controls"><input class="span6 postSelect2" name="Applicant[postcode]" id="Applicant_postcode" type="text" /><span class="help-inline error" id="Applicant_postcode_em_" style="display: none"></span></div></div>
<div class="control-group "><label class="control-label" for="Applicant_postoffice">City</label><div class="controls"><input class="span6 postSelect2" name="Applicant[postoffice]" id="Applicant_postoffice" type="text" /><span class="help-inline error" id="Applicant_postoffice_em_" style="display: none"></span></div></div>
<div class="control-group "><label class="control-label" for="Applicant_extrainfo">Message</label><div class="controls"><textarea class="span6" name="Applicant[extrainfo]" id="Applicant_extrainfo"></textarea><span class="help-inline error" id="Applicant_extrainfo_em_" style="display: none"></span></div></div>
<div class="control-group "><label class="control-label" for="Applicant_invoice_preference">Toivottu laskutustapa</label><div class="controls"><select placeholder="Valitse toivottu laskutustapa" class="span4" name="Applicant[invoice_preference]" id="Applicant_invoice_preference">
<option value="">Question</option>
<option value="1" selected="selected">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
</select><span class="help-inline error" id="Applicant_invoice_preference_em_" style="display: none"></span></div></div>
<div class="form-actions">
<button name="submit" class="btn btn-primary" id="yw1" type="submit">Tallenna</button> <button name="reset" class="btn" id="yw2" type="reset">Palauta oletusarvot</button> </div>
</form></div></div>
</div>
</div><!-- content -->
</div>
</section>
<script type="text/javascript" src="/js/select2.min.js"></script>
<script type="text/javascript" src="/jquery.joyride-2.1.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
$('.toggle-hidden').click(function() {
$('.hidden-area').toggle();
return false;
});
$('.toggle-hidden-2').click(function(event) {
$('.hidden-area').hide();
$('.' + $(event.target).data('target')).toggle();
return false;
});
jQuery(function($) {
jQuery('body').popover({'selector':'[rel=popover]'});
jQuery('body').tooltip({'selector':'[rel=tooltip]'});
jQuery('#yw0').yiiactiveform({'attributes':[{'id':'Applicant_firstname','inputID':'Applicant_firstname','errorID':'Applicant_firstname_em_','model':'Applicant','name':'Applicant[firstname]','enableAjaxValidation':true,'inputContainer':'div.control-group'},{'id':'Applicant_lastname','inputID':'Applicant_lastname','errorID':'Applicant_lastname_em_','model':'Applicant','name':'Applicant[lastname]','enableAjaxValidation':true,'inputContainer':'div.control-group'},{'id':'Applicant_email','inputID':'Applicant_email','errorID':'Applicant_email_em_','model':'Applicant','name':'Applicant[email]','enableAjaxValidation':true,'inputContainer':'div.control-group'},{'id':'Applicant_phone','inputID':'Applicant_phone','errorID':'Applicant_phone_em_','model':'Applicant','name':'Applicant[phone]','enableAjaxValidation':true,'inputContainer':'div.control-group'},{'id':'Applicant_address','inputID':'Applicant_address','errorID':'Applicant_address_em_','model':'Applicant','name':'Applicant[address]','enableAjaxValidation':true,'inputContainer':'div.control-group'},{'id':'Applicant_postcode','inputID':'Applicant_postcode','errorID':'Applicant_postcode_em_','model':'Applicant','name':'Applicant[postcode]','enableAjaxValidation':true,'inputContainer':'div.control-group'},{'id':'Applicant_postoffice','inputID':'Applicant_postoffice','errorID':'Applicant_postoffice_em_','model':'Applicant','name':'Applicant[postoffice]','enableAjaxValidation':true,'inputContainer':'div.control-group'},{'id':'Applicant_extrainfo','inputID':'Applicant_extrainfo','errorID':'Applicant_extrainfo_em_','model':'Applicant','name':'Applicant[extrainfo]','enableAjaxValidation':true,'inputContainer':'div.control-group'},{'id':'Applicant_invoice_preference','inputID':'Applicant_invoice_preference','errorID':'Applicant_invoice_preference_em_','model':'Applicant','name':'Applicant[invoice_preference]','enableAjaxValidation':true,'inputContainer':'div.control-group'}],'errorCss':'error'});
jQuery('#yw4 .alert').alert();
window.setTimeout(function() { $('.alert').alert('close'); }, 5000);
});
</script>
Look at your form action:
<form class="well form-horizontal" id="yw0" action="form.html" method="post">
Well, what is form.html? Is this page form.html? If so, then this page is submitting to itself. That means it's making a POST request to form.html, to include the values from the form. Unless you're doing anything server-side (and it doesn't look like you are), the standard response for any request to a page is to display that page.
If you want your form to post to a different page, change the action:
<form class="well form-horizontal" id="yw0" action="thankyou.html" method="post">
However, be aware that you still need something server-side to handle the actual form post. By changing the action all you're doing is telling the form to make a request to thankyou.html instead of form.html, which will successfully display the "thank you" page. But it won't actually do anything with the form values by default.
For that, you'll need some kind of server-side code to accept and process those values. (There are many options in that regard... PHP, ASP.NET, Java, Ruby, etc., etc.)
Note that in server-side code you would also have a lot more control over the flow of the application. For example, maybe you want the form-handling logic to be on form.html (or form.php more likely). The page can still submit to itself, and then in server-side logic you can perform a redirect to another page. This can be useful if you want to validate the input and re-display the form on an error, and only redirect to thankyou.html if validation is successful.
I assume that the quoted file is form.html...
<button name="submit" class="btn btn-primary" id="yw1" type="submit">Tallenna</button>
you've defined submit without action property so it use the same page to submit form to... You must add action and direct it either to same file
<button name="submit" class="btn btn-primary" id="yw1" type="submit" action='form.html?submitted=1'>Tallenna</button>
and onload to check for submitted parameter in query string and if exists to redirect or to direct it to a server site script (e.g. test.php)
<button name="submit" class="btn btn-primary" id="yw1" type="submit" action='test.php'>Tallenna</button>
and redirect when work is done.
when you submit form,it will goes at form.html,because you have add action in form to form.html
write following code in your form.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function () {
window.location.href="thankyou.html";
});
</script>
answer with adding action is wrong, because it sends data to thankyou.html instead form.html
so you may use js, it is very easy:
just add onsubmit="window.location.href = 'thankyou.html'; return false;" to form attributes
example
Just add a url at the action in the form tag. This would redirect to it. As shown below.
<form id="payTmForm" action="https://pguat.paytm.com/oltp-web/processTransaction" method="post">
</form>

Ajax serialize() method is not reading all data fields of html form

I'm trying to send the form data of my web page using jquery get() method. But when I submit the form only few of the field data where sent to the server.
Form:
<form class="form-horizontal" id="addpost" method="GET" action="">
<div class="control-group">
<label class="control-label" for="form-field">Post Title</label>
<div class="controls">
<input type="text" id="form-field" placeholder="Post Title" name="Post-title" value="" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="form-field-11">Content Here</label>
<div class="controls">
<textarea name="post-content" value="" class="autosize-transition span12" id="form-field-11" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 67px;"></textarea>
</div>
</div><!-- Insert Image Code -->
<div class="control-group">
<div class="widget-main">
<div class="controls">
<div class="ace-file-input">
<input id="id-input-file-2" type="file">
<a class="remove" href="#"></a>
</div>
</div>
<div class="controls">
<div class="ace-file-input ace-file-multiple">
<input id="id-input-file-3" type="file" multiple="">
<a class="remove" href="#">
<i class="icon-remove"></i>
</a>
</div>
<label>
<input id="id-file-format" type="checkbox" name="file-format">
<span class="lbl"> Allow only images</span>
</label>
</div>
</div>
</div><!-- Insert Image Code -->
<div class="space-4"></div>
<div class="control-group">
<label class="control-label" for="form-field-tags">Tag input</label>
<div class="controls">
<input id="form-field-tags" type="hidden" placeholder="Enter tags ..." value="Tag Input Control" name="tags">
</div>
</div>
<div class="space-4"></div>
<div class="control-group">
<label class="control-label" for="form-field-select-3">Select Category</label>
<div class="controls">
<label for="form-field-select-3">Chosen</label>
<select class="chzn-select" id="form-field-select-3" data-placeholder="Choose a Category...">
<option value="">
</option><option value="Blog">Blog
</option><option value="News Letter">News Letter
</option></select>
</div>
</div>
<div class="control-group" style="float:left; margin-right:25px">
<div class="controls"><button type="submit" class="btn btn-info">
<i class="icon-ok bigger-110"></i>
<input type="submit" value="" id="posubmit" style="opacity:0"/>Submit</button>
<button type="reset" class="btn"><i class="icon-undo bigger-110"></i>Reset</button>
</div>
</div>
<div id="resp" style="float:left; margin-top:5px">
<img id="loading" style="visibility:hidden;" src="assets/img/ajax-load.gif" width="16" height="16" alt="loading" />
</div>
</form>
JavaSccript:
$('#addpost').submit(function(e){
if(use_ajax)
{
$('#loading').css('visibility','visible');
$.get('test.php',$(this).serialize(),
function(data){
if(parseInt(data)==-1)
$.validationEngine.buildPrompt("#resp","* Please ensure all fields are filled.","error");
else
{
$("#resp").show('slow').after('<p id="resp-mes" style=" color:#000000; text-decoration: bold;">Success....</p>');
}
$('#loading').css('visibility','hidden');
setTimeout( "jQuery('#resp').hide('slow');",3000 );
setTimeout( "jQuery('#resp-mes').hide('slow');",5000 );
});
}
e.preventDefault();
}
)};
In this only 3 field values where sent to server.
That is Post-title, post-content and tags
I don't know why this happening.
Any help would be appreciated.
you have two issues.
Ajax and serialize upload doesn't work with file upload. (Read this question and answer for async upload)
jquery form serialize needs a name attribute. your select box (form-field-select-3) doesn't have a name attribute.
following is a note in jquery serialize documentation page -
Note: Only "successful controls" are serialized to the string. No
submit button value is serialized since the form was not submitted
using a button. For a form element's value to be included in the
serialized string, the element must have a name attribute. Values from
checkboxes and radio buttons (inputs of type "radio" or "checkbox")
are included only if they are checked. Data from file select elements
is not serialized.
Its because you have missed "name" attribute in select element
<select class="chzn-select" id="form-field-select-3" name="form-field-select-3" data-placeholder="Choose a Category...">
I have checked in my local, and now this is working fine.
Please check and let me know if any issue.
Thanks
I see that attrbute name="" is required and some of the input elems are missing those. so you can try placing this attribute and see if this solves the issue:
<select class="chzn-select" name="your-elem-name">
//--------------------------^^^^^^^^^^^^^^^^^^^^^-----try placing the name attr
ok of this entire form, only four elements may get sent through if all four are populated/selected from a higher index than zero;
the ones with these names;
"tags"
"file-format"
"post-content"
"Post-title"
this is because those are the only tags with a name attribute defined.
please give all the elements you want to post through to the server a name attribute with the post index you want to use to access them with.

Categories