Jquery set different input text and value

Question

right now I'm using $.val() to set an input's value. But I want the user to see a different text in the input, and still send the value set with val() to the server. I tried using $.text() but it doesn't work. Is there a way to set the html value attribute and also set a distinct text inside the input for th## Heading ##e user to see?

I'm not posting any code because its pretty generic. The reason I need this is because I want to display a nice date string in the text (I'm using a datetime picker) and send a compacted version of the string to the server.

EDIT

Ok, hope this helps:

<input class="form-control date" id="booking_time" name="hour" type="text">

In Javascript I have something like:

var date_booked = new Date()
$("#booking_time").val(date_booked.toDateString());

But I want the input's value that is sent to the server to be the date whithout the toDateString proccessing, and still show the date.toDateString() in the text box. To do that, I hoped this would work:

$("#booking_time").val(date_booked);
$("#booking_time").text(date_booked.toDateString());

But it doesn't.

datepickers have formatters and they store date objects so not clear what problem is. You can parse date object and send any way you want to server and use the format option to display the way you want. Please provide full details — charlietfl
– charlietfl, Commented Feb 3, 2016 at 1:27
"using $.val() to set an input's value. But I want the user to see a different text in the input, and still send the value set with val() to the server." Tried setting .val() to set text to display , send formatted value to server ? — guest271314
– guest271314, Commented Feb 3, 2016 at 1:40
Ok, I guess I didn't explain myself correctly. I'll add an edit. — Alejandro Veintimilla
– Alejandro Veintimilla, Commented Feb 3, 2016 at 1:53
i suggest you make an data attribute and there store the data you want to save in database and during submit in the server side language you submit the data attribute to be saved in database. — guradio
– guradio, Commented Feb 3, 2016 at 2:07

B. Aikey · Accepted Answer · 2016-02-03 02:31:44Z

2

You can try storing the date you want to send to the server in a variable and then hook into the click event of the form's submit button to change the value right before submitting like so:

var date_booked = new Date()
$("#booking_time").val(date_booked.toDateString());

$("#id-of-submit-button").on("click", function() {
    $("#booking_time").val(date_booked);
});

The only problem is that if the user edits the input then it will overwrite their edit and send the variable instead. To get around this you can use another variable to detect a change in the input:

var submitvardate = true;
var date_booked = new Date()
$("#booking_time").val(date_booked.toDateString());

$("#id-of-submit-button").on("click", function() {
    if (submitvardate) {
        $("#booking_time").val(date_booked);
    }
});    

$("#booking_time").on("change", function() {
    submitvardate = false;
});

answered Feb 3, 2016 at 2:31

B. Aikey

2391 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alejandro Veintimilla Over a year ago

Your answer is a creative workaround, thanks. Anyway, I'll wait a couple of days just to see if I can find other ideas.

B. Aikey Over a year ago

Sure, I would suggest looking into the html5 "date" input field. Good luck!

Herbie D · Accepted Answer · 2016-02-03 03:15:05Z

0

you can try sending your value by ajax

var date_booked = new Date()
$("#booking_time").val(date_booked.toDateString());
$("#form").on("submit",function(){
    $.ajax({
        url : '',
        type : '',
        data : {
            hour : date_booked 
        },
        success : function(data){
            // do something ...
        }
    });
    return false;
}

answered Feb 3, 2016 at 3:15

Herbie D

12 bronze badges

Collectives™ on Stack Overflow

Jquery set different input text and value

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related