change a input field value on change - javascript

I'm using a modal, the thing is that I want to change the value of an input field based on it. If modal is open value is "Update" when the modal is not displayed, the value is "create".
I tried like this but since it is executed only one time on page load it's not what I want.
if (($("element").data('bs.modal') || {}).isShown) {
$('#action-description').val('Update');
} else {
$('#action-description').val('Create');
}
And the input field:
<input type="text" id="action-description" name="action-description" value="">
I need to make something on change so I also tried like this:
$('#modalElement').on('hidden', function(){
$('#action-description').val('Create');
});
But I can't make it work!

Your logic is correct. You can just convert it to a function and open the modal using jquery only.
So, write a function as:
function openModal(){
$('#myModal').modal('show');
if (($("element").data('bs.modal') || {}).isShown) {
$('#action-description').val('Update');
}
}
Also you can write a similar function to close the modal on clicking cross or cancel button(if you have any)
function closeModal(){
$('#myModal').modal('hide');
$('#action-description').val('Create');
}

Related

Jquery of a HTML Input Element

JavaScript code:
$(document).ready(function(){
$(".email-form").hide();
$(".name-form").hide();
$(".btn-form").hide();
})
$(document).ready(function(){
$(".btn-adddata").click(function(){
$(".email-form").show();
$(".name-form").show();
$(".btn-form").show();
$(this).hide();
$(".btn-confirm").click(function(){
email = $(".email-input").val();
name = $(".name-input").val();
$(".email-input").val()="";
$(".name-input").val()="";
$(".email-form").hide();
$(".name-form").hide();
$(".btn-form").hide();
$(".btn-adddata").show();
});
$(".btn-cancel").click(function(){
$(".email-form").hide();
$(".name-form").hide();
$(".btn-form").hide();
$(".btn-adddata").show();
})
})
})
Details of my Webpage
Initially, there will only be .btn-adddata button in the webpage.
When the user clicks .btn-adddata button, it will be hidden and three hidden forms appear in the browser. First form contains only a fieldset which further contains an input box. Same is the case with the second form. While the third form contains two buttons .btn-confirm and .btn-cancel.
On clicking .btn-cancel, the page should be back to it's original state.
On clicking .btn-confirm, the page should come back to it's original state except that the user entered values in the input fields are stored in a variable.
But actually nothing was happening when I am clicking .btn-confirm button.
I couldn't figure out what's going on.
Some one please figure out the error for me.
Thanks in advance.
First of all, you should hide the form in your HTML using inline CSS so that they don't flash and disappear.
<form style="display; none">
Then you don't need to hide them in $(document).ready(...).
Secondly, you have a mistake in your event handler. You need add 3 click handlers, but instead, you have only one click handler, which adds two more click handlers every time the first button is clicked.
$(document).ready(function(){
$(".btn-adddata").click(function(){
// insert: code to show all forms and hide this button
}); // <-- you're missing this
$(".btn-confirm").click(function(){
// insert: code to get values
// insert: code to set values to ''
// e.g. $(...).val("");
});
$(".btn-cancel").click(function(){
// insert: code for cancel button
});
});
1st: First look -input").val()="" should be -input").val("") not equals
2nd: Personally I don't prefer events inside event
3rd: You can combine selectors $(".class1 , .class2 , #id1 , #id2 , ....")
$(document).ready(function(){
var If_adddata = false; // condition to stop confirm and cancel buttons to work until the adddata click first
$(".email-form , .name-form , .btn-form").hide();
// adddata click
$(".btn-adddata").click(function(){
$(".email-form , .name-form , .btn-form").show();
$(this).hide();
If_adddata = true;
});
// confirm click
$(".btn-confirm").click(function(){
if(If_adddata === true){
var email = $(".email-input").val(),
name = $(".name-input").val();
$(".email-input , .name-input").val("");
$(".email-form , .name-form , .btn-form").hide();
$(".btn-adddata").show();
}
});
// cancel click
$(".btn-cancel").click(function(){
if(If_adddata === true){
$(".email-form , .name-form , .btn-form").hide();
$(".btn-adddata").show();
}
})
})

