Click button made text <change> into <input> - javascript

I have made a form something like this. When I click edit button, it will make test#yahoo.com into <input type="text" placeholder="test#yahoo.com">
<fieldset class="shortfieldset">
<div class="fieldsetTop">
<div class="fieldsetTop-left floatNone">
<h3>Login Details</h3>
</div>
<div class="fieldsetTop-right btn floatNone">
Edit
Save
</div>
</div>
<p> Login ID bisa dipakai salah satu dibawah ini: </p>
<form action="#" method="POST">
<label for="name"> Email </label>:
<span> test#yahoo.com </span> <br />
<label for="name"> HP </label>:
<span> 123123123 </span> <br />
<input type="submit" value="SUBMIT">
</form>
</fieldset>
What I have found is:
$(document).ready(function(){
$(".loginDetails").click(function() {
var input = $("<input>", {
val: $(this).text(),
type: "text" }
);
$(this).replaceWith(input);
input.select();
});
});
$(document).ready(function() {
$(".loginDetails").click(function() {
var input = $("<input>", {
val: $(this).text(),
type: "text"
});
$(this).replaceWith(input);
input.select();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<fieldset class="shortfieldset">
<div class="fieldsetTop">
<div class="fieldsetTop-left floatNone">
<h3>Login Details</h3>
</div>
<div class="fieldsetTop-right btn floatNone">
Edit
Save
</div>
</div>
<p>Login ID bisa dipakai salah satu dibawah ini:</p>
<form action="#" method="POST">
<label for="name">Email</label>:
<span> test#yahoo.com </span>
<br />
<label for="name">HP</label>:
<span> 123123123 </span>
<br />
<input type="submit" value="SUBMIT">
</form>
</fieldset>
It is only working when I click test#yahoo.com, it will change into input. But what I want is when I click EDIT BUTTON, all the values will change into input. And also when the texts becomes inputs, the button of submit will show and a button of edit will disappear. Because this is going to update database. Any idea? Thanks

I think originally what you'd want to do is have your span tags, which are what you want to change to input fields, to already be input fields, and just be disabled, rather than a totally different tag. Then on your edit click all you'd do is switch out the disabled attribute on the input fields.
Also for valid anchor tags you always need an href. I always put javascript:void(0); in when I don't want the href to actually do anything, rather than leaving it blank.
<fieldset class="shortfieldset">
<div class="fieldsetTop">
<div class="fieldsetTop-left floatNone">
<h3>Login Details</h3>
</div>
<div class="fieldsetTop-right btn floatNone">
Edit
<a href="javascript:void(0);" id="save> Save </a>
</div>
</div>
<p> Login ID bisa dipakai salah satu dibawah ini: </p>
<label for="email"> Email </label>:
<input type="text" id="email" name="email" disabled value="text#yahoo.com" />
<label for="name"> HP </label>:
<input type="text" id="name" name="name" disabled value="123123123" />
</fieldset>
CSS
input[disabled] {
// style the text box like your span here
}
#save {
display: none;
}
jquery
$('#edit').click(function(e) {
$(this).hide()
.closest('fieldset')
.find('input[type="text"]').attr('disabled', false);
$('#save').show();
});
$('#save').click(function(e) {
// do your save
// once saved, hide btn
$(this).hide();
});
EDIT:
If HTML5 is not available, you'll have to change the disabled attribute to:
<input ...... disabled="disabled" .... />

here is solution add class name to the edit hyper link
<a class="loginDetails">Edit</a>
after that use your script and it will work as you expecting it to work will show an input box.
here is the link of jsfidle http://jsfiddle.net/psjvrk4y/
Regards

<fieldset class="shortfieldset">
<div class="fieldsetTop">
<div class="fieldsetTop-left floatNone">
<h3>Login Details</h3>
</div>
<div class="fieldsetTop-right btn floatNone">
<a onclick="toInput($('#email'));toInput($('#hp'))" href=""> Edit </a>
Save
</div>
</div>
<p> Login ID bisa dipakai salah satu dibawah ini: </p>
<label for="name"> Email </label>:
<span id="email"> test#yahoo.com </span> <br />
<label for="name"> HP </label>:
<span id="hp"> 123123123 </span> <br />
</fieldset>
Javascript code:
function toInput(elem){
var input = $("<input>", {
val: elem.text(),
type: "text" }
);
elem.replaceWith(input);
input.select();
}

Is this what you are looking for : http://jsfiddle.net/wegnetnn/
Logic which I have used is, add "loginDetails" class to the text field which you want to convert to input field. Add click event listener to "Edit" link and whenever user clicks on it, trigger the click event for all the element which are having "loginDetails" class.
JS Code :
$(".loginDetails").click(function(e) {
var input = $("<input>", {
val: $(this).text(),
type: "text" }
);
$(this).replaceWith(input);
});
$("#edit-record").click(function(e){
e.preventDefault(); // used to prevent the default anchor link behavior
$("span.loginDetails").trigger("click");
});
Specify "edit-record" id for "Edit" link :
<a href="#" id='edit-record'> Edit </a>
Hope it helps. Let me know in case of any doubt.

Related

How to open div tag on button click in vuejs?

<div class="input-wrapper">
<div class="mobile-icon"></div>
<input
class="input-section label-set"
type="text"
v-model.trim="$v.mobile.$model" :class="{'is-invalid': validationStatus($v.mobile)}"
placeholder="Enter your mobile number" :maxlength="maxmobile" v-model="value" #input="acceptNumber"
/>
<div v-if="!$v.mobile.required" class="invalid-feedback">The Mobile Number field is required.</div>
<!-- <div v-if="!$v.mobile.minLength" class="invalid-feedback">You must have at least {{ $v.mobile.$params.minLength.min }} numbers.</div> -->
<div v-if="!$v.mobile.minLength" class="invalid-feedback">Kindly check phone {{ $v.mobile.$params.maxLength.min }} number.</div>
<!-- for 2nd screen -->
<button class="verify-button">SEND OTP</button>
<!-- for 3rd screen -->
<div class="verified-section dn">
<div class="tick-icon"></div>
Verified
</div>
<label style="display: flex ; align-items: center">
<input type="checkbox" style="margin-right: 5px;" class="" checked="checked" name="sameadr" />
Reach out to me on<span class="whatsapp-icon"></span> Whatsapp
</label>
<div class="otp-wrapper dn">
<div class="enterprise-details">Enter OTP and send as an SMS</div>
<div class="verify-wrapper">
<input class="otp-number" type="text" placeholder="-" />
<input class="otp-number" type="text" placeholder="-" />
<input class="otp-number" type="text" placeholder="-" />
<input class="otp-number" type="text" placeholder="-" />
<button class="verify-button-otp">Verify</button>
</div>
<div class="receive-otp">
Did not receive OTP <b style="color: #ee1d24"> Resend Now </b>
</div>
</div>
</div>
How to set condition when user clicked on send-otp button, It should display "otp-wrapper dn" div tag above.
created code for otp fields in html, But on button click, how to set condition to display otp fields.
<template>
<button #click='sendOtp'>send otp</button>
<div class='otp-wrapper dn' v-if="otpBtnClicked">
// add your remaining otp wrapper part
</div>
</template>
<script>
export default{
data(){ return { otpBtnClicked: false } },
methods: {sendOtp() { this.otpBtnClicked = true; }}
}
</script>
this should solve your problem.
Just use a v-if statement.
if you want crazy animations then just add a class to your otp-wrapper with the specified animation in css
First just add display:none to otp-wrapper-dn div..
<div class="otp-wrapper-dn" style="display:none"> ... </div>
Then define an onclick event for send OTP button and add a method for it in methods section (or, you can just have a pure js function if you like) where you can define how to show div..
methods: {
function MethodName(){
// Here goes anything to send OTP to customer
var otpSent = document.getElementByClassName('otp-wrapper-dn')[0];
// or document.querySelector('.otp-wrapper-dn');
otpSent.style.display = "block";
}
}
<button #click="MethodName()">Send OTP</button>

Multiple products in one form

I would like to add a functionality in my form, in which a user can add as many entries before hitting submit button, like a 'add to cart' functionality, show the added entries in same page, in a separate div with submit button then save those multiple entry in database using that submit button(in a separate div that shows added entry).
So far my form allows only entries on per submit bases, meaning is if the user wants to add another entry, he/she has to go back to the form and add and click to submit again.
<form method="POST" name="myForm" action="saveto.php">
<label> Speed Rating:</label>
<select name="speed_rating" required class="form-control" id="speed_rating" ></select>
<div class="form-group col-sm-8">
<label> Description:</label>
<select name="description" required class="form-control" id="description" >
</select>
</div>
<div class="form-group col-sm-4">
<label> Load Index:</label>
<select name="load_index" required class="form-control" id="load_index" >
</select>
</div>
<div class="form-group col-sm-6">
<label> Vendor:</label>
<select name="vendor" required class="form-control" id="vendor" >
</select>
<div class="note"> Recommended Vendor : <span id="recomvend"> </span> </div>
</div>
<div class="form-group col-sm-6">
<label> Quantity:</label>
<input type="text" required name="qty" class="form-control" id="qty"></div>
<div style="clear:both"> </div>
<input type="submit" name="submit" class="btn btn-primary smp" value="Submit">
<button id="clear" type="button" class="btn btn-primary smp smp2" > Reset </button>
</div>
<input type="submit" value="submit" name="submit">
</form>
How would you achieved this? My saveto.php is just a normal script that will process the submitted data to database, one entry in a per submit bases.
I created this jsfiddle https://jsfiddle.net/jy6vh4rp/31/
If that's what you are looking for then you should add this to your front end:
<form action="validate.php" method="post">
<div style="padding: 30px 0; text-align: center;">
<button type="button" onclick="createDOM()">Add</button>
<input type="submit" value="submit" name="submit" />
</div>
<div class="productsContainer"></div>
</form>
<script>
$(document).ready(function() {
id = 0;
createDOM = function() {
$(".productsContainer").append('<input type="text" id="' + id + '" name="products[]" value="' + id + '" />');
id++;
};
});
</script>
And this to your validation backend :
foreach($_POST['products'] as $prodInput){
$product = filter_var($prodInput,FILTER_SANITIZE_NUMBER_INT);
if( is_numeric($product) ){
echo $product;
}
}

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.

jQUERY drop down wont, close when i click it, unless i have a # in my anchor tag.it stays dropped down,nothing happens when i click

sorry i do want tag to link to login.
only the register and login page is suppose to drop down. the register code is the same. this is the html code for the page
<header id ="logo_nav">
<img class="logo" src="logo.png" width=" 382" height="122 " alt="voucher">
<ul id= "main_nav">
<li> Home </li>
<li id ="login">
<a id="login-trigger" href="login.php">
Login here <span> ▼ </span>
</a>
<div id="login-content">
<form action = "log.php" method="post">
<label id="user"> Username </label>
<br/>
<input id="inputbox"type="text" name="username">
<br/>
<label id="pass"> Password </label>
<br/>
<input id="pinput" type="password" name="password"> <br/>
<input id="submit" type="submit" value ="log in">
</form>
Below is the jquery code thats not allowing me to drop down and
close.
$(document).ready(function(){
$('#login-trigger').click(function(){
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
})
});
You have to add href="#", since you don't want tag to link anywhere.

Insert an attribute to input field when user selects a radio

I need a JavaScript that can insert an attribute to a field and also remove it when the user deselects the field.
Here is the code I'm using for the radio select:
<script>
$(document).ready(function() {
$("input[name$='sel']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#sel" + test).show();
});
if (test == "CreditCard") {
$("#card").addClass("validate[custom[card]] text-input");
} else {
$("#card).removeClass("validate[custom[card]] text-input");
}
});
</script>
Field code:
<table><tr><td>
<p>
Credit/Debit Card<lable style="margin-right:1px;"></lable><input type="radio" name="sel" id="sel" value="CreditCard" />
</p>
<p>
Paypal<input type="radio" id="sel" name="sel" value="Paypal" />
</p>
<p>
Wire Transfer<input type="radio" id="sel" name="sel" value="WireTransfer" />
</p>
<!====================================================================================>
</td><td>
<!====================================================================================>
<div id="selCreditCard" class="desc">
<label for="card"><strong>Card Number<font color=red size=3> *</font></strong></label>
<input name="card" type="text" id="card" value="" style="width:85px;" />
</div>
<!====================================================================================>
<div id="selPaypal" class="desc" style="display: none;margin-left:20px;margin-top:1px;margin-bottom:1px;">
paypal
</div>
<!====================================================================================>
<div id="selWireTransfer" class="desc" style="display: none;margin-left:20px;margin-top:0px;margin-bottom:-5px;">
Transfer
</div>
<!====================================================================================>
</td></tr></table>
​
This is the attribute that needs to be inserted to the "card" input field:
class="validate[custom[card]] text-input"
When the user selects the radio with the value CreditCard, the attribute will be inserted to the input field, and when the user deselects the radio with the value CreditCard the attribute will be removed.
Link for fiddle:
FIDDLE
telexper, there are lots of wrong things in your code, and unfortunatelly i dont have the time to explain right now.
but i will leave a working code for you here: http://jsfiddle.net/RASG/DSrLS/
just click "Credit/Debit Card" and the class nowitsadded wil be added to the input field, which will turn red.
HTML
<input type="radio" id="sel1" name="sel"> Credit/Debit Card
<br>
<input type="radio" id="sel2" name="sel"> Paypal
<br>
<input type="radio" id="sel3" name="sel"> Wire Transfer
<br>
<br>
<div id="selCreditCard" class="desc">
Card Number <input name="card" type="text" id="card" value="">
</div>
JS
$('#sel1').click(function() { $('#card').addClass('nowitsadded') })
CSS
.nowitsadded {background-color: red}

Categories