I found this code in https://codepen.io/pkbhuiyan/pen/VaVNQd . I passed "id" to form tag and I am trying to access all inputs in form tag but it does not work.
jQuery:
$(document).ready(function () {
jQuery(function ($) {
var $inputs = $( "#contact_form :input" ).prop("disabled", true);;
$("#edit_btn").click(function () {
$("#submit_btn").show(0);
$("#edit_btn").hide(0);
$inputs.prop("disabled", false);
});
$("#submit_btn").click(function () {
$inputs.prop("disabled", true);
$("#submit_btn").hide(0);
$("#edit_btn").show(0);
});
});
});
HTML:
<div id="kursiyerprofili">
<form action="/" method="post">
<div class="main">
<div class="container-fluid">
<div class="row">
<div class="contact_form col-sm-10 col-md-10">
<form name="contact_form" id="contact_form" class="contact_form" method="post">
<div class="row">
<div class="col-sm-5 col-md-5">
<label>İSİM</label>
<input name="name" id="student-name" class="form-control" type="text" value="" />
</div>
<div class="col-sm-5 col-md-5">
<label>SOYİSİM</label>
<input name="surname" id="student-surname" class="form-control" type="text" value="" />
</div>
<div class=" pull-right profile-edit-button ">
<a id="edit_btn" class="btn btn-warning" name="submit">Profili Düzenle</a>
<a id="submit_btn" class="btn btn-warning" name="submit">Değişiklikleri Kaydet</a>
<!--<span id="notice" class="alert alert-warning alert-dismissable hidden" style="margin-left:20px;"></span>-->
</div>
</div>
</form>
</div> <!--contact-form-->
</div> <!--row-->
</div> <!--container-fluid-->
</div> <!--main-->
</form>
</div>
If my form is like below:
<form id="myForm" action="/action_page.php"></form>
I can access all elements like bwlow:
document.getElementById("myForm").elements
The jQuery way:
$("form").each(function(){
$(this).find(':input')
});
Related
When user click submit, it should open http://127.0.0.1:5000/default/+UserInput. But the giveme() function returns "?keyword=UserInput" instead of "UserInput". How can I get a correct URL?
<form id="myform" class="form-horizontal" action="http://127.0.0.1:5000/default/" +
giveme() method="get" >
<div id="searchkeyword">
<div class="form-group">
<label for="keyword" class="col-sm-3 control-label">Enter keyword</label>
<div class="col-sm-4">
<input type="text" name="keyword" id="keyword" class="form-control">
<br>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-primary">Submit »</button>
<span class="small-paddingleft">*Required</span>
</div>
</div>
</form>
<script>
function giveme(){
document.getElementById("keyword").value;
}
</script>
Here is a function that gets what you want:
function giveme() {
const params = new URLSearchParams(window.location.search);
document.getElementById("keyword").value = params.get('keyword');
}
I'm trying to build a User interface of an application where user could add ul and li element when clicking on add question, I successfully managed to develop the front end part here's a preview:
but the problem is when saving this to the database which is so overwhelming I'm stuck at this, is there any way to save the data to an array so I can display them with php, any idea is welcomed.
here's the jquery code:
wrapper.on("click", "button", function(e){
e.preventDefault();
var parent = $(this).parent().parent().parent().parent().parent().parent();
var parentID = $(this).attr('element-id');
var elementID = 1000000000000000000*Math.random();
parentIDs.push(elementID);
if($(this).attr('class') == "add_field_button btn btn-success"){
if(parent.find('ul').length){
parent.find('ul').first().append(`
<li>
<div class="panelcb white-box">
<div class="form-horizontal form-material">
<div class="form-group">
<label class="col-md-12">Question</label>
<div class="col-md-12">
<input type="text" placeholder="Your Question" value="testqst" class="question question`+parentID+` form-control form-control-line" parent-question="`+parentID+`" element-question="`+elementID+`"> </div>
</div>
<div class="form-group">
<label class="col-md-12">Response</label>
<div class="col-md-12">
<input type="text" placeholder="Your Response" value="testqst" class="response response`+parentID+` form-control form-control-line" parent-response="`+parentID+`" element-response="`+elementID+`"> </div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<button class="add_field_button btn btn-success" element-id="`+elementID+`">Add Question</button>
</div>
<div class="col-sm-4">
<button class="delete_field_button btn btn-error" >Delete</button>
</div>
</div>
</div>
</div>
</div>
</li>`);
}else{
$(this).closest('li').append(`
<ul><li>
<div class="panelcb white-box">
<div class="form-horizontal form-material">
<div class="form-group">
<label class="col-md-12">Question</label>
<div class="col-md-12">
<input type="text" placeholder="Your Question" value="testqst" class="question question`+parentID+` form-control form-control-line" parent-question="`+parentID+`" element-question="`+elementID+`"> </div>
</div>
<div class="form-group">
<label class="col-md-12">Response</label>
<div class="col-md-12">
<input type="text" placeholder="Your Response" value="testqst" class="response response`+parentID+` form-control form-control-line" parent-response="`+parentID+`" element-response="`+elementID+`"> </div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<button class="add_field_button btn btn-success" element-id="`+elementID+`">Add Question</button>
</div>
<div class="col-sm-4">
<button class="delete_field_button btn btn-error" >Delete</button>
</div>
</div>
</div>
</div>
</div>
</li></ul>`);
}
}else if($(this).attr('class') == "delete_field_button btn btn-error"){
parent.remove();
}
Thanks is advance.
Well...
If the whole user-interative-area, I'd call a playground, can be put inside a container:
<div id='playground'>
.. all the ul's and li's..
</div>
And if you've got a form or something else:
<form action='/' id='form-playground' method='post'>
<textarea id='playground-container' name='playground' class='hidden'>
</textarea>
<input type='submit' value='Save My Playground'>
</form>
Then on submit you can copy the contents of the the playground to a hidden textarea:
$(document).ready(function () {
$('#form-playground').on('submit', function () {
$('#playground-container').html($('#playground').html());
return true;
});
});
Or perhaps an AJAX post:
$.post( PostUrl, { playground: $('#playground').html() } );
I'm a little newbie with jQuery, ajax and JavaScript. I need a little help to find out how to post data to a hidden iframe and then display it with the same button.
Here is what I've tried so far:
<form id="testform" name="testform" class="form-horizontal" action="testing/index.php" method="post" target="mydata">
<div class="form-group">
<div class="col-sm-6 col-sm-offset-3">
<input class="form-control" placeholder="please enter test name" name="test-input">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-primary" id="testit">I want to test!</button>
</div>
</div>
</form>
<div class="row">
<div class="col-md-12" id="target">
<script>
$(document).ready(function() {
$('#testform').on('submit', function() {
$("#target").show();
});
$("#target").hide();
});
$("#target").html('<object name="mydata" data="http://testurl.com/testing"></object>');
</script>
</div>
</div>
Thank you for your help.
What you should do, if you really need to do it this way is:
<form id="testform" name="testform" class="form-horizontal" action="testing/index.php" method="post" target="mydata">
<div class="form-group">
<div class="col-sm-6 col-sm-offset-3">
<input class="form-control" placeholder="please enter test name" name="test-input">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-primary" id="testit">I want to test!</button>
</div>
</div>
</form>
<iframe id="mydata" style="border:0; height:0;"></iframe>
<script>
$(document).ready(function() {
$('#testform').on('submit', function() {
$("#mydata").css("height", 300);
});
});
</script>
How ever I do recomend you to have a look at jQuery's $.post() documentation and .serialize() documentation. you could to something like this instead:
<form id="testform" name="testform" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6 col-sm-offset-3">
<input class="form-control" placeholder="please enter test name" name="test-input">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-primary" id="testit">I want to test!</button>
</div>
</div>
</form>
<div id="succesResult"></div>
<script>
$(document).read((function(){
$('#testform').on('submit', function() {
var data = $( this ).serialize();
$.post("http://target.url", data, function(resultFromServer){
//success callback
$("#succesResult").html(resultFromServer); <--result could be html
})
});
}
</script>
i have one file upload form field,here without select any file means i want to show error message,from this code it will be working fine after that i select anyone file means i want hide the error message ,i don't know how to do this???
$("#horoscope_form").submit(function(e) {
e.preventDefault();
var filename = document.forms["myForm"]["Filename"].value;
if (filename == null || filename == "") {
$("#fileselect_error").show();
return false;
} else {
var filename = document.getElementById("myFile").value;
alert(filename);
$("#fileselect_error").hide();
return false;
}
});
<form method="post" enctype="multipart/form-data" class="form-horizontal" style="margin-top: 20px;" id="horoscope_form" name="myForm">
<div class="form-group">
<label class="control-label col-xs-3">File Upload</label>
<div class="col-md-9">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input">
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-default btn-file" id="fileinput">
<span class="fileupload-exists">Change</span>
<span class="fileupload-new">Select file</span>
<input type="file" id="myFile" name="Filename">
</span>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-xs-5">
<span id="fileselect_error"><strong >Error!</strong> Please select your file.</span>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-md-12">
<button class="btn btn-primary" value="register" type="submit">Upload The Horoscope</button>
</div>
</div>
</form>
Changes Made
$("input:file").change(function (){
console.log($(this).val().trim())// You will get the input value.
if($(this).val().trim().length){
$("#fileselect_error").hide();
}
else{
$("#fileselect_error").show();
}
});
Working Example
$(document).ready(function() {
//$("#fileselect_error").hide();
$("input:file").change(function() {
console.log($(this).val().trim())
if ($(this).val().trim().length) {
$("#fileselect_error").hide();
} else {
$("#fileselect_error").show();
}
});
$("#horoscope_form").submit(function(e) {
e.preventDefault();
var filename = document.forms["myForm"]["Filename"].value;
if (filename == null || filename == "") {
$("#fileselect_error").show();
return false;
} else {
var filename = document.getElementById("myFile").value;
alert(filename);
$("#fileselect_error").hide();
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" enctype="multipart/form-data" class="form-horizontal" style="margin-top: 20px;" id="horoscope_form" name="myForm">
<div class="form-group">
<label class="control-label col-xs-3">File Upload</label>
<div class="col-md-9">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input">
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-default btn-file" id="fileinput">
<span class="fileupload-exists">Change</span>
<span class="fileupload-new">Select file</span>
<input type="file" id="myFile" name="Filename">
</span>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-xs-5">
<span id="fileselect_error"><strong >Error!</strong> Please select your file.</span>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-md-12">
<button class="btn btn-primary" value="register" type="submit">Upload The Horoscope</button>
</div>
</div>
</form>
Have a change event handler for the file input control and set the display property of the error message there
$("#horoscope_form").submit(function(e) {
e.preventDefault();
var valid = !!$('#myFile').val();
$("#fileselect_error").toggle(!valid);
return valid;
});
$('#myFile').change(function() {
$("#fileselect_error").toggle(!this.value);
})
#fileselect_error {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" enctype="multipart/form-data" class="form-horizontal" style="margin-top: 20px;" id="horoscope_form" name="myForm">
<div class="form-group">
<label class="control-label col-xs-3">File Upload</label>
<div class="col-md-9">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input">
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-default btn-file" id="fileinput">
<span class="fileupload-exists">Change</span>
<span class="fileupload-new">Select file</span>
<input type="file" id="myFile" name="Filename">
</span>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-xs-5">
<span id="fileselect_error"><strong >Error!</strong> Please select your file.</span>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-md-12">
<button class="btn btn-primary" value="register" type="submit">Upload The Horoscope</button>
</div>
</div>
</form>
Add a class of hide, and the remove it like this:
jsfiddle
.hide {
display: none
}
I have the following form:
<form method="post" role="form" name="newCategoryForm" ng-submit="submitForm()" enctype="multipart/form-data" novalidate>
<div class="row">
<div class="row">
<div class="col s12">
<div input-field>
<input type="text" name="cat-name" id="cat-name"
ng-model="category.catname" required>
<label>Nombre</label>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<div input-field>
<textarea class="materialize-textarea" name="cat-description" id="cat-description" length="144"
ng-model="category.catdescription" ng-maxlength="144" required></textarea>
<label>Descripción</label>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<h6>Imagen de Fondo</h6>
<div class="file-field input-field">
<div class="btn pink darken-2 waves-effect waves-light">
<span>Archivo</span>
<input type="file" name="cat-bgimg" id="cat-bgimg"
file-model="variable" ng-model="category.catimg">
</div>
<div class="file-path-wrapper">
<input class="file-path" type="text" readonly>
</div>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-large pink darken-2 waves-effect waves-light center-button" ng-disabled="newCategoryForm.$invalid">Crear Categoría</button>
</form>
And in my controller I have this:
angular.module('sccateringApp')
.controller('newCategoryController', function (httpcalls, $scope) {
var request = httpcalls;
$scope.submitForm = function(){
$scope.catinfo = $scope.category;
console.log($scope.catinfo);
console.log(this.category);
console.log(newCategoryForm.category);
}
});
As you can see, the controller logs undefined for all three ways I'm trying to print out the contents of the form:
I'm very new to Angular and I'm very inexperienced. I'm using the documentation as a reference: https://docs.angularjs.org/api/ng/directive/ngSubmit
Any idea what I might be doing wrong?