when submit button is clicked the input data is disappear in html How can I rectify the problem?
<html>
<head>
<title>hhhh</title>
</head>
<body>
<form id="form">
<input type="text" id="username" placeholder="username" />
<input type="submit" id="btn" />
</form>
</body>
<script>
var a = document.getElementById("username");
var b = document.getElementById("btn");
b.addEventListener("click", () => {
console.log(a.value);
});
</script>
</html>
Related
The response I'm getting from the ajax is the entire html instead of the form.serialize(). Why this is happening? How do I get only the form.serialize()?
Also, I tried put json in the dataType but then the response return an error.
Thanks
/test.html.erb
<form name="boleto_form" action="" id="boleto-form">
<input type="text" name="name" id="name" value="Guilherme Bordignon" required>
<input type="text" name="cpf" id="cpf" value="03310782018" required>
<input type="submit" name="buy_button" id="buy-button" value="Comprar">
</form>
test.js
dados = $('#boleto-form').serialize();
console.log(dados);
$.ajax({
method: "POST",
url: "payments",
data: dados,
dataType: "text",
success: function(response) {
console.log('lol' + response);
},
error: function(response) {
console.log(response);
}
});
routes.rb
resources :orders do
get '/payments', to: 'payments#test'
post '/payments', to: 'payments#test'
end
console
lol<!DOCTYPE html>
<html>
<head>
<title>Mypg</title>
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="QKESaecu5iy7gzgqYlGpkns5UUPaoIgMVC464a12z2ycjNFn9CbB+HxFTWnbTAU57xa/djbFhKz+ml6wzLpo5Q==" />
<link rel="stylesheet" media="all" href="/assets/application.debug-2ff85327b45ccfcb08b5825f21ab8b6d5ee67197751ab00ed866ea21a87f647c.css" data-turbolinks-track="reload" />
<script src="/packs/js/application-47b020c259890ae2a580.js" data-turbolinks-track="reload"></script>
<script type="text/javascript" src=
"https://stc.sandbox.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.directpayment.js">
</script>
</head>
<body>
<p class="notice"></p>
<p class="alert"></p>
<form name="boleto_form" action="" id="boleto-form">
<h2>Dados do comprador</h2>
<label for="name">Nome</label>
<input type="text" name="name" id="name" value="Guilherme Bordignon" required>
<input type="text" name="cpf" id="cpf" value="03310782018" required>
<input type="submit" name="buy_button" id="buy-button" value="Comprar">
</form>
</body>
</html>
Having one html file called index.html.Here I'm having one page for list view(group).Another one(pg_add-group) is for both new and edit view.
If I hit the Add button from list view,the new form opened correctly.If I select any of the product from list view,its correctly uploaded the details to the edit view.
Its done by getting date from session.Now if I again try to add product, its containing old session data in the new form.The new form should contain with empty details.Can you help me to do this ?
Here is my coding,
pg_add-group
<div id="pg_add-group" data-role="page">
<form name="frm_add-group" id="frm_add-group" action="" method="post">
<div data-role="header" data-transition="fixed">
<h1 id="add-group-header"></h1>
Back
</div>
<div data-role="main" class="ui-content" >
<div id="add_sms-group_notification" class="center-wrapper-error" data-icon="right"></div>
<label for="group_name" class="ui-hidden-accessible"></label>
<input type="text" name="group_name" id="group_name" placeholder="Enter Group Name" />
<label for="group_desc" class="ui-hidden-accessible"></label>
<textarea name="group_desc" id="group_desc" placeholder="Enter Group Decription"></textarea>
<div class="containing-element">
<label for="group_published">Published</label>
<select name="group_published" id="group_published" data-theme="b">
<option value="1" >Yes</option>
<option value="0" >No</option>
</select>
<input type="hidden" name="group_id" id="group_id" />
</div>
<div class="containing-element">
<button type="submit" name="submit" value="submit" data-theme="a" data-icon="check">Submit</button>
<button type="reset" name="reset" value="reset" data-theme="a" data-icon="delete" >Reset</button>
</div>
<div data-role="footer" data-position="fixed">
<h1 id='add-book-footer'></h1>
</div>
</form>
</div>
test.js
From he below coding
group_id is comes from the list view's selected group id.
session data ses_group contains the list of groups.
$('#pg_add-group').on('pageshow', function(event) {
var group_list = $.parseJSON(sessionStorage.getItem("ses_group"));
var group_id = sessionStorage.group_id;
$.each(group_list, function(ctr, obj) {
if(group_id == obj.groupid){
$('input[id=group_name]').val(obj.groupname);
$('textarea[id=group_desc]').val(obj.groupdesc);
$('input[id=group_id]').val(obj.groupid);
$("#group_published").val('0').slider('refresh');
}
});
$( ".input[id=group_name]" ).textinput( "refresh" );
$( ".textarea[id=group_desc]" ).textinput( "refresh" );
});
Working example: http://jsfiddle.net/Gajotres/2AVWQ/
Usage:
Take a look at provided code, every element used has a custom attribute called data-default-value, it is used to determine which element is a default one. Basically use provided code to reset any form.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<input type="button" id="clr-form-btn" value="Clear form"/>
<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" value="Some value"/>
<label for="flip-1">Flip switch:</label>
<select name="flip-1" id="flip-1" data-role="slider" data-default-value="off">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1"/>
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" checked="checked" data-default-value=""/>
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
</fieldset>
<label for="select-choice-0" class="select">Shipping method:</label>
<select name="select-choice-0" id="select-choice-0" data-default-value="standard">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
<textarea>
asd
asd
asd
as
das
d
asdassd
</textarea>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Javascript:
$(document).on('pagebeforeshow', '#index', function(){
cleanForm();
});
function cleanForm() {
var page = $.mobile.activePage;
// Reset input elements
page.find('.ui-content *').filter("[type='text'],textarea").each(function(){
$(this).val('');
});
// Reset drop down elements
page.find('.ui-content *').filter(".ui-select").each(function(){
var select = $(this).find('select');
var defaultValue = select.attr('data-default-value');
select.val(defaultValue);
select.selectmenu('refresh', true);
});
// Reset flip switch elements
page.find('.ui-content *').filter('[data-role="slider"]').each(function(){
var flipSwitch = $(this);
var defaultValue = flipSwitch.attr('data-default-value');
flipSwitch.val(defaultValue);
flipSwitch.slider('refresh');
});
// Reset radio elements
page.find('.ui-content *').filter('fieldset:has([type="radio"])').each(function(){
var radio = $(this);
var checkedRadio = radio.find(':checked').prop("checked",false).checkboxradio("refresh");
var defaultRadio = radio.find('[data-default-value]').prop("checked",true).checkboxradio("refresh");
});
}
So here is what I am trying to do,
Lets say there is my url
http://myurl.com/watch?v=**XYZ**&caption=**ABC**&link=**http://google.com**
I want the text in bold as input from user e.g.:
**v**= textfield1
**caption**= textfield2
**link**= textfield3
SUBMIT button
After clicking submit a text should be generated "click here" which will should open generated url in new window.
http://myurl.com/watch?v=**XYZ**&caption=**ABC**&link=**http://google.com**
The best option is to use JavaScript.
You can take your values from textfield on submit (check here) and create your url.
After you car redirect to your page using window.location
Ι created a page that makes that you want.
index.php
<html>
<head>
<title>My Page</title>
<script type="text/javascript">
function takevalues()
{
var value1 = document.getElementById('textfield1').value;
var value2 = document.getElementById('textfield2').value;
var value3 = document.getElementById('textfield3').value;
window.location = "http://myurl.com?value1="+value1+"&value2="+value2+"&value3="+value3;
}
</script>
</head>
<body>
<form name="myform" action="javascript:takevalues()" method="POST">
<div align="center">
<br><br>
<input type="text" size="25" id ="textfield1"> <br>
<input type="text" size="25" id ="textfield2"> <br>
<input type="text" size="25" id ="textfield3"> <br>
<br><br>
<input type="submit" size="value" id ="Submit">
</div>
</form>
</body>
</html>
I am beating my head on the wall for hours with MVC 4 and jQuery validation to validate the first first on blur. I have tried attaching the validation to the entire form AND to the individual element (first field) to no avail. If I add an alert() into the blur event it seems to fire but no validation of the required field. I have additional validations to add after the required is working but haven't gotten to them yet. I don't know that it is a problem with the MVC 4. JQueryvalidate is v1.10. I have also tried setting up the validator and then calling .valid() on the element I want validated using the .blur and still not validation that I can see.
$(function () {
$('#productionOrder').focus();
$.validator.addMethod("cMinLength", $.validator.methods.minlength,
$.format("Must contain as least {0} chars"));
$.validator.addClassRules("productionOrder", { cMnLength: 3 });
$('#myForm').validate({
onkeyup: false,
//onfocusout: false,
errorClass: 'fieldError'
//rules: {
// productionOrder: "required number",
// tc: "required",
// dn: "required"
//}
});
$("#towCount").bind("change keyup", function () {
$form.validate().element("#towCount");
});
//$('#productionOrder').validate({
// //onkeyup: false,
// onfocusout: false,
// errorClass: 'fieldError',
// rules: {
// productionOrder: {
// required: true
// }
// }
//});
});
And the .cshtml
#model FiberLine2.ViewModels.Creel
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Test</title>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<style>
.fieldError {
border-color: red;
border-width: medium;
}
.input-label {
font-size: 13px;
width: 130px;
height: 30px;
display: inline-block;
}
</style>
</head>
<body>
<form id="myForm">
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<div>
<!-- app header -->
<label>#Resources.Strings.User: </label>
<label>#User.Identity.Name</label>
</div>
<fieldset>
<legend>#Resources.Strings.Creel #Resources.Strings.Load</legend>
<div>
<div id="errorDiv"></div>
<hr />
#Html.Label(#Resources.Strings.ProductionOrder, new { #class = "input-label lock" })
<input type="text" id="productionOrder" name="productionOrder" class="required" maxlength="4" />
<br />
<label class="input-label lock">#Resources.Strings.Tow #Resources.Strings.Count</label>
<input type="text" id="towCount" name="tc" class="required" size="5" maxlength="5" value="299" />
<br />
<label class="input-label lock">#Resources.Strings.Batch #Resources.Strings.Sequence</label>
<input type="text" id="doffNumber" name="dn" size="5" maxlength="5" value="1" />
<br />
<label class="input-label">#Resources.Strings.Creel #Resources.Strings.Position</label>
<input type="text" id="creelPosition" name="cp" size="5" maxlength="5" />
<br />
<label class="input-label">#Resources.Strings.Batch #Resources.Strings.ID</label>
<input type="text" id="creelNumber" name="cn" size="7" maxlength="7" />
<br />
<hr />
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
</form>
</body>
</html>
Can you try this instead?
var settngs = $.data($('#myForm')[0], 'validator').settings;
settngs.onkeyup = false;
Here is an example HTML page that demonstrates the issue:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content" id="cp">
<form id="form">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>Test 1:</legend>
<input type="radio" name="r1" id="r1a" value="none" checked="checked" /><label for="r1a">A</label>
<input type="radio" name="r1" id="r1b" value="detail"/><label for="r1b">B</label>
<input type="radio" name="r1" id="r1c" value="measure"/><label for="r1c">C</label>
</fieldset>
</div>
</form>
</div><!-- /content -->
</div><!-- /page -->
<script type="text/javascript">
$(document).ready(function() {
var form = $('#form');
form.append('<div data-role="fieldcontain">');
form.append(' <fieldset data-role="controlgroup" data-type="horizontal">');
form.append(' <legend>Test 2:</legend>');
form.append(' <input type="radio" name="r2" id="r2a" value="none" checked="checked" /><label for="r2a">A</label>');
form.append(' <input type="radio" name="r2" id="r2b" value="detail"/><label for="r2b">B</label>');
form.append(' <input type="radio" name="r2" id="r2c" value="measure"/><label for="r2c">C</label>');
form.append(' </fieldset>');
form.append('</div');
form.trigger('create');
});
</script>
</body>
</html>
Save this page and load it in a borwser. You will see that the "Test 1" radio list comes up horizontal (as it should because of the data-type="horizontal" attribute). However the "Test 2" radio list, which is added dynamically, comes up vertically, which is the default setting. It seems the data-type="horizontal" has no effect on the dynamically created radio list.
Is there a refresh or event anyone knows about which I should trigger somewhere in the DOM to get this to work?
The problem is the way you are adding your new elements to the form. If you change your javascript function to this you'll see that it works:
$(document).ready(function() {
var form = $('#form');
var newElement = '';
newElement += '<div data-role="fieldcontain" data-type="horizontal">';
newElement += ' <fieldset data-role="controlgroup" data-type="horizontal">';
newElement += ' <legend>Test 3:</legend>';
newElement += ' <input type="radio" name="r3" id="r3a" value="none" checked="checked" /><label for="r3a">A</label>';
newElement += ' <input type="radio" name="r3" id="r3b" value="detail"/><label for="r3b">B</label>';
newElement += ' <input type="radio" name="r3" id="r3c" value="measure"/><label for="r3c">C</label>';
newElement += ' </fieldset>';
newElement += '</div>';
form.append(newElement);
form.trigger('create');
});
Think about it this way: Each time the append() function is used the browser attempts to add whatever you've given it to the DOM. But because you have broken your elements across different calls to append() the browser has to try to make sense of it. So when you have this:
form.append('<div data-role="fieldcontain">');
The browser sees that you've left off a closing div tag and tries to fix it for you by adding it. This means your next call to append() will not go inside the div you just added but after it because the browser has automatically closed it for you.
You should add complete, well-formed elements to avoid this issue.