Html input fields automatically fill - javascript

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); ?>" />

Related

Form submit does not close the form and reload to the homepage

I have a problem setting up a form on my website.
I want to add two separate forms on my website, which i did, using some HTML & css.
Thoses forms need to send informations to a webhook -> it also works (since it's collected)
BUT as soon as i press submit, it redirect to the main page of the website, so no conversion (which is a shame) and a very bad input from me.
Please, lend me your intelligence, since i must be the best idiot there is.
<form name='myForm' data-form-id='IdFromWebhook' action='WebhookLink' method='post' onsubmit="return false">
<div class="row">
<div class="col-lg-12">
<div class="form-group text_box">
<label for='EMAIL_ADDRESS'>E-mail: </label><input id='insightly_email' name='email' type='text' required>
</div>
</div>
<div class="col-lg-6">
<div class="form-group text_box">
<label for='FIRST_NAME'>First name: </label><input id='insightly_firstName' name='firstName' type='text' required>
</div>
</div>
<div class="col-lg-6">
<div class="form-group text_box">
<label for='LAST_NAME'>Last Name: </label><input id='insightly_lastName' name='lastName' type='text' required>
</div>
</div>
<div class="col-lg-4">
<div class="form-group text_box">
<label for='Language__c'>Choose a language: </label>
<select id='insightly_language' name='language' required><option value='EN'>EN</option><option value='FR'>FR</option><option value='DE'>DE</option></select>
</div>
</div>
</div>
<!--Bouton d'envoi-->
<div style="display:flex;justify-content:center"><input class="btn_three" type='submit' value='Submit'></div></form>
Use event.preventDefault() this will stops redirect:
formReference.onsubmit = (event) => {
event.preventDefualt()
}
I stupidly found the right answer, i had to specify URLs for the success or error pages.
It was an insightly form.

Fill several times content of same form fields and write it into several lines of a database

I have built a form. I put a button inside this form called "Add a book". When a user clicks two fields appear : "bookname" and "bookdate" :
<div class="form-group col-md-3">
<a class="btn btn-success" onclick="add()" href="#">
<i class="glyphicon glyphicon-plus icon-white"></i>Add a book
</a>
</div>
<div id="wrapper">
<!-- champs du formulaire -->
<div class="form-group col-md-12" id="add" style="display:none;">
<!-- Bookname -->
<div class="form-row">
<div class="form-group col-md-3">
<label for="exampleInputPassword1">Name of book</label>
<input type="text" class="form-control" id="bookname" name="bookname">
</div>
</div>
<!-- Bookdate -->
<div class="form-row">
<div class="form-group col-md-3">
<label for="exampleInputPassword1">Date of book</label>
<input type="text" class="form-control" id="bookdate" name="bookdate">
</div>
</div>
</div>
</div>
When there is only one book, there are no problem to validate the form and write the "bookname" and "bookdate" to the project database. It's very common.
My question is : for example if a user clicks 3 times on the "add book" button and fills 3 times the "bookname" and "bookdate" fields , how could I do in the code to save all that into three different lines in the database ?
That is to say :
bookname bookdate
name1 date1
name2 date2
name3 date3
I don't see how i could do ?
Any help would be very appreciated.
Thank you !
You need to change the name attribute on your bookname and bookdate inputs to array notation i.e.
<input type="text" class="form-control" id="bookname" name="bookname[]">
<input type="text" class="form-control" id="bookdate" name="bookdate[]">
Then, in your PHP code, you will find that $_POST['bookname'] and $_POST['bookdate'] are now arrays of values, so you can iterate through them e.g.
foreach ($_POST['bookname'] as $k => $bookname) {
$bookdate = $_POST['bookdate'][$k];
// write bookname and bookdate to database
...
}

Clear only specific fields in HTML form when submitting

I have the following HTML form code:
<div data-role="popup" id="-add" data-theme="c" class="ui-corner-all" data-dismissible="false" data-overlay-theme="a" style="min-width:550px;">
<div data-role="content"> Delete
<form id="item-form" action="#" formaction="process" data-ajax="false">
<input type="hidden" name="type" value="hidden1" />
<input type="hidden" name="how" value="hidden2" />
<input type="hidden" name="loc" value="hidden3" />
<input type="hidden" name="itemtype" value="hidden4" />
<div align="left">
<h3> Add</h3>
</div>
<div class="popup-hrule"></div>
<div class="ui-grid-a ui-responsive">
<div class="ui-block-a">
<label for="location_name">Name</label>
<input type="text" name="location_name" id="location_name" value="">
</div>
<div class="ui-block-b" data-schema="types">
<label for="type_name">Type</label>
<select name="type_name" id="type_name">
<option data-item=".textarea:name; .value:id; .repeat:true"></option>
</select>
</div>
<div class="ui-block-a">
<label for="address">Address</label>
<input type="text" name="address" id="address" value="">
</div>
<div class="ui-block-b">
<label for="city">City</label>
<input type="text" name="city" id="city" value="">
</div>
<div class="ui-block-a">
<label for="state">State</label>
<input type="text" name="state" id="state" value="">
</div>
<div class="ui-block-b">
<label for="zip">Postal</label>
<input type="number" name="zip" id="zip" value="">
</div>
<div class="ui-block-a">
<label for="_lat">Latitude</label>
<input type="number" name="_lat" id="_lat" value="">
</div>
<div class="ui-block-b">
<label for="_lon">Longitude</label>
<input type="number" name="_lon" id="_lon" value="">
</div>
</div> <a data-role="button" data-inline="true" onclick="$(this).closest('[data-role=popup]').popup('close');">Cancel</a>
<a data-role="button" data-inline="true" data-theme="a" onclick="$(this).closest('form').submit();$(this).closest('form').find('input').val('');$(this).closest('[data-role=popup]').popup('close')">Add</a>
</form>
</div>
</div>
Since this is an ADD form I would like to close the form and clear all the fields except for the hidden ones at the top which are flags that tell me what I have to do with the data. When I execute the code it clears all the data in the form including the hidden fields so the second time I can't add a new record.
A best approach for me would be to close the form completely so I don't have to erase the fields in the form which are going to get new data when I try to open it again.
You're clearing all input elements:
$(this).closest('form').find('input').val('');
If you want to clear only some of them, you need to target specifically the ones you want. For example, if you want to clear all non-hidden input elements:
$(this).closest('form').find('input[type!="hidden"]').val('');
Worst case would be that you have to turn this one line of code into a couple of lines of code to identify the elements you want. But as long as there's some jQuery-selectable pattern to identify the ones you want, that's what you need to do.
A best approach for me would be to close the form completely so I
don't have to erase the fields in the form which are going to get new
data when I try to open it again.
$("#item-form").remove();
If the hidden fields are populated from server, you can reset the form, so all form fields will be reset to value which were there during page reload.
$('#item-form')[0].reset();
The plain JS way of doing it
document.getElementById("item-form").reset();
Updated after discussion with OP
Cancel
function resetForm() {
$('#item-form')[0].reset();
$(this).closest('[data-role=popup]').popup(‌​'close');
}
Change this:
<a data-role="button" data-inline="true" data-theme="a" onclick="$(this).closest('form').submit();$(this).closest('form').find('input').val('');$(this).closest('[data-role=popup]').popup('close')">Add</a>
For this:
<a data-role="button" data-inline="true" data-theme="a" onclick="$(this).closest('form').submit();$(this).closest('form').find('input[type!=\'hidden\']').val('');$(this).closest('[data-role=popup]').popup('close')">Add</a>
So that you are selecting just those input elements with type not equal to hidden.

jquery addslashes to an entire form on submit

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:

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