my form
<form action="javascript:alert( 'success!' );">
<div>
<input type="text" name="username">
<input type="password" name="password">
<input type="submit">
</div>
</form>
my ajax code
<script>
$( "form" ).submit(function( event ) {
if ( $( "input:first" ).val() === "correct" && $( "input:second" ).val() === "test" ) {
$( "span" ).text( "Validated..." ).show();
return;
}
$( "span" ).text( "Not valid!" ).show().fadeOut( 10000 );
event.preventDefault();
/// set here your ajax code
});
how can i select password field.
2.this method is easly hackable?
$('input[type="password"]')
OR
$('input[name="password"]')
Working Demo
$(document).ready(function() {
alert($('input[type="password"]').val())
alert($('input[name="password"]').val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="text" name="username">
<input type="password" name="password" value="test">
<input type="submit">
</div>
There is no such selector :second but you can use it with .next():
if ( $( "input:first" ).val() === "correct" &&
$( "input:first" ).next().val() === "test" ) {
other options are:
With .next()
Using :eq() or .eq().
with .index() etc.
Related
How can i disable button when clicked once after post request ? In my code below, when i click the button, the post request is not executed but the button is disabled.
HTML
<form class="col s12" method="POST" action="<?php echo base_url(); ?>do/this">
<button type="submit" name="send" id="my_button"
class="waves-effect waves-green btn">My Button</button>
</form>
JS
document.getElementById("my_button").onclick = function() {
this.disabled = true;
}
document.getElementById("my_button").onclick = function(e) {
e.preventDefault();
this.disabled = true;
}
<form class="col s12" method="POST" action="<?php echo base_url(); ?>do/this">
<button type="submit" name="send" id="my_button"
class="waves-effect waves-green btn">My Button</button>
</form>
If I were you, I would use jQuery to do this.
Like that:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.post demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form action="/" id="searchForm">
<input type="text" name="s" placeholder="Search...">
<input type="submit" value="Search">
</form>
<!-- the result of the search will be rendered inside this div -->
<div id="result"></div>
<script>
// Attach a submit handler to the form
$( "#searchForm" ).submit(function( event ) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $( this ),
term = $form.find( "input[name='s']" ).val(),
url = $form.attr( "action" );
// Send the data using post
var posting = $.post( url, { s: term } );
// Put the results in a div
posting.done(function( data ) {
var content = $( data ).find( "#content" );
$( "#result" ).empty().append( content );
});
});
</script>
</body>
</html>
You can disable the button in this part of the code:
posting.done(function( data ) {
var content = $( data ).find( "#content" );
$( "#result" ).empty().append( content );
});
Like that:
posting.done(function( data ) {
document.querySelector("#send_messages").disabled = true;
});
this is the html code:
<form action='survey.php' method='post' class='mainForm'>
<fieldset>
<div class="widget first">
<div class="head"><h5 class="iList">Text fields</h5></div>
<div class="rowElem noborder"><label>Name:</label><div class="formRight"><input type="text" name="name"/></div><div class="fix"></div></div>
<div class="rowElem noborder">
<label>Usual slider: </label>
<div class="formRight">
<div class="uiSliderInc"></div>
</div>
<div class="fix"></div>
</div>
<input type="submit" value="Submit form" class="greyishBtn submitForm" />
<div class="fix"></div>
</div>
</fieldset>
</form>
i have a slider with a range between 1 and 100 with this code:
<div class="uiSliderInc"></div>
in another file called "custom.js" i have this code:
$( ".uiSliderInc" ).slider({
value:50,
min: 0,
max: 100,
step: 1,
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value );
}
});
$( "#amount" ).val( "$" + $( ".uiSliderInc" ).slider( "value" ) );
i wanna send the value of this slider once i press on the submit button to the same page so i can do some php things to it. i bought a theme complete with css and jquery code because i dont understand it but now i have to use it. so can anyone help me on how i send the value when i press the submit button?
You can use an hidden input
<fieldset>
<div class="widget first">
<div class="head"><h5 class="iList">Text fields</h5></div>
<div class="rowElem noborder"><label>Name:</label><div class="formRight"><input type="text" name="name"/></div><div class="fix"></div></div>
<div class="rowElem noborder">
<label>Usual slider: </label>
<div class="formRight">
<div class="uiSliderInc"></div>
</div>
<div class="fix"></div>
</div>
<input id="amount" type="hidden" name="amount"/>
<input type="submit" value="Submit form" class="greyishBtn submitForm" />
<div class="fix"></div>
</div>
</fieldset>
Then you can get value on server-side like this:
$amount= $_POST['amount'];
Custom.js
$( ".uiSliderInc" ).slider({
value:50,
min: 0,
max: 100,
step: 1,
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value );
}
});
I have a html form and a jQuery function to validate my form.
When I send my form values to my php files, $_POST var is not set?
<form id="signup" class="dialog-form" action="bat/new_user.php" method="post">
<div class="form-group">
<label>E-mail</label>
<input type="text" name="mail" placeholder="email#domain.com" class="form-control">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" placeholder="My secret password" class="form-control">
</div>
<input type="submit" class="btn btn-primary">
</form>
PHP script is:
if (isset($_POST["mail"]))
{
$mail = $_POST["mail"];
print $mail;}
else{print "ko";
}
JS script is :
$( "#signup" ).submit(function( event ) {
event.preventDefault();
var $form = $( this ), url = $form.attr( "action" );
console.log($form.serialize() );
var posting = $.post( url, { s: $form.serialize() } );
posting.done(function( data ) {
$( "#register-dialog" ).append( data );
});
});
How I can get the form values?
The problem is the data passed to post(), it should be
var posting = $.post(url, $form.serialize());
You are passing a parameter called s with value as the serialized form
I would like to do something like the window of favorites on google chrome so the idea is write a hiperlink and then the link appears on the page.I m using jquery but doesn't work
html:
<div id="Add" title="Add Link">
<form>
<fieldset>
<label for="dir">URL</label>
<input id="dir" type="url" class="text ui-widget-content ui-corner-all"/>
</fieldset>
</form>
<div id="cuadro"></div>
$(function(){
var a = $("#Add");
a.dialog({
autoOpen: false,
height:350,
width:250,
modal: true,
buttons: {
"Accept": function(){ //Accept
AddLink();
$( this ).dialog( "close" );
},
"Reset": function(){//Reset
dir.val(" ")
},
"Cancel": function() {//Cancel
$( this ).dialog("close");
}
},
close: function() {
$( this ).dialog( "close" );
}
});
});
function AddLink(){
var dir=$("#dir);
var link=dir.val();
alert(dir.val());
$("#cuadro").append('<li>link1</li>');
}
If you want to use your linkvariable as the href then you need to change
$("#cuadro").append('<li>link1</li>');
to
$("#cuadro").append('<li>link1</li>');
DEMO FIDDLE
I'm not sure exactly what you meant by "write a hiperlink and then the link appears on the page", so I'm going to do my best and guess that this is what you want:
User types a URL into the input box.
You display it in some div below it.
HTML
<form>
<fieldset>
<label for="dir">URL</label>
<input id="dir" type="url" class="text ui-widget-content ui-corner-all"/>
</fieldset>
</form>
<p></p>
CSS
p {
color: green;
margin: 8px;
}
JavaScript
$( "#dir" )
.keyup(function() {
var value = $( this ).val();
$( "p" ).text( value );
})
.keyup();
I have an date input area using Bootstrap-dateinput
<div class="form-group row">
<div class="col-xs-8">
<label class="control-label">Date</label>
<div class="input-group date" id="dp3" data-date="12-02-2014" data-date-format="mm-dd-yyyy">
<input class="form-control" type="text" required="" placeholder="Date" name="date[]" value="">
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
</div>
Jquery Script To clone this form:
<script type="text/javascript">
$( document ).on( 'click', '.btn-add', function ( event ) {
event.preventDefault();
var field = $(this).closest( '.form-group' );
var field_new = field.clone();
$(this)
.toggleClass( 'btn-default' )
.toggleClass( 'btn-add' )
.toggleClass( 'btn-danger' )
.toggleClass( 'btn-remove' )
.html( '-' );
field_new.find( 'input' ).val( '' );
field_new.insertAfter( field );
} );
</script>
And Script to display calender:
<script type="text/javascript">
$('.input-group .date').datepicker({
...
});
</script>
But when New input area is created it do not show calender when clicked
I tried adding onclick
$(".input-group .date").click(function(){
$('.input-group .date').datepicker({
...
});
But yet seems there is some problem Can you please tell whats wrong and how to fix it ?
Try This:
<input class="form-control" type="text" required="" placeholder="Date" name="date[]" value="" onclick="$(this).datepicker({
...
});">