Focus specific 'id' after submit action

I want to focus on specific id (ex. using $('#a')) after submit.
There is nothing special with my code yet.
My javascript code is
function get_info(id){
$(user_id).submit();
$('#a).focus();
};
After submit, it should focus on where id='a'.
But after submit window focus on id='a' and reset the page.
I tried using
function get_info(id){
$(user_id).submit(function(e){
e.preventDefault();
$('#a').focus();
});
};
But this code make program worse. I think it stops performing submit.
Can anyone help me?
As Chris's comment says you couldn't focus on the element simply by using $('#a').focus(); after the submit since the page will be redirected/refreshed.
You need to use cookies or local storage, here a suggested sample using local storage like :
function get_info(id) {
localStorage.setItem('focusItem', '#a');
$(user_id).submit();
};
Then in the ready function, you could add :
$(function(){
var focusItem = localStorage.getItem('focusItem');
if( focusItem != null ){
$(focusItem).focus();
localStorage.removeItem('focusItem');
}
});
function SetFocus(){
$("#FocusingID").focus();}
/***********another way **********************//*
$("#submitbtnId").click(function(){
//your submession and other task;
$("#FocusingID2").focus();
});
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=text id=FocusingID>
<button type=submit onclick="SetFocus();">click</button>

HTML and JavaScript: Change button text (Toggle)

I need to change a button's text, however I think the issue I don't understand is how to change it back using separate files. I need to use jQuery to toggle pictures. This will hide the image and show the image. The button is "hard coded" I think in both the HTML and JavaScript.
The button is showing "hide" to initially hide the image. Once the button is clicked the image disappears and the button's text turns to "Show". However it will not turn back to "hide".
HTML:
<img src="sky.jpg" id="sky">
<input type='button' onclick="js/toggle.js" id="skybutton" value="Hide">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/toggle.js"></script>
JavaScript:
$('#skybutton').click(function() {
$("#sky").toggle();
$(skybutton).val('Show');
});
Welcome to stackoverflow Shepard!!
You need little bit of logic in your javascript in order to make this work both ways:
<img src="sky.jpg" id="sky">
<input type='button' onclick="js/toggle.js" id="skybutton" value="Hide">
Here in the click function is where you need magic to happen:
Try this code:
$('#skybutton').click(function() {
$("#sky").toggle();
if($(this).val() === 'Hide'){
$(this).val('Show');
}else{
$(this).val('Hide');
}
});
So what is happening above is that you already have a click function attached to the button so with in the function you can refer to that button as this and you can check what the value of the button is.
Your if statement goes hey button if your value is 'Hide' change the value to 'Show' and else your value must be 'Show' so change it back to 'Hide' let me know if I can clear anything else up for you. Good luck with the project
You can achieve this using an if else statement say:
$('#skybutton').click(function() {
If($(this).val() == "hide") {
$("#sky").hide();
$(this).val("Show")
} else {
$("#sky").show();
$(this).val("hide")
}
});
In support of I am Cavic, just a more readable version
$('#skybutton').click(() => {
$("#sky").toggle()
if ($(this).val() === "hide") {
$(this).val("show")
return
}
$(this).val("hide")
})

Save and open the content of a textarea

i'm working on a text editor as part of a school project and i'm having a small issue with my save and open code.
Here are my buttons:
<button id="gu" onclick="save()">Save</button>
<button id="ab" onclick="open()">Open</button>
Here's my textarea:
<textarea name="comment" rows=30 cols=101 id="texto"></textarea>
And here's my javascript functions:
function save(){
gu = document.getElementById("texto");
localStorage.setItem("texto",gu);
console.log(texto+"="+gu);
}
function open(){
console.log("Abierto")
document.getElementById('texto').innerHTML=gu;
}
My goal is that if write something and then press the "save" button, the content inside my textarea is saved, and if i press the "open" button it shows what i wrote on the textarea.
Any idea on how to fix my code?
Sorry if my english is bad.
Here you go: https://jsfiddle.net/cinerobert/qwgv18r5/
function save()
{
localStorage.setItem("someitem", document.getElementById("texto").value);
document.getElementById("texto").value = "";
console.log(texto + "=" + gu);
}
function retrieve(){
console.log("Abierto")
document.getElementById("texto").value = localStorage.getItem("someitem");
}
You can't use open() as a function name because it's already a built-in function in javascript, so I changed it to retrieve(). See here: http://www.w3schools.com/jsref/met_win_open.asp
Is there some reason you're required to use setItem()? Using a variable (gu) and setItem is redundant. It would work either way.
Also to get and set the text inside a text area I you need to use value().
I also changed the save() function so that it clears the textbox, so that you can see something happen when you click retrieve().
Below are the things need to be done
function save()
{
gu = document.getElementById("texto");
localStorage.setItem("texto",gu.innerText); //here you were saving the dom object not the text inside
console.log(texto+"="+gu.innerHTML);
}
function open()
{
console.log("Abierto")
document.getElementById('texto').innerHTML=localStorage.getItem("texto"); //here you need to get the text from your local storage
}

How do you do a mandatory checkbox in a form?

I need a checkbox, where you move from one page to another after clicking the box. The checkbox should be required, given that you've read the terms and conditions link next to it.
I'm only half sure how to do this, something like this:
<input type="checkbox" value="confirm_prepay_terms" name="confirm_prepay_terms" align="middle" />
with Jquery:
<script type="text/javascript" language="javascript">
$(document).ready(function() {
if ($('form#prepay input:checkbox', 'confirm_prepay_terms').is(':checked') {
return true;
} else {
$('#confirm_terms_hint').text('Please try again - you need to check the box to move on');
$('#confirm_terms_hint').css('font-weight', 'strong');
return false;
}
}
</script>
At the moment though, I can't view the checkbox at all on the page, so perhaps my HTML is incorrect?
Hope you can help.
Your HTML is fine - is will show a checkbox - but without any text. You could add some using this markup :
<input type="checkbox" value="confirm_prepay_terms" name="confirm_prepay_terms" align="middle" >​Text here</input>​​​​​​​​​​​​​​​​​​​​​​​
In your JavaScript you are missing a closing ) :
if ($('form#prepay input:checkbox', 'confirm_prepay_terms').is(':checked') {
should be
if ($('form#prepay input:checkbox', 'confirm_prepay_terms').is(':checked')) {
and a ) on the last line :
}
</script>
should be
})
</script>
and your selector is incorrect
$('form#prepay input:checkbox', 'confirm_prepay_terms')
should be
$('form#prepay input:checkbox[name=confirm_prepay_terms]')
This uses the multiple attribute selector
and
$('#confirm_terms_hint').css('font-weight', 'strong');
should be
$('#confirm_terms_hint').css('font-weight', 'bold');
font-weight has no strong value (see here) ... use bold instead
in your script you are returning true or false but the code is not being called by anything - its executing as soon as the page has completed loading. Have a look at the .submit() method in jQuery if you want to perform form validation. An example would be this :
$(document).ready(function() {
$('#prepay').submit(function() {
if ($('form#prepay input:checkbox[name=confirm_prepay_terms]')) {
return true;
} else {
$('#confirm_terms_hint').text('Please try again - you need to check the box to move on');
$('#confirm_terms_hint').css('font-weight', 'bold');
return false;
}
});
});
This would prevent the form from being submitted now - as you return false to the submit event.
Fully working example here
I don't think it is necessary for you to provide a CheckBox as long as they must accept this terms and conditions before using the service.
You can just do the following and stress-less yourself .
- Provide a link to the terms and conditions for reading
- Notify them that they have automatically accept this terms while proceeding.

Categories